Add an ASP.Net Core Web API project

Now we want to create the Web API project for FredsCars that will serve as the backend of the application and serve data to the Angular project.

Explore available Dotnet projects

Let’s use the Dotnet CLI again to see what kind of Dotnet projects are actually available to create.

Type the following command in a command window.

dotnet new list

A list of all the Dotnet project types is then shown. And we want to use the ASP.Net Core Web API Template.

The template name is kind of the full name of the project template. The short name is what we would use if we create the project from the command line. We can also create each project type from a GUI Wizard within Visual Studio. This process has become cumbersome and error prone over the years (one reason being because there are so many project types now) and using the Dotnet CLI has become the more efficient way to go. But it’s good to be able to walk through the wizards in the beginning to get a better idea of what’s going on.

So let’s do it! Let’s create the Web API project.

Create the Web API project

With the FredsCars solution open in Visual Studio where we left off in module 4, “Create the Visual Studio Solution“, right click the solution and select “Add –> New Project”.

The “Add a new project” dialogue will pop up. Type “ASP.Net Core Web API in the search box. Select “ASP.Net Core Web API” for C#. Be carful not to select the project type for F#. Click Next.

The “Configure your new project” dialogue will appear. Set the Project name to “FredsCarsAPI” and click Next.

The “Additional information” dialogue will appear. Under Framework select .Net 7.0. Leave the defaults for the rest of the options. Click Create.

And that’s it. You’ll see a message saying “Creating Project” and when the process is complete the Web API project will be under the solution in Solution Explorer.

Run the Web API project

In a command window change directories to the new FredsCarsAPI folder with the following command.

cd C:\Development\FredsCars\FullStack\Module04\FredsCarsAPI

Then type the following command.

dotnet run --launch-profile "https"

Once the project is done building, you’ll see that it is up and running in ASP.Net Core’s built in web server in development mode. It is actually listening on two different ports. One is using HTTP (Hypertext Transfer Protocol) and the other is using (Hypertext Transfer Protocol Secure) with encryption.

Open up an instance of the Chrome browser and navigate to the https url address shown in your command window with “/WeatherForecast” tacked on the end like this:

https://localhost:7042/WeatherForecast

Of course, you’ll need to change the random port in your URL:

https://localhost:[replace random port here]/WeatherForecast

You’ll see that a list of five WeatherForecast objects have been returned in an array in JSON format in the browser window. JSON data is kind of hard to read when returned directly in a browser window but it is easier to read if you view the results from inside the development tools.

In the above screenshot I hit the F12 key on the keyboard, went to the Network tab in the top toolbar of the development tools, and for the WeatherForecast request I clicked Preview. Here you can see the WeatherForcast JSON array formatted nicely.

What’s Next

So far we have created the Visual Studio solution file and added the Web API project to it. In the next module we will add a “Stand Alone Angular TypeScript” project to the solution.