CODEWITHSUNDEEP
reactjsiis
Darren Lau
Darren Lau

Reputation: 2045

React app route not working after deployed to IIS

I'm new to reactjs and currently facing some issue on IIS deployment for react app.

i execute npm run build and it generate a build folder, i then copy this folder to my IIS. When i browse the page, im able to view blank page but when i navigate to test route it shows 404.

I've try to add "homepage":"/" or "homepage":"." in my package.json but still the same.

index.html

enter image description here

This is my build structure

enter image description here

Any help is appreciated.

Upvotes: 4

Views: 12005

Answers (4)

Syed Amir Ali
Syed Amir Ali

Reputation: 1011

if web.config rewrite is not working try with react-router-dom's BrowserRouter by just adding basename="/" in BrowserRouter like this ==> <BrowserRouter basename="/">

Before:

root.render(

  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

After:

root.render(

  <React.StrictMode>
    <BrowserRouter basename="/">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Upvotes: 0

Mojtaba
Mojtaba

Reputation: 47

you can create web.config file in public folder and paste below content in it and then execute npm run build again:

<?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>

Upvotes: 1

Dimas De Jesus Veliz Blanco
Dimas De Jesus Veliz Blanco

Reputation: 91

Whenever you deploy a react page to production you will be facing this problem. Please refer to this page: https://inthetechpit.com/2019/06/13/handle-client-side-routes-with-iis-on-page-refresh-react-app/

The issue happens in the server (not IIS only, but all of them). You will be required to install an extension and then, to add a config file to the path of your front end build directory.

The extension to install is here: https://www.iis.net/downloads/microsoft/url-rewrite

the content of the web.config file that should be placed on the front end build directory goes as follows:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>

      </rules>
    </rewrite>
</system.webServer>
</configuration>

Upvotes: 7

Jalpa Panchal
Jalpa Panchal

Reputation: 12749

To deploy react js app in iis you could follow the below steps:

1)make sure you enabled below iis feature:

asp.net latest version static content directory browsing

enter image description here

2)open command prompt as administrator.enter to the react app folder then run below command:

npm run build

which create a build folder in your app folder.

3)open iis then select add site and add folder path build folder and site binding detail:

enter image description here

now, browse your site.

enter image description here

note: make sure you assign the iis_iusrs and iusr permission to the site folder.

Upvotes: 1

Related Questions