For a couple of days now I have been trying to setup my django project to run my html-template with an external css-file. So far, no succes....
I have installed staticfiles ( Im using django 1.2.4.) and put the 'staticfiles' in INSTALLED_APPS within settings.py and added the following code:
STATIC_ROOT=os.path.join(os.path.abspath(os.path.dirname(file)), "static")
STATIC_URL='/static/'
My css-file is located under /static/css/stylesheet.css
My html-template has the link
link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/stylesheet"
After running the server, the page loads just fine. However django cant find my stylesheet...
What am I doing wrong here?
The static root and url doesn't actually host the files. The static serve option (in the urls.py) mentioned previously is a good option for development and learning, but if you move to a deployment server you should use the static hosting provided by your webserver.
The way the static folders is intended to work is that you add the path locations for each app, project, etc to the static directories setting in settings.py. Then, when you run the command "django-admin.py collectstatic" django pulls all of your directories into your static root. After the first time you run collectstatic, only files that have changed will be copied again. This consolidates multiple static directories into one common place.
Static files documentation
You need to pass the RequestContext to the view, so it will run through the staticfiles' CONTEXT_PROCESSORS (which includes the STATIC_URL variable).
from django.template.context import RequestContext
context = {'my_other_context': 1}
render_to_response('your_template.html',
context_instance=RequestContext(request, context))
I would recommend you to just use a django.views.static.serve instance like this in the url.py file:
(r'^(?P<path>.*)$', 'django.views.static.serve',{'document_root': '/path/to/css/'}),
Related
I am shifting my development environment from windows to mac, and when I run the code after the complete setup, my website doesn't loads and doesn't shows any style and js doesn't work.
I have this path of the file, everything was working on my windows very fine but when I run it from the mac then the file path is not loading, how do I fix this? I am trying to search whole web, couldn't find this answer and ended up here :(
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/bootstrap.min.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/style.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/scripts/script.js" rel="stylesheet">
This become the url of the path of the file = https://localhost:5002/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css
This doesn't loads.
I have this path of the file, everything was working on my windows
very fine but when I run it from the mac then the file path is not
loading, how do I fix this?
It would be nicer if you could share your configuration details regarding how you are calling the path and where is your actual resources are located. The issue you are having might be causing due to numerous reasons.
As you may know, a BlazorWebView control has a configured host file (HostPage), typically wwwroot/index.html. The HostPage path is relative to the project. All static web assets (scripts, CSS files, images, and other files) that are referenced from a BlazorWebView are relative to its configured HostPage.
Thus, web root of the HostPage determines which subset of static assets are available. Therefore, its recommended placing the HostPage at the root of the wwwroot folder of the app, which provides the greatest flexibility for supplying static assets from the app, RCLs, and via subfolders of the app and RCLs.
How to Resolve:
Static File Middleware configuration :
Let's consider, your resouce files are outside of your wwwroot folder; Therefore, In non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly. For you scenario if your static are placed outside, please check if you are using as following:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "StaticFilesFolderName")),
RequestPath = "/StaticFilesFolderName"
});
Then you should refer that files as following on your _Layout.cshtml file:
<link rel="stylesheet" href="~/StaticFilesFolderName/site.css" asp-append-version="true" />
Note: Please have a look this official document.
Program.cs File:
builder.WebHost.UseStaticWebAssets();
Note: If you have static file configuration you should have UseStaticWebAssets in your program.cs file just below the builder.
Check App based path:
As explained earlier, this might happening due to your resource path while moving to MAC. In this scenario its recommended to use relative based path reference on top of your base href in _Layout.cshtml after that you can place rest of your resource file. So if your resource are inside wwwroot place your base href top of your other path reference and access it by hostname/your_resource_path.
<base href="~/" />
and following should also work:
<base href="~/YourApp/" />
Note: The trailing slash is required in some scenrio if you would get any css loading issue.
Static files in non-Development environments:
Be aware of non development environment as well because Blazor apps run locally, static web assets are only enabled by default in the Development environment therefore, to enable static files for environments other than Development during local development and testing we have to call UseStaticWebAssets on the WebApplicationBuilder.
Output:
I have build a web application using Django Rest Framework and React, I am using IIS for deployment. It works just fine but I have a problem when trying to deploy Django Admin. The style doesn't show. It shows this:
I have tried so many methods to add style to DRF project.
I used collectstatic and added it as application to IIS Manager
I activated mimetype in settings.py to accept .css
I tried to link css files in the to contrib/static with the /static url and added that into urls.py.
None of the above methods were able to solve my problem and I have stuck with this bug for days.
Could you help me to figure out this problem.
settings.py config
Your STATIC_ROOT seems to be incorrect. In fact, it will be the place where all statics will be collect by the collectstatic command.
So it has to refer to a path on your server.
You have two possibilities :
Build a relative path to a folder called "collected_static" or whatever name you want :
STATIC_ROOT = BASE_URL / 'collected_static'
Build an absolute path to a folder in your server like :
STATIC_ROOT = '/var/www/my_proj/statics
In development mode, you don't need to collect static, because django knows how to collect dynamically.
In production mode, you need to collect static, because it will provide and group all your statics inside the specified path.
After running python manage.py collectstatic, what is the response ? And can you see your expected statics in the expected folder ?
I'm currently using CSS in my Twig templates. The CSS is in my public folder and templates are in the templates folder.
So the following code is working actually :<link rel="stylesheet" href="assets/libs/css/style.css">
Here comes the problem. I created a sub directory in the templates folder but when I try to access to the CSS like before; Symfony don't find my CSS file.
I fixed this issue by using ../ before the href so I have this :<link rel="stylesheet" href="../assets/libs/css/style.css">
My problem is solved at this point but I want something more generic than ../ because if I have some folders inside a folder which is inside the templates folder I would have something like that ../../../ and it's really ugly.
So I am currently looking for a generic way to access to the public folder no matter where I am in the templates folder.
If my question isn't clear enough I know how to do this in Blade with {{ URL::to('/') }} so in Blade my code would have been like that : <link rel="stylesheet" href="{{ URL::to('/') }}/assets/libs/css/style.css">
Symfony has a twig function for what you want as part of the Asset-component. If you use Webpack Encore you will likely already have this installed otherwise you can install it via composer:
composer require asset
This should create a default configuration for you and you should be able to use the following in your templates:
{{ asset('/assets/libs/css/style.css') }}
As the docs for Linking to CSS, JavaScript and Image Assets state:
The asset() function's main purpose is to make your application more portable. If your application lives at the root of your host (e.g. https://example.com), then the rendered path should be /images/logo.png. But if your application lives in a subdirectory (e.g. https://example.com/my_app), each asset path should render with the subdirectory (e.g. /my_app/images/logo.png). The asset() function takes care of this by determining how your application is being used and generating the correct paths accordingly.
Bellow is my public folder structure hosted on firebase.
When i go to this url path http://.../dist/app.html the app.html loads but none of the scripts load. the only way to load the scripts is by adding 'dist' to the script path like shown in the pic (giving it full path of the scripts instead of relative path from the current folder)
If i open app.html on local machine it wont load the scripts because 'dist/[scriptNameHere].js' files does not exist.
So why does the hosted public folder require full path of the files?
I would like to import my scripts relative to the current path
<script type="text/javascript" src="inline.bundle.js"></script> etc
Well, it was siting right in front of me.
In your index.html change <base href="/"> to a path you want your path resolve to start from
Firebase Hosting will deploy everything relative to what is specified as the public directory in the hosting config of firebase.json. If you are building a single-page app, you will most likely want to use absolute URLs to reference bundles, so /inline.bundle.js, for example.
To check out how things are going to work once deployed, you should use firebase serve in your project directory. That will spin up a local server that should behave just like the deployed version -- you can test things out there and deploy when they look good.
Well i have a working spring-boot app that is running on a local computer just fine. However I noticed that when i do mvn package then none of my css or java scripts, locates in
/src/main/wepapp/css
are being copied into the jar file (package) created in the target directory.
spring boot reference guide says
65.3 Convert an existing application to Spring Boot "Static resources can be moved to /public (or /static or /resources or
/META-INF/resources) in the classpath root."
24.1.4 Static Content "Do not use the src/main/webapp folder if your application will be packaged as a jar. Although this folder is a
common standard, it will only work with war packaging and it will be
silently ignored by most build tools if you generate a jar."
So that means that i can put all my js and css folders into the folder
/src/main/resources/static
i.e. now my structure looks like that
/src/main/resources/static/css/
/src/main/resources/static/js/
all of my thymeleaf templates however are still located in
/src/main/resources/templates/
I did that, and as far as i understand know i need to add the ResourceHandler to my ResourceHandlerRegistry. Previously when all of my ccs were in "/src/main/wepapp/css/" my ResourceHandlers looked like that and it worked very well for me.
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfs/**").addResourceLocations("/pdfs/").setCachePeriod(0);
registry.addResourceHandler("/img/**").addResourceLocations("/img/").setCachePeriod(0);
registry.addResourceHandler("/js/**").addResourceLocations("/js/").setCachePeriod(0);
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
}
I have tried adding multiple handlers like
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/static/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/").setCachePeriod(0);
etc.
but none of them worked for me.
The html templates are displayed but the web browser console is reporing 404 when trying to locate /css/corresponing.css or /js/corresponing.js
I have deliberately disabled Spring security in my test project, in order to simplify debugging of this problem.
One more thing thing that i do not completely understand is the deployment assembly. I have read an article that said that when i do want to have particular folders into my target package jar file generated by maven, i do need to include those folder into my deployment assembly, well i did however "mvn package" is still not copping all of the content(inlcuding subfolders) of my /src/main/static folder into the target jar file. I see however the "templates" folder copied into the jar file. So there is some other magic happening behind the scene.
Here is how do i declare the css in my thymeleaf layout i.e.
/src/main/resources/templates/layout.html
<!DOCTYPE html>
<html>
<head>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/syncServer.css}" href="../css/syncServer.css" />
...
</head>
<body>
...
</body>
</html>
My question is: Is the configuration i done so far correct and if so what other options/settings i need to be aware of in order to make the app find the css files locates in /src/main/static/css/
Addition one
test project
git#github.com:TheDictator/sArchitecture.git
If you move you the whole static directory into the resources and totally remove the addResourceHandlers configuration, then everything works fine.
That means that resources structure would look like the following image: