In this tutorial, I will discuss how to create a simple ASP.NET Core 2.0 application using Angular 2 along with Yeoman generators with Visual Studio Code. This is very easy to create a simple ASP.NET Core 2.0 single page web application using Visual Studio Code along with Yeoman generators.
What you will learn in this tutorial?
- Setting up development Environment
- Install Yeoman generators.
- Create ASP.NET Core 2.0 empty web application using yeoman generator.
- will run this application.
Note: – In this tutorial, I will create ASP.NET Core 2.0 application without using Visual Studio IDE.
Step # 1 – Setting up development Environment
Install Visual Studio Code: Visual Studio Code is very lightweight and fast editor. It’s very powerful cross platform code editor. So, you can use it for Windows, Mac or Linux. It is not a full IDE like visual studio. It’s much better than Visual Studio Code. You can click here and download visual studio Code (VS Code).
Install .NET Core 2.0 SDK: If you have .NET Core 2.0, then its good. But if you don’t have, then just simple click here, and download it as your need, and then just install it.
Install Node.js: Now install Node.js. Just click here to download required Node.js and then install it. It will also install npm(Node Package Manager) for you. NPM is used to install Yeoman, Angular, and other packages.
Step # 2 – Install Yeoman Generator.
First of all, we need to understand, what is yeoman?
Basically, yeoman is a scaffolding tool for modern web application. So, if you create a new project in visual studio IDE, you automatically get a bunch of folders and files that come from a template. Visual Studio Code doesn’t have this feature. So, we need to user Yeoman to generate a template for our new project in visual Studio Code.
Let’s see how to install yeoman tool.
Go to Visual Studio Code => click View (From Menu Bar) => choose Command Palette… (ctrl + shift + p) => it will open a search box.
Now Just write in this box “Open New Command Prompt” and then press enter.
It will open a new command prompt.
Note: – You must be connected with internet.
Now write this (npm install -g yo generator-aspnetcore-spa) command and then press enter.
-g: this means, it will be installed globally.
Yo: It’s just an engine, we can install template on top of this engine.
Generator-aspnetcore-spa: this is a template name for asp.net core and angular 2 applications.
Now you see yeoman generator is installed.
Step # 3 – Create ASP.NET Core 2.0 empty web application using yeoman generator.
So, open a new command prompt. Write this “mkdir myFirstApp” command to make a folder and press enter.
Then write this “cd myFirstApp” command to go inside myFirstApp folder and then press enter.
Then write this “yo aspnetcore-spa” command and press enter, then it will show you some instructions like this.
So, simply write this “dotnet new angular” command and press enter, then it will show you important message like this below.
So, run this “npm install” command and press enter. It will complete the process after some time.
Step # 4 – Run Application
Now in this step, we will run our application. Now run this “dotnet run” command, and you will see some information about application like this below.
Now enter this URL(yellow colored) in your browser and then it will show a simple template.
If you want to open your project folder in visual studio code, then click file from menu bar => choose open folder => select your appropriate folder => then press select folder. Then you will see that folder in the side bar of visual studio code.
I hope this tutorial will be very helpful. If you like it, then please share and like 🙂