- Part 1 (You are here) – Prepare Your Machine and Get to Know Visual Studio Code
- Part 2 – Configure a Basic ASP.NET Core Backend
- Part 3 – Configure Angular 2 Dependencies
- Part 4 – Create the Angular 2 Application
- Part 5 – Automate Common Development Tasks
- Part 6 – Integrate Angular and ASP.NET Core Routing
Why so many posts? The idea is to take you from nothing and not only build the application but to detail why it's built in this manner. There are numerous options when it comes to web development and for many readers this tutorial will walk you through two new frameworks and a new code editor so breaking up the content allows for sufficient explanation.
In this particular post, you install the tools used throughout the remaining posts. The post also provides a tour of the main Visual Studio Code features used to create the application.
Prepare Your Machine
These are the frameworks and tools to install before writing any code:
- Node.js and npm
- .NET Core (Includes ASP.NET Core)
- Visual Studio Code
- C# Visual Studio Code Extension (Installed from Visual Studio Code)
Mac and Linux Users: Thought was taken to omit Windows-specific features and tooling from this post series but ultimately the example was written on a Windows machine without verifying on MacOS or Linux. Please leave any feedback for MacOS or Linux development in the comments. Thank you.
.NET Core SDK Preview 3: This tutorial uses .NET Core SDK Preview 3 which is available on GitHub. This version includes 'alpha' support for MSBuild-based projects that use
.csprojconfiguration instead of
project.jsonconfiguration. Microsoft announced that MSBuild is the common project configuration for .NET Core based projects going forward. By using MSBuild, the goal is to better prepare you for future versions of the tooling.
Node.js and npm
As important as Node.js is its package manager, npm. This tool has also become the defacto standard for obtaining web development libraries and tooling. Node.js and npm are included in the same installer available in both a current and LTS (long-term support) version. The LTS version is recommended for most users. Make sure to have node version 4.x.x or higher and npm version 3.x.x or higher. You will check them later while touring Visual Studio Code.
To be clear, this is not the .NET Framework of old. The .NET Core framework is built from the ground up to be cross-platform and fast. This download includes the .NET Core and ASP.NET Core Frameworks as well as the terminal/command line tools used to create the backend in this tutorial.
While higher-order features such as Routing, Views, Controllers are similar to their ASP.NET 4.6 counterparts, setting up and configuring an ASP.NET Core application is noticeably different and you will even start it from the terminal/command line.
For this tutorial, use the .NET Core Preview 3 SDK. Later in this post, you will check which version is installed. It should be
1.0.0-preview3-x or higher.
Visual Studio Code
Visual Studio Code is one of the newer additions to the Visual Studio family. Forget anything you knew about traditional Visual Studio, this is a different animal entirely. During installation, you can add Visual Studio Code to your PATH variable. This enables the ability to type
code . in the terminal/command window and open the current directory in Visual Studio Code.
Get to Know Visual Studio Code
This application is built entirely in Visual Studio Code. While this is not an exhaustive tour, it points out the main features of the editor relevant to building the application and continues setting up the editor for your project.
Put simply, this is where your files are listed. You point Visual Studio Code to a directory and this pane lists all the files and folders in that directory, including those that are currently open in the editor. You can create new files or folders directly in the explorer pane and to edit a file, simply click on it and it opens in the editor.
The integreated terminal in Visual Studio Code is exactly that. Instead of switching between your editor and a seperate instance of your terminal/command window, you run commands directly in the editor. This walkthrough exclusively uses the integrated terminal, but of course using a separate terminal/command window works fine as well.
Go head and try it out:
- Press Ctrl + ` to open the Integrated Terminal
- Type node -v then Enter to get the Node.js version. It should be
- Type npm -v then Enter to get the npm version. It should be
- Type dotnet --version then Enter to get the .NET Core SDK verion. It should be
- Press Ctrl + ` to close the Integrated Terminal
If at any point these commands fail, it most likely means that either the framework is not installed or isn't added to your PATH. On windows at least, try restarting to refresh your PATH variable.
If you only remember one keyboard shortcut in Visual Studio Code, it should be Ctrl + Shift + P to open the command palette. The command palette contains almost every operation you want to complete in Visual Studio Code. Just start typing and it filters the list of operations for you. You're fingers never have to leave the keyboard.
You still need to install the C# extension (from Microsoft) in Visual Studio Code before you start coding. Try to install it using the command palette. If you get stuck, you can also find it here.
These are the key features in Visual Studio Code used during the walkthrough. There are so many other great features, so please read more about them in the Visual Studio Code documentation.
In this first post, you have installed the necessary frameworks and tools for your project. You have also started familiarizing yourslef with Visual Studio Code. In the next post, you leverage these frameworks, tools, and skills to build a simple ASP.NET Core backend from scratch.
Did you start exploring Visual Studio Code? Please leave a comment below regarding your tips, tricks, or favorite features in the editor.