create-react-app on IIS 10

Question

I've scoured the web searching for a solution on how to deploy a React App on Microsoft's IIS.

I have successfully managed to deploy multiple Node.JS Applications but no such luck with React.

What I've tried:

1. installed URL Rewrite

2. I ran: npm i -g create-react-app

3. I created a basic react app: create-react-app my-app

4. I created a file called web.config in ./public route

web.config

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React Routes" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

5. I then ran npm run build
6. In IIS I added a new website with Application Pool: DefaultAppPool, the path linked to the ./build folder directory.
7. I ran browsed to the App
8. I get a Site can't be reached Error.

Anyone else tried to deploy on IIS?

I've also tried the following resources: - https://github.com/react-boilerplate/react-boilerplate/issues/711 - https://www.quora.com/How-can-one-host-ReactJS-in-IIS - https://hackernoon.com/adding-web-config-to-react-projects-3eb762dbe01f

Answer 1

I just tried this and it worked:

create-react-app myapp

yarn (or npm) build

• Open IIS manager and create a new website
• Point it at your build folder in the newly created react project
• Create a new application pool
• Right click on the app pool and under Process model find Identity, click the three dots
• Select custom and enter your windows credentials.

If this doesnt work you may need to enable read/write access to the files so right click on the website and select edit permissions

• Go to Security and hit edit, select Authenticated Users and on the bottom of the dialog check the modify/full control /read/write boxes where applicable. Do the same for your windows user that should be listed under Groups or user names section. Hit apply/save.

• Right click the website and go to Manage Website then browse.

Boom.