Deploy to IIS with the a React front end

[stijnvddonk]

All,

How would i go about deploying the application to IIS on a server when using the React front end?
I've never done this before and am struggling to set it up.

I've uploaded the full build output to the server and linked this to a IIS Site but i don't know how to link the front end afterwards.

Any help please?

[behdad088]

Hi @stijnvddonk

Steps to Deploy a React Application to IIS

1. Build the React Application

• First, ensure you’ve created a production build of your React app. From your project directory, run:

npm run build

• This command will generate a build folder containing static files (HTML, CSS, JavaScript) optimized for production.

2.Upload the Build to the Server

• Copy the contents of the build folder to your server.

• Place these files in a directory on the server where you want the application to reside (e.g., C:\inetpub\wwwroot\my-react-app).

3.Configure the IIS Site

• Open IIS Manager on your server.

• Right-click on Sites in the left panel and select Add Website….

• Set a Site name (e.g., MyReactApp), Physical path (point this to the directory where you copied your build files), and Port (e.g., 80 for HTTP).

• Click OK to create the site.

4.Set the Default Document

• In IIS, under your new site, click on Default Document.

• Ensure that index.html is listed as a default document (this file is the entry point for a React app). If it’s not, you can add it by clicking on Add… in the Actions pane and entering index.html.

5.Configure URL Rewrite Rules (for Single Page Application)

• React apps often use a single-page application (SPA) approach with client-side routing, meaning all routes should ideally point to index.html.

• To handle this in IIS, install the URL Rewrite module if it’s not already installed. You can download it from Microsoft’s IIS site.

• After installing the module:

  • Open the URL Rewrite feature in IIS Manager under your site.
  • Click Add Rule(s)… and select Blank Rule.
  • Set the Name (e.g., ReactRewriteRule).
  • In Match URL, set the Requested URL to Matches the Pattern and select Regular Expressions.
  • Set the Pattern to ^(.)$ (this matches any URL).
  • Under Conditions, click Add… and set the Condition input to {REQUEST_FILENAME}, Check if input string to Does Not Match the Pattern, and Pattern to ..(js|css|map|png|jpg|jpeg|gif|svg|ico)$. This ensures that static file requests (e.g., JavaScript, images) are served directly, bypassing the rewrite rule.
  • In Action, set Action type to Rewrite and Rewrite URL to /index.html.
  • Click Apply to save the rule.

6.Test the Application

• Open a web browser and navigate to your server’s IP address or domain name to confirm the application is running correctly.

With these steps, your React front end should be accessible through IIS. Let me know if you encounter any issues!

[stijnvddonk]

Thanks for the response! This is working! But how do i then connect the API? Which is running on the /api endpoint?

[behdad088]

@stijnvddonk are you asking for guidance on how to ensure the frontend and backend API communicate properly (especially when the API is running on /api)?

[stijnvddonk]

My current setup is as follows:

a root folder with the react app contents in there. Also a folder called api is in there where i've placed all the published files from the dotnet application.

The web.config file in the root directory looks as follows:

    <rule name="React Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_URI}" pattern="^/api/" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
		<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="index.html" />
    </rule>
  </rules>
</rewrite>

<staticContent>
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="application/json" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

</system.webServer>

and the web.config in the api folder is the default config created on publish. The api folder is then converted to a application in IIS. When this is started i can reach the front end and i can make API calls.