CODEWITHSUNDEEP
apachereactjs
Juri Bojka
Juri Bojka

Reputation: 415

react production build 404 not found

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

Upvotes: 5

Views: 18900

Answers (2)

HO&#192;NG LONG
HO&#192;NG LONG

Reputation: 459

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>

Upvotes: 0

Panther
Panther

Reputation: 9418

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.

Upvotes: 22

Related Questions