Struggling loading a .Net core project and a React js project on Visual studio

Question

I followed this Microsoft tutorial https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp.net-core-with-react?view=vs-2022 .It's just a basic tutorial on how to create a.Net core project with react and running those projects on Visual Studio 2022. Upon doing this tutorial, I faced this error This localhost page can't be found No webpage was found for the web address: https://localhost:7098/ HTTP ERROR 404 when I am running my project. Any help

I tried to go to the LaunchSettings.json file in my .net core project and setupProxy.js file in my react project so that they can have a matching endpoint of https://localhost:7049.

Answer 1

I have test in my local and I am not why you facing this issue. Maybe you missing this line?

// route non-api urls to index.html
endpoints.MapFallbackToFile("/index.html");

No worries, you can check the details below, it works in my side. Hope it can help you. Happy Coding.

Webapplication1

Program.cs

namespace WebApplication1
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add services to the container.

            builder.Services.AddControllers();
            // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
            builder.Services.AddEndpointsApiExplorer();
            builder.Services.AddSwaggerGen();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseSwagger();
                app.UseSwaggerUI();
            }
            else
            {
                app.UseDefaultFiles();
                //app.UseStaticFiles();
            }

            app.UseHttpsRedirection();

            app.UseStaticFiles();
            app.UseRouting();
            app.UseAuthorization();
            //app.MapControllers();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                // route non-api urls to index.html
                endpoints.MapFallbackToFile("/index.html");
            });

            app.Run();
        }
    }
}

launchSettings.json

{
  "profiles": {
    "WebApplication1": {
      "commandName": "Project",
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "dotnetRunMessages": true,
      "applicationUrl": "https://localhost:7006;http://localhost:5098"
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  },
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iis": {
      "applicationUrl": "https://localhost:47000",
      "sslPort": 0
    },
    "iisExpress": {
      "applicationUrl": "http://localhost:13913",
      "sslPort": 44383
    }
  }
}

Webapplication1.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.2.3" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\reactproject1\reactproject1.esproj">
      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
  </ItemGroup>

</Project>

React

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

const context = [
    "/weatherforecast",
];

module.exports = function (app) {
    const appProxy = createProxyMiddleware(context, {
        target: 'https://localhost:7006',
        secure: false
    });

    app.use(appProxy);
};