CODEWITHSUNDEEP
reactjsiis
Justin
Justin

Reputation: 972

create-react-app on IIS 10

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>
  1. I then ran npm run build
  2. In IIS I added a new website with Application Pool: DefaultAppPool, the path linked to the ./build folder directory.
  3. I ran browsed to the App
  4. 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

Upvotes: 15

Views: 30729

Answers (1)

molebox
molebox

Reputation: 585

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.

Upvotes: 19

Related Questions