Kinda related to my first question, my site runs fine locally but as soon as I deploy to IIS the javascript file/s are not being called properly.
In the <head> tag of my Master page:
<script src='/Assets/jquery-1.4.2.min.js' type="text/javascript"></script>
<script src='/Assets/hoverIntent.js' type="text/javascript"></script>
<script src='/Assets/superfish.js' type="text/javascript"></script>
<script src='/Assets/supersubs.js' type="text/javascript"></script>
This works on visual studio dev server but not on IIS. I tried adding ~ and saying runat="server" but it just gives some jquery error ("Unexpected character '\'" on Line 18 of the minified jquery) when trying to run it.
Use Page.ResovleUrl for all of your files:
<script src='<%# Page.ResolveUrl("~/Assets/jquery-1.4.2.min.js")%>' type="text/javascript"></script>
Related
I have a dotnet 5 MVC project I maintain. Throughout subpages I use the environment tag helper to include some JS files, un-minified in development, and minified in production. I put these in a #section which is the included in my _Layout.cshtml file.
In some instances, when I run the project or deploy the site to Azure App Service, some pages work as expected and only load one version of the files. In other pages it puts the whole <environment> block thus including both un and minified versions, causing all my JS to run twice.
In my cshtml files I put this:
#section Scripts
{
<environment names="Development">
<script src="/js/insights.js"></script>
</environment>
<environment names="Staging,Production">
<script src="/js/insights.min.js"></script>
</environment>
}
Which in this instance produces this in my view
<script src="/js/insights.js"></script>
But when I include
#section Scripts
{
<environment names="Development">
<script src="/js/users.js"></script>
<script src="/js/notifications.js"></script>
</environment>
<environment names="Staging,Production">
<script src="/js/users.min.js"></script>
<script src="/js/notifications.min.js"></script>
</environment>
...
some other inlined JS
}
I get this in my html
<environment names="Development">
<script src="/js/users.js"></script>
<script src="/js/notifications.js"></script>
</environment>
<environment names="Staging,Production">
<script src="/js/users.min.js"></script>
<script src="/js/notifications.min.js"></script>
</environment>
In _Layout.cshtml I have
#RenderSection("Scripts", required: false)
On the pages I have issues with, I've tried splitting the including scripts from the in line scripts which doesn't help. I've tried names and includes both of which are supported fields. Makes no difference. They aren't in different .net Areas, there are no special #includes on the page, I have #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers in my ViewImports file. But I do not understand why this has issues on a few pages.
I have created a simple web site in asp.net and I have used the two js file on my page Code of
customerpage.aspx page
<head runat="server">
<title>Sample Site</title>
<!-- jQuery -->
<script type="text/javascript" src="http://localhost:63645/Customer/GetResources?resourceName=CUST.Data.Scripts.3rdParty.jquery.min.js"></script>
<script src="http://localhost:63645/index.js"></script>
<link rel="stylesheet" href="http://localhost:63645/index.css">
</head>
I have used the ajax call.
When I ran the project it gives me error the server responded with a status of 401 (Unauthorized).
To use External java-script it might need username and password, so I have download these files to my local folder where project exists and tried to run the project and still getting same error.
Code after downloaded the files to local.
<script src="js/CUST.Data.Scripts.3rdParty.jquery.min.js"></script>
<script src="js/index.js"></script>
<link href="css/index.css" rel="stylesheet" />
I don't know what is wrong. Any help will be much appreciated.
After spending time I have found the solution by changing
Change:
settings.AutoRedirectMode = RedirectMode.Permanent;
To:
settings.AutoRedirectMode = RedirectMode.Off;
I am trying to run my application using the lite-server node package but it won't load scripts from the parent directory.
I want my index.html in the /src folder because it could be possible in the future to generate a different file to /dist. /node_modules and systemjs.config.js need to stay in the root directory as they won't change.
File structure:
The src/index.html:
<html>
<head>
<base href="/">
<title>task manager</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="../systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Running lite-server inside the /src dir:
The node modules do exist. If I move the required files to the child directory itself, /src, the server runs fine with no 404s. Is this a problem with my lite-server or systemjs settings?
You need to properly configure the lite-server.
In the project root, create a file called bs-config.json with the following content:
{
"port": 8000,
"server": {
"baseDir": "./src",
"routes": { "/": "./" }
}
}
Now you have to run the lite-server in the same directory where is the bs-config.json file.
If you want to know more about lite-server config, read the Browsersync Options documentation.
Also, with this configuration, you can change the path of your script in the index.html file:
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
I'm dipping my toes into ASP.NET 5 (vNext). To do that, I downloaded Visual Studio 2015 RC. I created a new ASP.NET Web Application. Then, in the next dialog I chose "Empty". From there I added a basic controller and a basic view.
I want to add bower and reference Zurb Foundation. However, I'm not sure how to do that. I've added a bower.json and .bowerrc file. Traditionally, I would install my bower packages in a directory called "libraries". I configured it like so:
.bowerrc
{
"directory" : "/public/libraries"
}
Then, in my views, I'd have code that looked like this:
<link rel="stylesheet" src="~/public/libraries/foundation/foundation.min.css" />
I can see that when I run bower, I am in fact downloading the libraries and they are being placed in /public/libraries. However, when I deploy it, there seems to be an issue. It looks like the deployment is getting ran from wwwroot. However, I'm not sure what to do about
Client-side packages loaded via bower
My resources (i.e. images, css, javascript, fonts, etc.) that I need my app to use.
What do I need to do to access static files a) during development which seems to use the typical file structure and b) during deployment where the stuff seems to run from wwwroot?
During development and production, you need to put stuff under the webroot if you have it defined. You can do this by gulp or grunt task. See here for an example.
Assuming you have the following structure:
└───wwwroot
├───js
│ └───foo.js
│ └───bar.js
You will be able to reach out to them by:
<link rel="stylesheet" src="~/js/bar.js" />
<link rel="stylesheet" src="~/js/foo.js" />
You should not be making reference in your views to the location of the bower dependencies, instead you should be referencing the relative path within wwwroot.
To see how it all fits I recommend creating a new project using the ASP.NET 5 Web Page template in VS 2015 RC.
In package.json your tool dependencies (resolved by npm) are listed. Notice for the default project gulp is included here. Gulp is the default task runner but you can use any task runner you like. The bower dependencies by convention are defined in bower.config.
By convention the location for bower dependencies is bower_components off the
project root.
If you look in gulpfile.js you will see that it copies the dependencies from bower_compontents to /lib off the project webroot (/wwwroot by default).
In the view _Layout.cshtml you will see the references to the libraries is ~/lib not /bower_components.
#inject IOptions<AppSettings> AppSettings
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - #AppSettings.Options.SiteTitle</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
So in summary:
Define client side dependencies in bower.config (or using some
other package mananger)
Use gulp scripts to manage tasks (copying, minifying, etc).
Only make references in views to locations within webroot (using ~ relative paths).
When you build/publish all dependencies should be resolved prior to deploying
to server.
I migrated a Rails 2.2.2 application to Rails 3.1.
In development mode: /var/www/project_dir# thin start --ssl
all the assets are found and served beautifully.
When I run in production mode: /var/www/project_dir# thin start --ssl -e production
all of the asset requests (JS,CSS and images) return a 404.
The paths in development and production mode are
identical.
I have come to the point where I have exhausted all of my debugging ideas and have no ideas why when in production mode, none of the assets can be found.
I did try migrating over to asset pipeline but that caused more problems that I don't think I can solve right now so I need to solve this with asset pipeline off.
Any and all ideas are welcome and THANKS!
Details
Web Server: Thin 1.5.0
Asset Pipleine: Off
Asset Directories:
/var/www/project_dir/public/images
/var/www/project_dir/public/javascripts
/var/www/project_dir/public/stylesheets
Generated Asset Paths (Development Mode)
<script src="/javascripts/jquery.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery.alerts.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/application.js?1366806357" type="text/javascript"></script>
<link href="/stylesheets/jquery-ui.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.alerts.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/default.css?1361279499" media="screen" rel="stylesheet" type="text/css" />
Generated Asset Paths (Production Mode)
<script src="/javascripts/jquery.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery.alerts.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/application.js?1366806357" type="text/javascript"></script>
<link href="/stylesheets/jquery-ui.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.alerts.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/default.css?1361279499" media="screen" rel="stylesheet" type="text/css" />
Apache would do this automagically for you but with Thin, you need to do the following:
In /config/environments/production.rb
Set this directive to true:
config.serve_static_assets = true
That will enable production mode to read assets from the /public folder