Source:  Twitter logo

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

<VirtualHost *:80>
ServerName hello.local
DocumentRoot c:/wamp64/www/hello_world/build
<Directory  "c:/wamp64/www/hello_world/build">
             Options Indexes FollowSymLinks MultiViews
             AllowOverride All
             Require all granted
</Directory>

i've also added to etc/hosts hello.local

of course i've enabled mod rewrite in httpd.conf

When i run hello.local/ main page of my react app display properly, but when i want to go to react-react route path hello.local/example i received 404 not found error. Please help what can it be ? It's problem with apache configuration or react-router has some mistake ? Regards

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.

21 users liked answer #0dislike answer #021
Panther profile pic
Panther

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>
0 users liked answer #1dislike answer #10
HOÀNG LONG profile pic
HOÀNG LONG

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).