I am facing a strange issue with the Django application on my local, the file is available in the static directory.
The following is in the settings.py
STATIC_ROOT = SITE_ROOT + '/static/'
STATIC_URL = '/static/'
this is how I am trying to include style file
<link href="/static/msc.css?v=1.2" rel="stylesheet" type="text/css" />
the following is added in urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
The file exist in the static directory, but it is not loading, I am facing a 404 error in console for the URL: http://localhost:8000/static/msc.css?v=1.2
please help me in this regard thanks.
You are not doing things the Django way.
When working with static files in Django
a) you need to use {% load static %} at the very beginning of your template
b) The link to static file is created using the following pattern
<link href="{% static 'path/to/style.css' %}" rel="stylesheet" type="text/css" />
Suppose that I have a directory in my django project static/css/style.css, then
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" />
Related
GitHub Repo for all the files related to this question:- click here
UPDATE
static files are not being collected in STATIC_ROOT folder
I have changed settings of the base directory(telusko) of my Django framework and also added {%load static%} in index.html but then also the console of chrome shows:
GET http://127.0.0.1:8000/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css
net::ERR_ABORTED 404 (Not Found)
code snippet of setting.py;
sitetravello contains all the HTML, CSS, js files and I have created assets for all the static file through cmd python manage.py collectstatic.
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILILE_DIRS = [
os.path.join(BASE_DIR, 'sitetravello')
]
STATIC_ROOT = os.path.join(BASE_DIR,'assets')
The main index.html file code is:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
ERROR IN CHROME:
Failed to load resource: the server response with the status of 404(not found)
ERROR IN CHROME CONSOLE:
GET http://127.0.0.1:8000/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css
net::ERR_ABORTED 404 (Not Found)
Your STATIC_ROOT is set to look for folder(s) named assets. Make sure you have your plugins/OwlCarousel2-2.2.1/owl.carousel.css inside assets named folder.
<a class="active" href="/dashboard">
<i class="fa fa-dashboard">
</i><span>Dashboard</span>
</a>
router.get('/dashboard',function(req,res,next){
res.render('dashboard');
});
With this part above, the "dashboard.ejs" file gets rendered as expected but when I modify it as shown below, the "dashboard.ejs" file does not get rendered!
<a class="active" href="/dashboard/dashboardcontent">
<i class="fa fa-dashboard">
</i><span>Dashboard</span>
</a>
router.get('/dashboard/dashboardcontent',function(req,res,next){
res.render('dashboard');
});
and i'm wondering why it is failing to render the file when such small changes are made.
Any help ?
Before finding the solution:
app.use(express.static(path.join(__dirname, 'public')));
As we can see, I had no virtual path prefix created for files that are served by the express.static function !
The solution:
To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:
app.use('/static', express.static(path.join(__dirname, 'public')));
I have also added this '/static' to all CSS, JS, Images links in "layout.ejs" file as shown below:
<!-- Bootstrap core CSS -->
<link href="/static/stylesheets/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/static/stylesheets/zabuto_calendar.css">
<link rel="stylesheet" type="text/css" href="/static/javascripts/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css" href="/static/lineicons/style.css">
<!-- Custom styles for this template -->
<link href="/static/stylesheets/style.css" rel="stylesheet">
<link href="/static/stylesheets/style-responsive.css" rel="stylesheet">
<script src="/static/lib/jquery.min.js" type="text/javascript"></script>
<script src="/static/dist/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/javascripts/chart-master/Chart.js"></script>
<script src="/static/select2Plugin/select2.min.js"></script>
<link rel="stylesheet" href="/static/select2Plugin/select2.min.css" />
Source: https://expressjs.com/en/starter/static-files.html
Hope this will be found helpful.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
<script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
<link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">
</head>
<body>
<div class="container">
hello
</div>
</body>
</html>
I have to specify full directory path for loading the js and css files
(jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have
(/slim/app/views/animations/) as the directory which contain all the
files. if currently i am in the views directory i should use the
(animations/whatever the file name) but it is not working in these
way. but if i use the full directory path it all works fine. why these
is happening can anyone explain.
(slim) is my root directory where i installed slim
Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:
src="/assets/js/myapp.js"
Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.
A common slim file structure looks like this:
app/
public/index.php
templates/
view.html
assets/
images/
js/
css/
Some add the assets subfolders directly into the public folder.
Others have those folders on the root level.
However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).
One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.
You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:
$app->hook('slim.before', function () use ($app) {
$app->view()->appendData(array('baseUrl' => '/base/url/here'));
});
or
$app->hook('slim.before', function () use ($app) {
$posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
$baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
$app->view()->appendData(array('baseUrl' => $baseUrl ));
});
And then apply it to the references in your HTML tag of the base template file and that's it.
<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />
Or use Uri::getBaseUrl(), e.g.
$basePath = $request->getUri()->getBasePath();
The project is done on MVC5, and when i publish the project through visual studio on azure, the images and css effects cannot be done. I did try through the Bundling.config but still cannot get it done. i have an img folder inside Content (it has all the images).
I have the following in my bundle config file:
bundles.Add(new StyleBundle("~/Content/img").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/base.css",
"~/Content/parallaxstyle.css",
"~/Content/bootstrap.css",
"~/Content/pricing.css",
"~/Content/pricing2.css"));
and in view:
#Scripts.Render("~/Content/img")
But it doesn't even render the css files.
This is the root.
The layout view:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/img/demo/_small")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/base.css")
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
That's because you created a StyleBundle, and are trying to render a ScriptBundle.
Change this:
#Scripts.Render("~/Content/img")
To this:
#Styles.Render("~/Content/img")
Note that if you have an actual folder at ~/Content/img, consider changing the name of the bundle so that there is no name clash.
I'm trying to rewrite some URL's on my website, and it works fine, I just have some issues with the stylesheets. All stylesheets works at index.php but not when url's like: localhost:8888/folder/path/(1,2,3,4)
I have my stylesheets in a file where they're listed like this:
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/css/site.css"/>
<link rel="stylesheet" href="includes/css/viewProfile.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="includes/css/viewProvider.css" type="text/css" media="screen" title="no title" charset="utf-8">
Is there a way to fix this with mod_rewrite or how would I fix this?
This is because you use a relative path to the style sheets. Note that the browser sends requests to
localhost:8888/folder/path/includes/css/...
in that case. If the styles always reside in that configuration at the server root, you could simply make the relative URI an absolute one. Or you remove the path portion for CSS files on the server side.