Hello i need to deploy react app.
To achieve that i run : \"npm run build\"
after that in my vhost.conf i\'ve added vhost
Using web.config for IIS Window 10
<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
https://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Imported Rule 1" stopProcessing="true">
<match url="^" ignoreCase="false" />
<conditions logicalGrouping="MatchAny">
<add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
<add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
</conditions>
<action type="None" />
</rule>
<rule name="Imported Rule 2" stopProcessing="true">
<match url="^" ignoreCase="false" />
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
<system.web>
<customErrors mode="Off" />
<httpRuntime targetFramework="4.6.1" executionTimeout="240" maxRequestLength="2048000" />
<trace enabled="true" requestLimit="40" localOnly="false" />
</system.web>
<system.webServer>
<defaultDocument>
<files>
<clear />
<add value="Index.aspx" />
<add value="Default.htm" />
<add value="Default.asp" />
<add value="index.htm" />
<add value="index.html" />
<add value="iisstart.htm" />
<add value="default.aspx" />
</files>
</defaultDocument>
<directoryBrowse enabled="false" />
</system.webServer>
</configuration>
This is a common issue that comes up for SPA. In SPA, mostly the routing happens on client side. In your case, mostly react-router
should be doing the job. Since the whole js is bundled as a single file and is served in index.html
, you need to serve index.html
for all paths that is non-existing
in your server.
You have to add a config like this
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]
So, if there is no matching path in your server, the index.html would get served. Then the javascript would execute and react-router
(client side routing) will take over and display the correct component for the route.
This is true for most SPA, where the routing happens on client side.