Currently in my Grails app, I have all my CSS/JSS inside web-app/css and web-app/js respectively, and I refer to them in my GSPs like so:
<link rel="stylesheet" type="text/css" href="<g:resource dir="css" file="myapp.css" />">
<script src="<g:resource dir="js" file="myapp.js" />"></script>
I am trying to convert these over to use asset-pipeline.
So I added compile ":asset-pipeline:1.8.11" to my BuildConfig#plugins section, and then moved my CSS/JS files into their appropriate places in grails-app/assets. I leave the <g:resource> tags in place. When the server starts, my app is styled completely wrong, and it is obvious that Grails can't find my CSS/JS files in their new location.
What do I need to do to make this conversion complete & correct?
You can use the asset pipeline taglibs:
<asset:stylesheet src="myapp.css" />
<asset:javascript src="myapp.js" />
This will look in the grails-app/assets/stylesheets and javascripts to find your resource files.
If you would still rather grab the relative path, you need to use the asset pipeline methods to do so.
The Asset Pipeline can change the path when deployed:
For example, in the Development environment, none of the resources are minified and combined and the path is something like YOUR_APP/assets/myapp.js .
In the production environment the path would change to just YOUR_APP/assets/SOME_HASH_OF_YOUR_MINIFIED_ASSET
So to get Asset Pipeline to tell you the path use:
${asset.assetPath(src: 'myapp.js')}
${asset.assetPath(src: 'myapp.css')}
Letting Asset Pipeline compute the path allows greater flexibility when deploying. For example, if you host an application in the cloud, you could specify a specific CDN (like CloudFront from AWS) to serve your static assets with a simple config change in Config.groovy.
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 a multi page application using webpack's entry points.
When deploying the page via Netlify, this vendors chunk stylesheet is outputting to the page:
<link href="/css/chunk-vendors.87c094b1.css" rel="preload" as="style">
However, when I build and serve the files on my development environment, this asset is not present on the page.
yarn build
serve dist -p 8080
Additionally, it's batching up all the styles from all the vendors into this chunk, regardless of whether or not the styles are used in a particular entry point. Ideally, it would only include styles used in that entry point.
I haven't defined any config.optimization.splitChunks in vue.config.js.
I'm not sure if I'm missing something obvious here. Let me know if I should include more information (e.g. particular config settings).
Webpack doesn't create the css files in dev mode by default. To get around this you should add to your vue.config.js to your module exports
css: {
extract: true,
},
I have a rails app I put my index.html in public folder and it shows when i go to port 3000 but it doesn't show it with css, I have my css folder and i tried putting it into assets stylesheets but nothing is happing? where do i put my folder with all the css files in it? would i need to change the way my index.html referances my css files?
for now my index.html in public folder references the css files like this <link href="css/styles.css" rel="stylesheet">
i've looked into some tutorials but their a bit complex in understanding
Things put in the public folder won't be processed by the asset pipeline. This isn't the "rails way" at all, but you can just move your .css to your public folder and call it like you're calling it now.
To gain access to the asset pipeline the quickest way I can think of is to just scaffold generate something, fill in the view with your HTML and then you can call via asset pipeline. However by default the root route isn't set so you'll have to navigate to localhost:3000/whatever-controller-you-generated-here
I highly recommend reading this guide before you go much further http://guides.rubyonrails.org/
First of all if you are using rails then why are you using static page like this. If you really want to use this then you have to specify stylesheet like this
<link href="/assets/application.css" rel="stylesheet" />
I have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>
However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?
I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.
Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.
Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..
The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).
As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)
Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.
Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.
Take a look at https://github.com/nigma/heroku-django-cookbook
It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.
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/'}),