How to publish ASP.NET 6 Web API with React Project to IIS

Question

I followed this MS tutorial for creating an ASP.NET Core project with a React front-end - https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022. I choose the option to create my client app in a separate project outside of the ASP.NET core project.

I am trying to publish my project to a local IIS server but I’m running into a few snags. I’ve followed the instructions in the Publish the project section of the same guide. When I follow those steps, my web api project and dependencies are deployed to the root of my IIS project folder, and the react web files are placed in a wwwroot directory within my IIS project folder. If I navigate to the site, I get a can’t reach this page. I was under the impression that my single asp.net app could host both the react web files as well as my web API. If I should be deploying the react app and the web API to separate sites within IIS, what is the most effective way to update all my API paths in react once deployed? Right now all my web api calls are relative links “/api/resourcesA”. Finding this all a bit confusing as someone coming from Razor Pages and MVC.

From what I gather I will also need to update the “homepage” property in package.json to my site’s URL, and I will also need to install and configure a URL rewriter as I am using react-router. However, I feel like I am getting stuck before getting to these steps. Any advice/direction appreciated.

A very common approach with two IIS sites: 1) www.somesite.com which contains your React web app. 2) api.somesite.com which contains the ASP.NET Core web app. If you read a little bit about IIS, this couldn't be simpler. — Lex Li
– Lex Li, Commented Nov 2, 2022 at 0:14

Deepak-MSFT · Accepted Answer · 2022-11-03 09:11:09Z

1

I refer to the document(https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022) on my side and I am able to reproduce the said issue.

It might create confusion as its combines the React project and .Net Core API in the single folder while publishing it.

You could refer to the steps below may help to fix the issue.

I assume that your project is running successfully from the VisualStudio and showing the data.

Go to Program.cs file and add these 2 lines.

app.MapFallbackToFile("index.html");

app.UseStaticFiles();

It should look like below.

For simplicity, try to publish it to Folder.
While creating the site in the IIS, set physical path like below.

While setting physical path, Select the site folder(don't select the wwwroot folder in it).

Visit the site in the browser.

answered Nov 3, 2022 at 9:11

Deepak-MSFT

11.5k1 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to publish ASP.NET 6 Web API with React Project to IIS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related