Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Creating an ASP.NET Core Web API Project

Explore the process of creating an ASP.NET Core Web API project with Visual Studio. This lesson guides you through setting up the backend separately to support a React frontend with TypeScript, focusing on project creation and basic configuration for development.

We'll cover the following...

We are going to create the ASP.NET Core and React projects separately in this part. Earlier, we saw that old versions of React and create-react-app were used. Creating the React project separately allows us to use a more recent version of React and create-react-app. Creating the React project separately also allows us to use TypeScript with React, which will help us be more productive as the code base grows.

Steps to create an ASP.NET Core web API project

In this lesson, we will create our ASP.NET Core backend in Visual Studio. Let’s open Visual Studio and carry out the following steps:

  1. In the startup dialog, select “Create a new project.”

  2. Choose “ASP.NET Core Web Application” in the wizard that opens and click the “Next” button.

  3. Create a folder called “backend” in an appropriate location.

  4. Name the project “QandA” and choose the “backend” folder location to save the project. Tick “Place solution and project in the same directory” and click the “Create” button to create the project.

Now, another dialog will appear that will allow us to specify the version of ASP.NET Core we want to use, as well as the specific type of project we want to create.

  1. Select “ASP.NET Core 7.0” as the version and “ASP.NET Core Web API” in the dialog. Then, click the “Create” button, which will create the project.

  2. Once the project has been created, open Program.cs and move the app.UseHttpsRedirection() line of the code so that it is not used while in development:

JavaScript (JSX)
public void Configure(IApplicationBuilder app,
IWebHostEnvironment env)
{
  if (env.IsDevelopment())
  {
... }
else {
    app.UseHttpsRedirection();
  }
  app.UseRouting();
... }

We have made this change because, in development mode, our frontend will use the HTTP protocol. By default, the Firefox browser doesn’t allow network requests for an app that has a different protocol to the backend. Due to this, we want the frontend and backend to use the HTTP protocol in development mode.

Test yourself

Press the “Run” button to see the output.

using Microsoft.AspNetCore.Mvc;

namespace QandA.Controllers;

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    private readonly ILogger<WeatherForecastController> _logger;

    public WeatherForecastController(ILogger<WeatherForecastController> logger)
    {
        _logger = logger;
    }

    [HttpGet(Name = "GetWeatherForecast")]
    public IEnumerable<WeatherForecast> Get()
    {
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        })
        .ToArray();
    }
}
Creating an ASP.NET core Web API project

That’s the only change we are going to make to our backend in this part. In the next lesson, we will create the React frontend project.