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>
Related
I have a react application , which I created with Create React App. The app is working fine in development, but in production , the CSS styles are not getting applied. I noticed that, the generated index.html file has the link tag for the bundled stylesheet (main.e72c9739.css), but browser is not downloading the CSS ( there is no network invocation in the dev tools ). The file does get downloaded, when I try manually by entering the address of the URL.
Here is the index.html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="/proxy/myusername/services/someserviceid/proxy/8098/"/>
<link rel="icon" href="favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="logo192.png"/>
<link rel="manifest" href="manifest.json"/>
<title>React App</title>
<script defer="defer" src="/proxy/myusername/services/someserviceid/proxy/8098/static/js/main.01dd9c66.js"></script>
<link src="/proxy/myusername/services/someserviceid/proxy/8098/static/css/main.e72c9739.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<h1>Hello</h1>
</body>
</html>
One difference I noticed was, in case of development, the css is not explicitly referred via link tag, all the CSS definitions are available in the bundle.js file (along with some code of CSS_LOADER_EXPORT module).
P.S. The application is deployed in a subpath, and I am using nginx for forwarding the request to react app running on a different port. I also do response modification for appending the base path of the URL.
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 developing Angular application with DotNet Core. In the development environment Application works fine, but upon publishing to IIS server receiving the following Error(Internal error while loading script file in index.html)
IMG->
Website Error image
IIS folder structure is a follows.
inetpub folder image
inetpub folder image
Index.html code is a follwos
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebPayzUI</title>
<base href="/WebPayz/ClientApp/dist">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.0243bd00007c5e1092e8.css"></head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.83183756596ff1996025.js"></script><script type="text/javascript" src="scripts.385b291e179030219400.js"></script><script type="text/javascript" src="main.e9e2c4382e2ff45e82db.js"></script></body>
</html>
base href="/WebPayz/"
update base href to the above in your index.html file
I am working on an Angular SPA which is built by using VS 2107 templates. The template solution uses Webpack by default. When running this app, I am getting the following response from the server:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MySite</title>
<base href="/" />
<link rel="stylesheet" href="/dist/vendor.css?v=GTBoa19X9IFhaihx7ZAnVru_FAmBl9DrU8hiEInbZsk" />
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
}({
instrumentationKey: 'ba5fc891-eb8c-4a6d-9126-d79556ae0863'
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<app></app>
<script src="/dist/vendor.js?v=ktEYx3Pf8jICUgoPuQqu7uGMM9Su7Hv398WJvv9P2o4"></script>
<script src="/dist/main-client.js?v=sEZxwQM4sP47PpPCDWohUTvZ02wu6JusYOT7VGzPDdo"></script>
</body>
</html>
The body's content does make sense since index.cshtml is:
#{
ViewData["Title"] = "Home Page";
}
<app></app>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
However, the head does not make sense at all. How it is populated with vendor.css and the appInsights script? Is Webpack responsible for including vendor.css? I guess no, because it is responsible for building vendor.css but what about including it in HTML we get?
vendor.css set by _Layout.cshtml. vendor.css is generated by webpack. It's run by msbuild. To look at, find .csproject you will find like this:
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
Angular-Donet is use SSR (server side rendering) by universal. See here.
AppInsight set by visual studio for development purpose, see here.
If you are using vscode will not set up.
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.