Using the new proxy based ASP.net core spa templates with the Aurelia CLI

The ASP.NET core SPA Services have switched in 2.1 to create react app and angular CLI for compiling and building. Aurelia has an awsome CLI too and we can integrate it into the new template.

First we need to get the new templates. They will be included in ASP.NET Core 2.1 by default.

Install the templates by running:

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0

You can see a list of all avialable templates. Now it is time to create the app.

Run dotnet new angular in an empty directory of your choice. You can see that dotnet created a bunch of files for you. Now we want to delete the default angular CLI based client app and replace it with aurelia.

Delete the ClientApp folder. I am using powershell but any method works.

After deleteting it is time to create a new aurelia app with the CLI. The following selection will be made.

• ClientApp
• 3 (Custom)
• 3 (Webpack)
• 1 (Web)
• Your Choice (Typescipt or Babel)
• Your Choice (Minification)
• Your Choice (Minification)
• Your Choice (CSS Preporzessor)
• Your Choice (Unit Testing)
• Your Choice (Integration Testing)
• Your Choice (Editor)

au new

Confirm your selection and when asked install project dependencies.

In the file Startup.cs we need to tell ASP.NET to speak to aurelia and not to angular.

In Line 61 replace spa.UseAngularCliServer(npmScript: "start"); with spa.UseProxyToSpaDevelopmentServer(baseUri: "http://localhost:8080");

Now run your aurelia dev server with au run --watch --hmr and your dotnet application with dotnet run

Now you can navigate to http://localhost:5000 and see the aurelia app running. Try changing some markup and see live reload in action.

Resources

• Code on github
• Aurelia
• ASP.NET JavaScriptServices