I have download a Bootstrap template and embed it on my web application. It works fine when I am trying to access using localhost:xxxxx
But when I try to access using same or any controller(localhost:xxxxx\Dashboard\Patient) styles and scripts are not working.
Also tell me that in above scenario where i have to register or add references of bootstrap
Sounds like your paths are off. If you are using Chrome, hit F12 to bring up developer tools, and then reload the page. Errors will be written to the console indicating resources couldn't be loaded. I'm guessing you are referring to them as thought they reside in the same directory of the page (e.g. <link href="bootstrap.css"...
Try using Bundles and let them manage the paths for you. So add this to your <head>:
#Styles.Render("~/Content/bootstrap")
And add this script Bundle right before your closing </body> tag:
#Scripts.Render("~/bundles/bootstrap")
These refer to a Bundles of CSS and Javascript files. Open up /App_Start/BundleCondif.cs and add these Bundles:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css"));
Note the paths, your bootstrap.js needs to reside in /Scripts/ and your CSS files need to reside in /CSS/
Related
I have multiple scss stylesheets in client/ directory. I have one particular page that is being rendered server-side and being served statically without Meteor app (it is email unsubscription confirmation).
I want to load my main site css bundle on this page.
For this objective everything I need is just a text contents of this bundle or even better an absolute path. Problem is, Assets.getText() access only private/ directory.
However, Meteor knows about this bundle file path on server side as it serves it with index.html somehow.
Is there a way to do it by myself?
If I understand the question correctly, from looking through https://github.com/meteor/meteor/blob/devel/packages/webapp/webapp_server.js, I can get mine like this:
path.join(
path.dirname(
path.join(
__meteor_bootstrap__.serverDir,
__meteor_bootstrap__.configJson.clientPaths['web.browser']
)
),
"merged-stylesheets.css"
)
on the server side. Change web.browser to web.cordova for the mobile version.
But if you want to include it on the static page, you can probably also just go like this:
<link rel="stylesheet" type="text/css" href="/merged-stylesheets.css">
depending on how you are serving the static page
The accepted answer only works in development. In production the css filename is a hash, e.g. facc2661135083eeff000051c65e72e2ad910050.css instead of merged-stylesheets.css.
This works for me in development AND production:
let cssPath = __meteor_bootstrap__.serverDir.replace('/server','/web.browser');
cssPath += "/"+fs.readdirSync(cssPath).find(file => file.slice(-4)==".css");
FYI, I'm using this server-side to pre-render with above-the-fold css: https://forums.meteor.com/t/pre-rendered-landing-pages-with-critical-css/50626
I have minified CSS and JS files that are auto-generated by Web Essentials, and auto-updated every time I update and save the original files.
What would be the best way to automatically toggle the actual (script/import) references within HTML between original (in Dev/Test) and minified (in Production) files?
This is within an MVC ASP.NET web app.
One idea would be to have server-side tags that render either ".min" or empty string based on an environment variable. But I'm wondering if there's a better, smarter, easier, more efficient way of handling this.
Thanks in advance.
Update:
My style bundle is defined like this:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site{version}.css"));
And I reference it like this:
#Styles.Render("~/Content/css")
However, this renders the following:
<link href="/Content/css?v=" rel="stylesheet"/>
It works fine if I take "{version}" out of bundle definition, but renders an empty "v=" if I include "{version}".
Update 2:
I just realized that due to certain complexities of the application, I can't use the bundling solution. What other options do I have?
Bundling will help you in this instance. You should already be able to see an example in your BundleConfig.cs file in App_Start.
Here is a tutorial on how to conifgure it http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
From that tutorial, this is how you actually configure the bundles themselves, the files that will be in them, etc. This includes any jquery in the scripts folder into a bundle called ~/bundles/jquery.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true; // <-- this line overrides the debug check to show you the minified version even in debug mode... remove it for normal .min in debug/un-minned when not in debug behaviour
}
You then reference these from your views using
#Scripts.Render("~/bundles/jquery")
This will then render a script tag with the .min version of the jquery if you're not in debug or leave it out if you are. There needs to be a .min version and an un-minified version in the same scripts folder (which you should have if Web Essentials is creating the .min for you.
You could actually stop using Web Essentials to do the minification if you use ScriptBundles as they will minify the javascript for you when it packages it into the bundle.
For your update
The "~/Scripts/jquery-{version}.js" means match any file in the scripts folder that starts with jquery- and ends with .js and has some version number between. If the files don't have a version number in them, then don't try and use the {version} substitution.
They do it with jquery in this case so that if you upgrade the version of jquery that you are using, you don't have to go back into your BundleConfig and manually change the file name for your jquery reference.
If your file was named site1.3.7.css, then this would probably work.
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site{version}.css"));
but it sounds more likely that you just need site.css.
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site.css"));
I'm not sure what you think prevents you from using them but you can link to files in CDNs and minify or not minify. Even just have individual files in a bundle to get the benefit of minification outside of debug without "bundling" them. So there's probably a way.
When I put my website in production using git push heroku master the url in my CSS does not refer to the right image url.
Here is my situation in development environment :
app/assets/images/logo.png is present
app/views/layouts/application.html.erb : <%= stylesheet_link_tag "style" %>
app/assets/stylesheets/style.css : background: asset-url("logo.png");
Here is my situation in production (when I "View Page source") :
I don't know how to find logo.png ?
Link to my CSS : <link href="/assets/style-75a5c3912777c4b39ba92d1893ac7815.css" media="screen" rel="stylesheet" />
In my (compressed) CSS I can find : background:asset-url("logo.png");
For the others images called directly from app/views/* it's ok (<%= link_to image_tag("xxx.png") %>)
In config/environments/production.rb I have :
config.assets.precompile += ['style.css']
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.digest = true
config.assets.compile = true
config.serve_static_assets = true
I'm following this great tutorial.
SCSS
The problem, from what I can see, is that you're not using any CSS preprocessors (SCSS / SASS), cancelling out the ability for the Rails helper asset-url.
I'd do this to start with:
#app/assets/stylesheets/style.css.scss
background: asset-url("logo.png");
Asset Pipeline
This will make sense if you look at how the asset pipeline works
Basically, the asset pipeline is a place to put all your css / image / javascript files, which your application can call, either statically or dynamically. Whilst in development, the asset_pipeline works very well to provide you with a central location for all your files -- all being called dynamically.
--
Production
The "problems" happen when most people want to use the asset pipeline in production. Production generally requires static assets, which means precompilation:
In the production environment Sprockets uses the fingerprinting scheme
outlined above. By default Rails assumes assets have been precompiled
and will be served as static assets by your web server.
Asset precompilation is when Rails will "compile" your CSS / Image / Javascript files into a series of "minified" versions - making them much more efficient to load
The problem with the precompilation process is actually loses all the "dynamic" aspects of the files, meaning if you want to include things like asset-url, you'll need to use a preprocessor to manage the dynamic aspects of these files.
I resolve my problem thanks to multiple answers found here and somewhere else (can't found where anymore sorry). Here is my solution to make things work without putting all my ressources into the public folder.
I deleted all ressources from public/images & stylesheets & javascript
I renamed my style.css to style.css.scss.erb
I replace every background: url("../images/xxx.png"); to background: url(<%=asset_path "xxx.png"%>); from my CSS
I executed this command before pushing into production : bundle exec rake assets:precompile RAILS_ENV=production
Thanks #RichPeck for your post which helps me to understand the process of assets pipelines
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:
I have an issue with the mvc4 bundler not including a file with extension .min.js.
In my Scripts folder i have two files: bootstrap.js, bootstrap.min.js
In my BundleConfig class, I declare
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
When running in Debug it renders as expected:
<script src="/Scripts/bootstrap.js"></script>
When running in Release it renders as:
<script src="/bundles/bootstrap?v=57XuMf8ytOYgVErEDhgFDRtQ5jlC48bryka4m2DVq_M1"></script>
Why doesn't it render as:
<script src="/Scripts/bootstrap.min.js"></script>
Why doesn't it render as: <script src="/Scripts/bootstrap.min.js"></script>
Because that's how bundling works in ASP.NET MVC 4. Don't worry, the contents of this /bundles/bootstrap?v=57XuMf8ytOYgVErEDhgFDRtQ5jlC48bryka4m2DVq_M1 is exactly the contents of the /Scripts/bootstrap.min.js. In this case the bundling mechanism hasn't minified the /Scripts/bootstrap.js file but used the already minified version.
The reason you want to use bundles.
Declare one statement but generates multiple import resources codes.
Minify your js or css code
Bundle mutiple files into one file which will reduce the browser
request number.
Bundle will give the request url a suffix which is generated based on
the files. So if you don't cache the page, there will be no js/css
cache problem, you don't need to clear browser cache.
By default, when you're in debug mode (you can modify your Web.config to set if enable DEBUG), the js/css files will not be bundled, so you can see the files seperately which will make it easier to debug.
When it's not debug enabled, the files will be bundled.
So if you already have .min.js files, you can import them directly in your page.