Visual Studio Code – How do I start a "React and ASP.NET Core" created in visual studio from vscode terminal?

A project created with Visual Studio will have Properties folder, and in it, a launchSettings.json file. Inside this file you’ll have more than one profile in the profiles property. Probably 2: IIS Express and one with your project name, in my case it is ReactPlusNetCore because that’s how I named the project.

Visual Studio Code will read this JSON file and will pick up the second one I mentioned above because its algorithm tells it to use the first profile found that has commandName: "Project" in it.

If you compare the 2 profiles, you’ll see that the selected one has a different URL to the first one. Yes, the IIS one doesn’t have the URL in the profile, but if you look at the JSON file you’ll find it inside the iisSettings property.

With this in mind, let’s see about React + ASP.net projects.

Project Generated with Visual Studio v17.2

This project carries a React project created with Create React App.

Open ClientApp/src/setupProxy.js. You’ll see something like this:

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:5992';

You’ll see that the port number at the end matches the IIS settings URL but not the other profile’s URL, as per the explanation at the beginning of this answer. Change the port number and retry.

You should now be able to fetch data.

Project Generated with Visual Studio v17.8.4

This project carries a React project that uses Vite.

This one is far more problematic even inside Visual Studio.

If You Don’t Want HTTPS

I created the project using VS’ wizard. I removed checkmark for the use of HTTPS when prompted, but this seems to only work for the .Net project. The Vite + React project remains in https, so one must remove this manually (I see no point in running SSL locally for the most part; there are very few exceptions where this is needed).

This the part of vite.config.js that specifies SSL:

    server: {
        proxy: {
            '^/weatherforecast': {
                target: 'https://localhost:5001/',
                secure: false
            }
        },
        port: 5173,
        https: {
            key: fs.readFileSync(keyFilePath),
            cert: fs.readFileSync(certFilePath),
        }
    }

Remove the server.https property to go back to http, and then focus the attention to the proxy target. That URL says "https", which I deactivated. So the proxy URL is wrong even for running in Visual Studio. Move it back to http.

In vite.config.js, locate server.proxy. You’ll see the target URL has the wrong port number when you compare this to the port number seen in launchSettings.json. In launchSettings.json I see port 45242 for IIS, and port 5282 for standalone (Kestrel). So the target in the proxy needs to be http://localhost:5282 in this particular case (I removed HTTPS, so this is why I write here http).

• The port numbers vary project to project.

There is one more reference in the ASP.net project file to the React project URL. Open it and change it. It is the value of the <SpaProxyServerUrl> property. I am currently unaware of its purpose.

Once I made these changes, the project almost behaves. For some reason, even after closing and opening VS, whenever I start debugging (using F5), it insists on opening https://localhost:5173. I suppose this is what I get for going against the majority of people that probably debug using HTTPS.

No matter, as the OP wants to use VS Code, not VS. At this point I remove the "s" in "https" in the browser’s address bar and the project works and loads weather data. Time to move to VS Code.

Open the solution folder. Allow VS Code to add the missing assets to run the project. Open a terminal and root it to the client folder where the Vite + React project lives. Run npm run dev. Now press F5 to start debugging in VS Code. This opens the browser using the correct URL and all should be good.