React  

How to Connect React Frontend With .NET Backend?

Connecting a React frontend with a .NET backend is a common approach for building modern full-stack web applications. In this architecture, React handles the user interface and client-side interactions, while ASP.NET Core Web API manages business logic, authentication, and database operations. This separation of concerns allows teams to build scalable, maintainable, and cloud-ready applications using modern development practices.

This guide explains in simple language how to connect a React frontend with a .NET backend, including API setup, CORS configuration, HTTP requests, and production best practices.

Understanding the Architecture

In a React and .NET full-stack application:

  • React acts as the frontend Single Page Application (SPA).

  • ASP.NET Core Web API serves as the backend service.

  • Communication happens via HTTP requests (usually REST APIs).

  • Data is exchanged in JSON format.

The frontend sends requests using fetch or Axios, and the .NET backend returns JSON responses.

Step 1: Create the .NET Backend (ASP.NET Core Web API)

Create a new ASP.NET Core Web API project:

dotnet new webapi -n MyBackend
cd MyBackend

Create a simple controller:

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok(new[] { "Laptop", "Mobile", "Tablet" });
    }
}

Run the backend and confirm the API works:

https://localhost:5001/api/products

Step 2: Enable CORS in .NET Backend

Since React and .NET usually run on different ports during development, you must enable CORS (Cross-Origin Resource Sharing).

In Program.cs:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

app.UseCors("AllowReactApp");

Make sure UseCors() is added before MapControllers().

Step 3: Create React Frontend Application

Create a React application:

npx create-react-app myfrontend
cd myfrontend
npm start

By default, React runs at:

http://localhost:3000

Step 4: Call .NET API from React

Inside your React component, use fetch or Axios.

Example using fetch:

import { useEffect, useState } from 'react';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://localhost:5001/api/products')
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Now React fetches data from the ASP.NET Core Web API.

Step 5: Use Environment Variables in React

Instead of hardcoding API URLs, create a .env file in React:

REACT_APP_API_URL=https://localhost:5001/api

Then use it:

fetch(`${process.env.REACT_APP_API_URL}/products`)

This makes it easier to configure different environments such as development, staging, and production.

Step 6: Secure the Connection with Authentication

For secure enterprise applications, implement authentication in the .NET backend using JWT.

  • Backend issues JWT token after login.

  • React stores token securely.

  • React sends token in Authorization header.

Example:

Authorization: Bearer YOUR_JWT_TOKEN

This ensures secure communication between React frontend and .NET backend.

Step 7: Handle HTTPS and Certificates in Development

Sometimes React cannot connect due to HTTPS certificate issues.

Solutions include:

  • Trusting the .NET development certificate

  • Using HTTP in local development (not recommended for production)

Always use HTTPS in production deployments.

Step 8: Production Deployment Strategy

In production, you can:

  • Deploy React separately (e.g., Vercel, Azure Static Web Apps)

  • Deploy ASP.NET Core Web API to Azure App Service or containers

  • Host React build files inside the .NET project (wwwroot)

To build React for production:

npm run build

The generated static files can be deployed to a cloud hosting platform.

Common Issues When Connecting React and .NET

  • CORS errors due to missing configuration

  • Incorrect API URL or port mismatch

  • HTTPS certificate issues

  • Authentication token not sent correctly

  • Backend not running during development

Carefully checking network requests in browser developer tools helps diagnose issues.

Best Practices for Full-Stack React and .NET Applications

  • Use proper CORS configuration

  • Implement JWT authentication

  • Validate input on both frontend and backend

  • Use environment-based configuration

  • Enable logging and monitoring

  • Follow REST API design best practices

These practices ensure scalable, secure, and production-ready full-stack applications.

Summary

Connecting a React frontend with a .NET backend involves creating an ASP.NET Core Web API, enabling CORS for cross-origin communication, calling the API using fetch or Axios in React, and optionally securing endpoints using JWT authentication. By configuring environment variables properly, handling HTTPS correctly, and following best practices for deployment and security, developers can build scalable, cloud-ready, and enterprise-grade full-stack applications using React and ASP.NET Core Web API.

Membership not found