[ASP.Net Core] Angular 2 with Server side rendering


 

Let’s get started

 

  • We’re going to be using yeoman to generate our .Net core project that’s going to be serving our Angular 2 application.
    And no, I’m not going to be using angular-cli mostly because it doesn’t generate a .net core project as of yet (mid 2017). But it does seem really cool and it doesn’t actually matter what you generate the project with.

Anyway, run these commands to install yeomen and install the .Net Core generator respectively.

npm install -g yo
npm install -g generator-aspnetcore-spa

-g stands for global, it’s used in packages that is not project specific.

 

 

  • Then create the project inside the folder by running “yo” (short for yeomen I guess) It will ask you what type of project it should create you can navigate with arrow keys to select Aspnetcore Spa

    Then for the framework choose Angular then press enter a couple times, and wait for it to finish. After a lot of green lines you should have a working project. Open your project up in Visual Studio or any other text editor you prefer and the project should look more or less like this. I say more or less because they keep changing the generator so you might end up with slightly different files. But it should all be fine.

 

you can run npm install while in the folder from command line to install the dependencies in the package.json file.

and run npm install -g webpack if it complains that it doesn’t know what webpack is.

 


 

If you’re using Visual Studio and Resharper you’ll notice that you have a couple of errors in the project. (if you have more make sure yo ran “npm install”).

To fix these two errors first go to global.json and add "projects": [], on top of “sdk”

{
"sdk": { "version": "1.0.4" }
}

change this to

{
projects": [],
"sdk": { "version": "1.0.4" }
}

And the other error is the name of the “package”. Open up package.json and type the name of the project. It can be whatever you want the only condition is that it has to be lower case

{
"name": "firstprojectexamplename",
}

That’s it, when you run it’ll launch a console saying the application is listened to on http://localhost:5000/home
Or it’ll launch the browser for you. Either way you have a working Angular app that is served by Asp .Net Core.

 


 

How does this thing work anyway

There are 3 parts.

  1. ASP .Net Core is the server that serves the Angular client.
  2. Webpack makes sure your client has all the packages it needs from node_modules folder. (it’s not included in the project but it’s in that folder)
  3. Then there’s the Angular client part. This is what the users care about.

So what is the Server side rendering? 

It basically generates a very small HTML file from all your dynamic code to serve the users to give them the illusion of fast loading times. This can be the difference of getting your users to come back to your website and.. not, I guess. But it does come with hurdles. You can’t use any client side features like localStorage if you’re using this feature.

The code that enables server side rendering is at Views/Home/Index.cshtml if you remove the asp-prerender-module="ClientApp/dist/main-server" from the element it will not do server side rendering. There are plans to remove the tag helper and replace it with something else in the future though, so keep an eye out for that.

 

Without server side rendering

 

 

With server side rendering

Leave a comment

Your email address will not be published. Required fields are marked *