Why This Matters

If you’ve mostly deployed React applications using modern platforms like Vercel or Netlify, you’re probably used to a smooth and automated experience. Deployment is often just a matter of pushing code and letting the platform handle the rest.

However, in many enterprise environments, things work differently. This is where teams, including those at Payoda, often step in to bridge modern frontend practices with established enterprise ecosystems. There are existing infrastructures, internal networks, and often a dependency on technologies like IIS, especially when combined with a .NET backend.

This is where many developers start running into issues.

You deploy your React app, and suddenly:

• The page loads but shows a blank screen
• Refreshing a route results in a 404 error
• Static assets like CSS or JavaScript fail to load

These are common problems, and they usually come down to how React behaves in production versus how IIS serves applications.

Understanding the Core Idea

During development, a React app runs on a development server:

npm start

It feels like a dynamic application because everything is handled by Node.js behind the scenes.

But once you build the application for production, React doesn’t behave the same way anymore. It gets compiled into static files:

• HTML
• CSS
• JavaScript
  
  

At that point, it’s no different from a static website. This is important because IIS is perfectly capable of serving static content. The challenge isn’t whether IIS can host React—it’s about configuring it correctly.

What the Deployment Flow Looks Like

At a high level, the process is quite simple:

1. Build the React application
2. Generate static files
3. Place them in an IIS directory
4. Configure IIS to handle routing
5. Access the application in a browser

Once you understand this flow, most of the confusion disappears.

Step 1: Build the Application

Run the following command:

npm run build

This generates a build folder that contains all the production-ready files.

Inside this folder, you’ll typically find:

• index.html
• Compiled JavaScript files
• CSS assets

These are the files IIS will serve.

Step 2: Move Files to IIS

Navigate to the default IIS directory:

C:\inetpub\wwwroot\

Create a new folder for your application, for example:

MyReactApp

Copy all the contents of the build folder into this directory.

Step 3: Create a Site in IIS

Open IIS Manager and add a new website:

• Right-click Sites → Add Website

Provide the following details:

• Site Name: any meaningful name
• Physical Path: the folder you created
• Port: typically 80 (or another available port)

At this stage, the app might load—but routing issues will likely appear.

Step 4: Configure Routing

This is the step that usually causes trouble.

React uses client-side routing, meaning routes like /dashboard are handled inside the app. IIS, on the other hand, tries to locate a physical file for every request.

So when you refresh a page like /dashboard, IIS looks for a corresponding file and returns a 404 when it doesn’t find one.

To fix this, you need to redirect all requests to index.html.

Create a web.config file in your application folder:

<configuration>

 <system.webServer>

   <rewrite>

     <rules>

       <rule name=”ReactRoutes” stopProcessing=”true”>

         <match url=”.*” />

         <conditions logicalGrouping=”MatchAll”>

           <add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” />

           <add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” />

         </conditions>

         <action type=”Rewrite” url=”/” />

       </rule>

     </rules>

   </rewrite>

 </system.webServer>

</configuration>

This ensures that any request not matching a real file is redirected to the main entry point of the app.

Step 5: Set Folder Permissions

In some cases, IIS may not have permission to access your files.

To resolve this:

• Open folder properties
• Go to the Security tab
• Add the following users:
  • IIS_IUSRS
  • IUSR

Grant them read and execute permissions.

Step 6: Run the Application

Open your browser and navigate to:

http://localhost/

If everything is configured correctly, the application should load without issues.

Common Issues and Fixes

1. Blank Screen
     This often happens due to incorrect asset paths.
     Solution: Add “homepage”: “.” in your package.json.
2. 404 Errors on Refresh
   Caused by missing routing configuration.
   Solution: Ensure the web.config file is correctly added.
3. CSS or JavaScript Not Loading
   Usually related to absolute paths.
   Solution: Use relative paths with “homepage”: “.”.
4. API Calls Failing
   Typically due to incorrect backend URLs or environment settings.
   Solution: Verify API endpoints and configurations.

A Real-World Scenario

In a typical enterprise setup:

• React is used for the frontend
• A .NET Core API handles backend logic
• Both are hosted within IIS on an internal network
  
  

The React application is served as static files, while the API runs as a service. The frontend communicates with the backend through internal endpoints.

This approach allows organizations to keep everything within their infrastructure while maintaining separation of concerns.

Best Practices

• Always deploy using the production build
• Avoid hardcoded URLs
• Use environment-based configurations
• Test routing thoroughly before deployment
• Consider a staging environment before production
  
  

Conclusion

Hosting a React application on IIS might feel unfamiliar at first, especially if you’re used to cloud-native deployments. However, once you understand that a production React app is simply a set of static files, the process becomes much clearer.

Most issues can be traced back to three areas:
Routing configuration
File paths
Permissions

Address these properly, and IIS becomes a reliable option for hosting React applications in enterprise environments.

If you’re navigating similar enterprise deployment challenges or looking to modernize your application stack without disrupting existing infrastructure, Payoda can help. From bridging React with .NET ecosystems to optimizing enterprise-grade deployments, our teams work closely with you to build scalable, production-ready solutions. Let’s connect and explore how we can support your next deployment.

Frequently Asked Questions

1.Why is web.config required?
Because IIS does not natively support client-side routing used by React.

2.Can React and .NET applications run together in IIS?
Yes, and this is a common setup in enterprise environments.

3.Is IIS suitable for production React applications?
It works well for internal and enterprise use cases, though other platforms may be better suited for public deployments.

4.What is the most common mistake developers make?
Skipping routing configuration or deploying without building the application.