Create First Web Application in ASP.NET Core
Hello friends, I hope you all are having fun. In today's tutorial, we will create our First Web Application in ASP.NET Core. It's our 2nd tutorial in ASP.NET Core series and in our previous tutorial, we have had a detailed
Introduction to ASP.NET Core.
We have also installed Microsoft Visual Studio Community Edition 2019 in our previous tutorial and today we will create our first web application in it. After creating this web application, we will also have a look at its files and will understand the contents. So, let's create our First Web Application in ASP.NET Core:
Creating Web Application in ASP.NET Core
- First of all, start your Visual Studio which we have installed in previous tutorial.
- A pop up window will open up, where you can open your recent project or can create a new project, as shown in below figure:
- Here, click on the button says "Create a new project" and a new window will open up.
- This new window will ask for the type of application, you want to create i.e. Console App, Web App, Blazer App etc.
- As we want to create an ASP.NET Core Web Application so, I am going to select 3rd option in the list, as shown in below figure:
- After selecting ASP.NET Core Web Application, now click on the Next Button.
- On the next window, we have to provide the name & location for the project, as shown in below figure:
- Now click on the Create Button and in the next window, we need to select the template for your web application.
- Rite now, we are going to select the Empty Project, as I want to start from the scratch but in our incoming tutorials, we will cover almost all these templates.
- You will also need to uncheck the check box says "Configure for HTTPS", as shown in below figure:
- So, select the Empty Template for your ASP.NET Core web application and click the Create Button.
- As you can see at the top of above figure that we are using ASP.NET Core 3.1 that's the latest stable .NET framework SDK.
- When you click on the Create Button, Visual Studio will create your web application, as shown in below figure:
- As we have selected the Empty template, that's why we don't have much files in the solution explorer and this web app won't do anything except printing " Hello World " on execution.
- In order to execute our first web application, we need to click on the IIS Express play button, at the top menu bar.
- Our default browser will open up and Hello World will be printed in it, as shown in below figure:
- The link of this page is localhost:51640, as its on localhost rite now and the its port is 51640.
- We will discuss the flow of How this web app works and what's IIS Express in our coming lectures.
So, rite now we have a simple working web application in ASP.NET MVC which simply prints Hello World. Now let's understand the files automatically created by Visual Studio in Empty Template:
ASP.NET Core Project File
- If we have a look at the Solution Explorer, the we can see that visual studio has created few files for us, as shown in below figure:
- In order to open the project file, we have to right click on the Project's name and then click on Edit Project File.
- A new code file will open up with an extension .csproj, cs stands for C# & proj for project. This file is called the ASP.NET Core Project File.
- In previous versions of ASP.NET, we have to unload our project in order to open this project file but in Core, we can simply click on this Edit option to open Project File.
- If programming language is visual basic, then extension of project file will be .vbproj, vb for visual basic & proj for project.
- The only element we have in our web application's project file is Target Framework and the value we have set is netcoreapp3.1.
- This element, as the name implies, decides the target framework for our app and if you remember, while creating this project, we have selected .NET Core Framework 3.1.
- This value inside Target Framework tag is called Target Framework Moniker (TFM ), so the TFM of .NET Core 3.1 is netcoreapp3.1.
ASP.NET Core Program File
- Next file we are gonna open is Program.cs, its a C# class file, thus has an extension of .cs.
- Now let's have a look at its code:
- As you can see in above code that we have a class named Program and inside this class we have our Main Method.
- This Main Method is the entry point of our compiler i.e. when our web App executed then this Main method is called.
- If you have worked on any previous versions of .NET framework, then you must have seen this Main method there as well, in fact this web App executes as a console application.
- Within this Main Method, we have called CreateHostBuilder Method, its implemented below Main Method and returns an object that implements IHostBuilder.
- We are passing command line arguments to this CreateHostBuilder Method and then building our web host, which is going to host our web application and finally we are running our web app.
- If we have a look at the CreateHostBuilder Method, then you can see that we are using webBuilder Method and then calling the extension Method Startup.
- This WebBuilder Method is responsible for creating the web host on which our web app is going to host.
- This Startup extension method is available in our next file named Startup.cs, so let's discuss it's code:
ASP.NET Core Startup File
- Below Program File, we have Startup.cs file in our Solution Explorer.
- So, let's open this file and here's its code:
- This Startup Class is called by the CreateHostBuilder Method in Program File.
- Inside this Startup class we have two methods, ConfigureServices & Configure.
- ConfigureServices Method is used for the configuration of services, required for our web application.
- Configure Method is used to configure the request processing pipeline for our web application.
- This method has Hello World in it, which is actually printing on the page, we will discuss this method in coming tutorials in detail.
ASP.NET Core launchSettings,json File
- launchSettings.json file is placed inside Properties, so open this file.
- This file is only required for development purposes on the local machine, when we are publishing our web App then we don't need this file.
- This file actually contain the settings for the hosting environment, as shown in below figure:
- You can see in above code that first we have iiSettings and then profiles.
- In profiles, we have two profiles named IIS Express & TheEngineeringProjects, which is also the name of our project.
- When we run our project from visual studio, then this IIS Express profile is called and if you remember, the port number was same as in iisSettings i.e. 51640.
- But if you run this app from Console, then TheEngineeringProjects profile will be called and in that case port number will be 5000.
ASP.NET Core appSettings.json File
- That's the settings file for ASP.NET Core web application.
- We use this file to store some hard coded values or settings etc., we will discuss it in detail later.
So, that was all for today. I hope you have completely understood the basic structure of our ASP.NET Core web application. In the next tutorial, we will have a look at Middleware in ASP.NET Core. Till then take care & have fun !!!