how can i host react app in IIS web server?

Viewed 13152

How can i host reactjs app in IIS webserver?

I used npm run build and replaced the file into the server and create new site which refers to those file.

also i add the binding all IP to port 80 using * sign. but not worked.

1 Answers

After we run the below command, the output will create a new folder called “build” inside the project which contains production build. We could host the project by copying these files to the root directory of the IIS website, the website root folder should be able to be accessed properly by the anonymous account, and therefore we should grant IUSR account full access to the folder if it is not the default website. enter image description here
enter image description here
After adding the web site binding in IIS binding module,
enter image description here
We could access the website properly by using the below address.

http://localhost

Besides, if we adding certain routing features (multiple components) in the react application, we have to install the IIS URL Rewrite extension.
https://www.iis.net/downloads/microsoft/url-rewrite
After a successful installation, we need to create a web.config file containing the below content under the root directory of the IIS website.

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

Feel free to let me know if the problem still exists.

Related