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 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.
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
in visual studio 2015 css intellisense not working
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
First, you need to download the bootstrap.css or bootstrap.min.css file. Then you can reference it in your index.html file:
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--reference bootstrap.min.css file here -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>BootStrapDemo</title>
</head>
<body>
<div class="app" style="">
<button class="btn btn-danger">BootStrap Button</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
in visual studio 2015 css intellisense not working
I guess you didn't reference it correctly. If you referenced it correctly, you will get the intelligence like this:
We have used font awesome in our application. When the application is hosted onto IIS, we are unable to see proper font.
Otherwise running via Visual Studio gives proper fonts.
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
This is the section from master page file.
Adding the following lines to Web.Configs system.WebServer tag worked.
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
You can do that or alternatively register the MIME TYPES in IIS. If you are an admin, you can register it at a server level and all sites will work. A reboot of the site or IIS is required. In that case, remove the explicit registration from your web.config file.
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