How to Host a React App on an IIS Server

Hello Dev, if you’re looking to host a React app on an IIS server, you’ve come to the right place. In this article, we will guide you through the entire process step-by-step so that you can easily deploy your app on IIS and get it up and running in no time. So, let’s dive into it!

1. Install IIS on your Windows Server

In order to run a React app on an IIS server, you must first have IIS installed on your Windows server. If you haven’t already installed IIS, you can do so by following these steps:

Step	Description
Step 1	Open Server Manager
Step 2	Click on Add roles and features
Step 3	Select the Web Server (IIS) role
Step 4	Follow the prompts to complete the installation

This will install IIS on your Windows server, and you’ll be ready to deploy your React app.

2. Build Your React App

Before you can deploy your React app on IIS, you need to build it. Building your app will create a production-ready version of your app that you can deploy on IIS.

To build your React app, open your command prompt and navigate to your project directory. Once you’re in your project directory, run the following command:

$ npm run build

This will create a build folder in your project directory that contains all the necessary files to host your app on IIS.

3. Create a New Site in IIS

Once you have built your React app, you need to create a new site in IIS where you can deploy your app. To create a new site, follow these steps:

Step	Description
Step 1	Open Internet Information Services (IIS) Manager
Step 2	Click on the server name in the left-hand pane
Step 3	Click on the Sites folder
Step 4	Click on Add Website in the right-hand pane
Step 5	Enter a name for your site
Step 6	Specify the physical path to your build folder
Step 7	Enter a host name for your site (Optional)
Step 8	Click OK to create your new site

After you have created your new site, you need to configure IIS to serve your React app from the build folder. We’ll cover that in the next step.

4. Configure IIS to Serve Your React App

Now that you have created a new site in IIS, you need to configure IIS to serve your React app from the build folder. To do this, follow these steps:

Step	Description
Step 1	Click on your new site in the left-hand pane of IIS Manager
Step 2	Double-click on the Default Document icon in the middle pane
Step 3	Add index.html to the list of default documents
Step 4	Go to the Handler Mappings feature
Step 5	Add the following mappings:

Request Path	Module	Executable
*.js	FastCgiModule	C:\Program Files (x86)\iisnode\iisnode.dll
*.json	FastCgiModule	C:\Program Files (x86)\iisnode\iisnode.dll
*.jsx	FastCgiModule	C:\Program Files (x86)\iisnode\iisnode.dll
*.ts	FastCgiModule	C:\Program Files (x86)\iisnode\iisnode.dll
*.tsx	FastCgiModule	C:\Program Files (x86)\iisnode\iisnode.dll
*.html	StaticFileModule
*	iisnode

After you have added these mappings, your React app should be ready to go. You can test it by navigating to your site in a web browser.

5. Troubleshooting

If you’re having trouble getting your React app to work on IIS, there are a few things you can do to troubleshoot the issue. Here are some common problems and solutions:

Q: My React app is not working and I’m getting a 404 error.

A: Make sure you have added index.html to the list of default documents in your site’s settings.

Q: My React app is not working and I’m getting a “Module not found” error.

A: Make sure you have added the proper mappings to the Handler Mappings feature in IIS.

Q: My React app is not working and I’m getting a blank page.

A: Make sure you have built your React app properly and that the build files are in the correct location on your server.

Conclusion

Hosting a React app on an IIS server is a straightforward process that can be done in just a few steps. By following the steps outlined in this article, you should be able to deploy your app on IIS and get it up and running in no time. If you run into any issues, refer back to the troubleshooting section or seek help from online communities. Good luck!