It seems that the Rails asset pipeline isn't functioning correctly in my development environment. I'm experiencing the following issues:
Manifest files are being served in addition to other files.
Files are not being concatenated.
Some of the files that are served are completely empty.
These issues apply to both CSS and JavaScript assets. Below is a copy of the HTML output (I haven't edited the default rails layout). Note the presence of the manifest files and all the assets (which should be concatenated into a single file).
<!DOCTYPE html>
<html>
<head>
<title>Jackeyes</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/universal.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.waitforimages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="0AZh7mNJS7R1jsHKyZ5eKBrAON10Jra2677A8Lg3wzw=" name="csrf-token" />
</head>
<body>
I'm new to Rails, so I'm not sure how to begin resolving this. Any help would be greatly appreciated!
This is the default behaviour for rails in a development environment. I would suggest reading about asset pipeline in the rails guides.
During development, it tends to make things easier to debug if your assets are in separate files. For example, if you're using firebug in Firefox, you can look at each separate javascript file to see your compiled coffee output, set breakpoints, etc. It could also become inefficient to concatenate resources on each request, which tends to be important in a development environment where you're constantly changing assets and loading pages.
If you want to have everything concatenated while in development though, you set config.assets.debug = false in app/config/environments/development.rb.
Related
I am setting up my application to bundle css and js files when not in development, and not bundle when in development.
To do that I first have a bundleconfig.json file:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/bootstrap.min.css",
"wwwroot/lib/jqueryui.jquery-ui.min.css"
]
},
{
"outputFileName": "wwwroot/js/bundle.min.js",
"inputFiles": [
"wwwroot/lib/jquery/jquery.min.js",
"wwwroot/lib/jqueryui/jquery-ui.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
]
}
]
Then in my page I have a head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title</title>
<environment exclude="development">
<link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
<script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
</environment>
<environment include="development">
<link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />
<script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
</environment>
</head>
This all works fine. I'm just not a fan of the fact that I have to duplicate the list of files in the budingconfig.json and in the development environment tag in the header.
In WebForms project I can use <%: Scripts.Render("...") %> and it will generate links for each item in the bundle if in development mode, and it will generate 1 link for the bundle if not in development mode. Is something like this available in .net core MVC projects as well?
There is no build-in way to do this in ASP.NET Core. However it is pretty straight forward to roll your own.
Mad Christensen has build an unpacker for MVC5 and here is a gist that adapts it to .NET Core.
You use it like this:
<environment names="Development">
#Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>
However, if you have no specific reason to include each file other than debugging you can also rely an sourcemaps. There is a flag in the bundleconfig for this. ( "sourceMap": true )
You can try a TagHelper like the following
https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers
That will help you what you want to achieve. Instead of writing following type of code
<environment names="Development">
<link rel="stylesheet" href="~/css/site1.css" />
<link rel="stylesheet" href="~/css/site2.css" />
<link rel="stylesheet" href="~/css/site3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
You can only write this:
<bundle name="wwwroot/css/site.min.css" />
In production, it uses the minified file and appends the version in
the query string (same behavior as asp-append-version).
In development, it uses all input files and does not append version.
I'm using Ruby on Rails and I'm facing a problem.
When i run my application on the server, I get the following:
<link rel="stylesheet" media="all" href="/assets/..self-f28d8f57a7f19b756969e1ff016e5d807dd2b40d26e0e65c1a849f82fa5bd4b8.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/reset.self-6aa5650b7ba29c22295359e84be792256c2c0e09887497329e717eb441b2878c.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-dae5c5da7223ce739ad497817a3df9ba2fa2840da302653b11558b4f7d98bfc3.css?body=1" data-turbolinks-track="true" />
application.css is the default CSS that compiles all the SASS into one file, then you have reset.css that's added manually by me, and finally you have ..self.css.
This is the problem. This file is supposed to be index.scss. (I know it, because when I delete and create it by myself it loads correctly.)
rails generate controller
In the SCSS and JS files generated by the method when running the server the name is replaced by a dot.
Can someone help?
I see Telerik provides open source version of Kendo UI at following URL
http://www.telerik.com/download/kendo-ui-core
I downloaded it but not able to make it work in ASP.NET MVC application.
I am not sure what i am missing. I make a call to CSS and JS files as mentioned in below link:
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-4
Although I am missing one step Add reference to Kendo.Mvc.dll because Telerik don't provide installer in free version and I need JavaScript version of Kendo UI not with MVC selector.
Any idea here?
If you go to: http://dojo.telerik.com/
The default page contains everything you will need to get up and running and in what order:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
</body>
</html>
If it is still not working after you put this in your page then something else is going on.
Comment out the following line in _layout.cshtml page
##Scripts.Render("~/bundles/jquery")#
and add the below lines at the end of the head section :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
I am pushing my static files to a CND for my web application. To do so I've used OmniFaces CDNResourceHandler that works fine. Except, my styles do not follow.
I am mapped as so :
javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,
This works fine, except that my styles are all off. The rendered result is the same as when theme.css AND primefaces.css are not loaded.
If I remove these resources as being handled by the CDNResourceHandler, the page loads as desired. I can confirm that these files are being loaded by on the page (Inspect Element-> resources in web browser show that these are there and loaded).
Has anyone experienced PrimeFaces styles not working through CDN? Is there a way to get this to work?
My application runs on :
OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2 (also tried on Glassfish 4)
Edit 1
I have looked into this a bit further and it seems that the css files are not process : something with #{resources[]} within the CSS remains as such. This would be due to the file not meeting the Faces Servlet url-pattern. This leads me to believe to achieve what I am looking for I will need the CND resources to be processed...?
Edit 2
The weird thing is that the generated HTML has all the loaded resources. It just seems that the resources (Primefaces styles) are not processed if loaded via CDN.
This is the resources loaded when the page DOES NOT WORK. Everything is functional, except for the basic styles provided by Primefaces.
<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
By removing the Primefaces styles from the CDN, this following generated HTML works perfectly and generates the page as it should.
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
Just replace the jsf resource lookup by a classic css lookup.
When i externalized my themes this were just two mass-replacements in my ide.
Instead of:
background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");
Use:
background:url("images/colorpicker_select.gif");
Or download changed resource and mapping from here:
http://forum.primefaces.org/viewtopic.php?t=38421
I have a JSP that uses DOJO Datepicker. It runs fine on my laptop where I have Netbeans6.9/tomcat 6.x installed. However, when I upload it to my hosting service, the DOJO Datepicker doesn't show while the rest of the page shows up fine!
My web app is developed using Java Struts2.
I compared the source code between the two environments (local & remote). And I noticed that has no effect on the remote page. Where on the local page it translates to some DOJO configuration.
Remote page:
<head>
<title>Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="MainLayout.css" rel="stylesheet" type="text/css">
</head>
Local Page:
<head>
<title>Contract Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="MainLayout.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
isDebug: false,
bindEncoding: "UTF-8"
,baseRelativePath: "/sm/struts/dojo/"
,baseScriptUri: "/sm/struts/dojo/"
,parseWidgets : false
};
</script>
<script language="JavaScript" type="text/javascript"
src="/sm/struts/dojo/struts_dojo.js"></script>
<script language="JavaScript" type="text/javascript"
src="/sm/struts/ajax/dojoRequire.js"></script>
<link rel="stylesheet" href="/sm/struts/xhtml/styles.css" type="text/css"/>
<script language="JavaScript" src="/sm/struts/utils.js" type="text/javascript"> </script>
<script language="JavaScript" src="/sm/struts/xhtml/validation.js" type="text/javascript"></script>
<script language="JavaScript" src="/sm/struts/css_xhtml/validation.js" type="text/javascript"></script>
</head>
In addition, FireBug, gives me object dojo not defined message on loading the page remotely. These are clear signs that it's not behaving the same.
But the question is what do I do so it does?
Your help is much appreciated as I really getting disperate.
"dojo not defined" means dojo didn't load.
Go to the network tab in firebug and find the full path for dojo.js
http://mydomain.com/contextPath/static/dojo/dojo.js
Chances are this will be in red, meaning that firefox couldn't load the resource.
The problem is probably one of the following:
The dojo files are in a different path. The contextPaths might be different between your development and production environments and you have it hard coded for your development environment.
Your build script that builds the war file did not include the dojo javascript and it is missing entirely on the production environment.