Friday, October 13, 2017

Angular: Analyze your webpack bundles

To optimize your application it can be useful to investigate all the things that are loaded and used inside your webpack bundles. A great tool to visualize this information is the webpack dependency analyzer: https://www.npmjs.com/package/webpack-bundle-analyzer

From the documentation:

The Webpack dependency analyzer is a Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

webpack bundle analyzer zoomable treemap

This module will help you:

  1. Realize what's really inside your bundle
  2. Find out what modules make up the most of it's size
  3. Find modules that got there by mistake
  4. Optimize it!

How to use it inside your Angular app?

  • Install the bundle through npm:
    • npm install webpack-bundle-analyzer
  • Update your package.json with an extra command:
    • "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
  • Invoke the command through npm
    • npm run analyze
  • A browser window is loaded at http://127.0.0.1:8888/

Thursday, October 12, 2017

IIS Server configs

If you are hosting your ASP.NET applications inside IIS I have a great tip for you: https://github.com/h5bp/server-configs-iis

This GitHub project contains a list of boilerplate web.config files applying some best practices(like security hardening) and taking maximal advantage of the powerfull functionality that IIS has to offer.

It shows and explains how to:

  • Apply security through obscurity by not exposing specific information through the headers
  • Apply GZIP compression on static content
  • Disable tracing
  • Secure your cookies
  • Cache static content
  • Support cache busting

Wednesday, October 11, 2017

ASP.NET Core–Environment variables

ASP.NET Core references a particular environment variable, ASPNETCORE_ENVIRONMENT to describe the environment the application is currently running in. This variable can be set to any value you like, but 3 values are used by convention: Development, Staging, and Production.

Based on this information the ASP.NET Core configuration system can load specific configuration settings (through .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true) )
or execute a specific Startup class or Startup method through the Startup conventions(e.g. a Startup{EnvironmentName} class or a Configure{EnvironmentName}() method inside the Startup class).

At one customer we are hosting our ASP.NET Core applications inside IIS. The IIS environment is used both for development and testing. So we want to host the same application twice with a different environment setting. By default the environment setting is loaded from a system level environment variable which of course can be set to only one value.

How can we solve this?

To support this scenario the ASP.NET Core Module inside your web.config allows you specify environment variables for the process specified in the processPath attribute by specifying them in one or more environmentVariable child elements of an environmentVariables collection element under the aspNetCore element. Environment variables set in this section take precedence over system environment variables for the process.

An example:

Tuesday, October 10, 2017

ASP.NET Core 2.0–Authentication Middleware changes

ASP.NET Core 2.0 introduces a new model for authentication which requires some changes when upgrading your existing ASP.NET Core 1.x applications to 2.0.

In ASP.NET Core 1.x, every auth scheme had its own middleware, and startup looked something like this:

In ASP.NET Core 2.0, there is now only a single Authentication middleware, and each authentication scheme is registered during ConfigureServices() instead of during Configure():

More information: https://docs.microsoft.com/en-us/aspnet/core/migration/1x-to-2x/identity-2x

Monday, October 9, 2017

Angular 4.3: HTTP Interceptors are back

With the introduction of a new HttpClient in Angular 4.3, an old feature of Angular.js was re-introduced; HttpInterceptors. Interceptors are sitting between the application and the backend and allow you to transform a request coming from the application before it is actually submitted to the backend. And of course you when a response arrivers from the backend an interceptor can transform it before delivering it to your application logic.

This allows us to simplify the interaction with the backend in our Angular app and hide most of the shared logic inside an interceptor.

Let’s create a simple example that injects an OAuth token in our requests:

To be able to use the interceptor, you’ll have to register it:

Friday, September 29, 2017

Enabling Application Insights on an existing project

Yesterday I lost some time searching how to Enable Application Insights on an existing project in Visual Studio.

I thought it was available on the context menu when you right click on your Visual Studio project, but no option found there:

image

Turns out you need to go one level deeper Confused smile;

  • Right click on your project
  • Click on Add and select Application Insights Telemetry…

image

Now you can go through the configuration wizard by clicking on Start Free:

image

Thursday, September 28, 2017

Visual Studio 2017 Offline install - “Unable to download installation files”

After creating an offline installer for Visual Studio 2017 using vs_enterprise.exe --layout c:\vs2017offline we were ready to install Visual Studio on our build servers(which don’t have Internet access).

However when we tried to run the installer, it failed after running for a few minutes with the following error message:

Unable to download installation files

Unable to download install files

This error message was not that useful as we found out that the problem was not related to missing installation files but due to the fact that we forgot to install the required certificates first.

To install the certificates first, you have to

  1. Browse to the "certificates" folder inside the layout folder you created(e.g. c:\vs2017offline\certificates)

  2. Right-click each one and choose Install PFX.

  3. Specify Local machine as target certificate store
  4. Leave the password field empty

More information: https://docs.microsoft.com/en-us/visualstudio/install/install-certificates-for-visual-studio-offline