DEV Community

Masui Masanori
Masui Masanori

Posted on

1

Using React for the client-side of an ASP.NET Core application

Intro

This time, I will try using React for the client-side of my ASP.NET Core application.
I want to build the client-side code and the server-side code separately, because they will rarely be changed at the same time.

Environments

  • .NET ver.9.0.100
  • Microsoft.AspNetCore.SpaServices.Extensions ver.9.0.0
  • Node.js ver.22.11.0
  • React ver.18.3.1

Project file structures

OfficeFileAccessor - Root folder of ASP.NET Core application
L office-file-accessor - Root folder of React application
L React application files
L ASP.NET Core application files

UseSpa

I can also save the pre-built React code as static files in wwwroot directory and use it server-side.
However, in the debug environment, I want to access the page displayed at localhost:5173 as a result of running npm run dev, and in the release environment, I want to load the files from the dist folder.

To do this, I can use "UseSpa".
(I have to add Microsoft.AspNetCore.SpaServices.Extensions first).

Program.cs

using System.Text.Json.Serialization;
using Microsoft.Extensions.FileProviders;
using NLog;
using NLog.Web;
...
    builder.Services.AddSpaStaticFiles(configuration =>
    {
        if (builder.Environment.EnvironmentName == "Development") 
        {
            configuration.RootPath = "office-file-accessor";
        }
        else
        {
            configuration.RootPath = "office-file-accessor/dist";
        }
    });
    builder.Services.AddControllers()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
        });
    var app = builder.Build();    
    app.UseRouting();
    app.MapStaticAssets();

    // To allow the application to load React files other than the index.html, such as JavaScript and CSS.
    if (builder.Environment.EnvironmentName != "Development")
    {
        app.UseStaticFiles(new StaticFileOptions {
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "office-file-accessor/dist")),
            RequestPath = ""
        });
    }    
    app.MapControllers();
    app.UseSpa(spa =>
    {
        if (builder.Environment.EnvironmentName == "Development") 
        {
            spa.Options.SourcePath = "office-file-accessor";
            spa.UseProxyToSpaDevelopmentServer("http://localhost:5173");
        }
        else
        {
            spa.Options.SourcePath = "office-file-accessor/dist";
        }
    });
    app.Run();
...
Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay