Thursday, 18 February, 2016 UTC
Summary
Creating ASP.NET Core 1.0 web applications is very easy using Visual Studio Code along with Yeoman generators. Here in this tutorial will learn about creating web application and running it.
These steps are not confined to Windows environment alone, we can use them on Mac or Linux
This example is for creating basic ASP.NET Core 1.0 empty application without need of Visual Studio IDE.
What we will learn here?
- Ensure NPM, Yeoman, Visual Studio Code is installed
- Install ASPNET yeoman generator.
- Create ASP.NET Core 1.0 empty web application using Yeoman generator
- Add Static Files and Default Files packages and DNU restore
- Creating index.html file and run application using lite-server
NPM(Node Package Manager) is used to install Yeoman, Angular and other packages. NPM can be installed using Installing Node.js and updating npm
yo is the Yeoman command line utility allowing the creation of projects utilizing scaffolding templates (referred to as generators). Yo and the generators used are installed using npm.
Going through GETTING STARTED WITH YEOMAN will help us get Yeoman installed and its usage.
Visual Studio Code (VS Code) is code editor redefining how simpler life can get, esp I liked idea of working with ASP.NET Core 1.0 apps without full fledged Visual Studio IDE.
Quick snapshot of NPM, Yeoman installed. Installing them globally will avoid doing these steps again.
Verify NPM and Yeoman are installed
Now that Yeoman generator is installed, we need to install ASPNET generator for creating ASP.NET Core 1.0 applications.
Recommend reading ASPNET generator for more understanding
Open command prompt and run following command, ensure that you are connected to Internet.
npm install -g generator-aspnet
ASPNET Yeoman Generator installed
There are two ways to create ASP.NET Core 1.0 applications using Yeoman generators itself – Command line option and Visual Studio Code yo extension option.
Lets create using command line option and check out steps involved
Create ASP.Core 1.0 applications using Yeoman in Command line
- Creating directory which contains all generated code.
- Running yo aspnet command to invoke Yeoman generator for ASPNET
- ASPNET generators asks us to select various kinds of project to be created like empty, console, web, classlib etc. I choose “Empty Application”.
- Naming empty web application as “DemoApp”
- Lists all files created using ASPNET generator
- After creation of application, its usually better to do DNU restore but we will hold that for moment.
Now lets create using Visual Studio yo extension, (install yo extension first). Checkout GIF below for steps, I will be creating full ASP.Core 1.0 web application instead of an empty application.
Creating ASP.NET Core 1.0 using VS Code
ASP.NET Core 1.0 works on adding packages as needed, add static files package in “project.json” and open Startup.cs class “Configure” method to add following code
public void Configure(IApplicationBuilder app)
{
app.UseIISPlatformHandler();
app.UseDefaultFiles();
app.UseStaticFiles();
}After adding “StaticFiles” middleware in dependencies of project.json, then click “Restore” to perform DNU restore.
Add StaticFiles middleware and click Restore
ASP.NET Core 1.0 has wwwroot folder which directory for all static files like HTML page, CSS, JS files, etc.
Lets create “index.html” in wwwroot of our application like this
Creating HTML page using Yo ASPNET
Visual Studio Code is just code editor, to run web application we need to use web server. We will install lite-server, just follow link to install lite-server
Now open wwwroot folder in console and run “lite-server”, it opens up browser and displays “index.html“.
These steps can be replicated in Mac OS or Linux environments as Visual Studio Code and ASP.NET Core 1.0 are cross platform open source projects.
The post ASP.NET Core 1.0 – Create web application using Yeoman and Visual Studio Code appeared first on Mithunvp.com.