Pages

Wednesday, March 22, 2017

ASP.NET Core and Angular 2 the Easy way

Prerequisites:
The tools we need installed on our machine before starting this tutorial are:

Node: https://nodejs.org/en/  (c'mon you already have this right ?)

ASP.net Core SDK (https://www.microsoft.com/net/download/core)
   OR 
Visual Studio 2017 (https://www.visualstudio.com/es/vs/whatsnew/) that will install also the ASP.NET Core tools. You can get the community version for free.

We can do all of this tutorial from the command prompt, but I rather show it to you using 'Visual Studio Code' so you will need Visual Studio Code if you want to do it this way.

Open Visual Studio Code:

Open an application folder:

To create a new folder we click on 'New Folder' put a name and select it.


Now we have a blank folder to work on:

To open the integrated command line click 'ctrl + `'

A command line is available now inside Visual Studio Code:



On the command line we install the asp.net templates, those will be available for any other application we build not just this one. To do this we type:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::* 



Once installed we can see the list of templates available. To do this we type:
dotnet new -l



We see we have the angular template available so we use it to build our application. To do this we type:
dot net new angular    



This creates the files and structure of the project on our folder a working asp.net core with angular 2. 




We see we have a file CoreDemo.csproj that has the dependencies for our Server side app, to download them to our app we type:
dotnet restore



Now we have to load our client side dependencies listed on the package.json file to do that we use node, we type:
npm install


Once we have all our dependencies we can run our app, the template includes the library webpack that is in charge of getting our client side angular components available on our wwwroot folder. 

So to run our app we just type:
dotnet run


We open our browser on 'http://localhost:5000' and we can see our template with some sample functionality (A counter, and fetching data from aspnet.core api).





Now its up to us to modify this template.

And that, my friend, It's all!


No comments:

Post a Comment