Skip to content

Set VS Code Angular 2 and .NET Core web Development on Ubuntu





Following on from my previous post regarding how to Set Up Visual Studio for Angular 2 and .NET Core web app Development, I needed to be able to generate the same projects on ubuntu.

Although the set up is slightly similar I discovered there were just a few quirks that I needed to document before I forget.

Install VS Code on Ubuntu

Installing VS Code on ubuntu is super easy and watching the great video by Kendra Havens makes it somewhat fun!
Get started with VS Code using C# and .NET Core on Ubuntu or if you're sitting in an office and your boss doesn't like you having fun at work you can follow the textual instructions here
Install for Ubuntu 14.04, 16.04, 16.10 & Linux Mint 17

Install NVM and Node

After ensuring VS code and .net core have been set up correctly. We now need to start preparing our machine with all the other desired components, becuase we are going to make use of angular, we'll need to ensure Node.JS is installed , so we do this by installing Node Version Manager.

Install Node.js via Node Version Manager on Ubuntu

Install node 6.9.2 using nvm

nvm install 6.9.2

set to to use

nvm use 6.9.2

 

Install TypeScript

 npm install -g typescript




Install Yeoman

If you haven't already got the Yeoman generators on your machine you will need to install it globally

npm install -g yo

Install Generators

npm install -g yo generator-aspnetcore-spa

It is worthwhile reading Steve Sandersons blog post for further background  knowledge regarding the generators.

 

Generate your application

You should now be able to generate your application . You can either generate your application from the terminal or you can open Visual Studio code and open the Integrated Terminal Window (View -> Integrated Terminal)

yo aspnetcore-spa

You'll be presented with a few options, but go ahead and select Angular2

The wizard will ask you a few more questions, answer as you wish. Once the generator is complete Simply execute

dotnet restore

and then start the project by

dotnet run

You can now browse too http://localhost:5000 and you should see the generated applicaiton which is now ready for you to continue developing!





To ensure your environment is ready for development ensure you set the environment variable. You will only need to set this once, it will then be set everytime you run the application.

export ASPNETCORE_ENVIRONMENT=Development
dotnet run
Gary Woodfine
Latest posts by Gary Woodfine (see all)
Tags: