React don't run javascript when proxy by apache

I'm trying to deploy a react app locally, using apache to route the requests from port 80 to the react app port (3000 in this case). I'm using wamp for apache and serve to run the react app.

This is my current configuration:

vhosts:

<VirtualHost :80>

    ProxyRequests On
    <Proxy>
        Order deny,allow
        Allow from all
    </Proxy>
    ProxyPass /dashboard http://localhost:3000/
    ProxyPassReverse /dashboard http://localhost:3000/
    Header set Access-Control-Allow-Origin ""
</VirtualHost>

package.json:

...
"homepage": "."
...

.htaccess:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Apache modules

LoadModule access_compat_module modules/mod_access_compat.so
LoadModule actions_module modules/mod_actions.so
LoadModule alias_module modules/mod_alias.so
LoadModule allowmethods_module modules/mod_allowmethods.so
LoadModule asis_module modules/mod_asis.so
LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule auth_digest_module modules/mod_auth_digest.so
LoadModule authn_core_module modules/mod_authn_core.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authz_core_module modules/mod_authz_core.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule autoindex_module modules/mod_autoindex.so
LoadModule cache_module modules/mod_cache.so
LoadModule cache_disk_module modules/mod_cache_disk.so
LoadModule cgi_module modules/mod_cgi.so
LoadModule dir_module modules/mod_dir.so
LoadModule env_module modules/mod_env.so
LoadModule file_cache_module modules/mod_file_cache.so
LoadModule headers_module modules/mod_headers.so
LoadModule include_module modules/mod_include.so
LoadModule isapi_module modules/mod_isapi.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule mime_module modules/mod_mime.so
LoadModule negotiation_module modules/mod_negotiation.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule userdir_module modules/mod_userdir.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so

All files are being downloaded correctly by the browser, both via http://localhost/dashboard and http://localhost:3000:

If I access via http://localhost:3000 everything works correctly, but when accessing via the proxy http://localhost/dashboard all I get is a white page. Inspecting the source gives me this:

To deploy your react app, you don't need to use ProxyPass. It is not recommended for production environments. Instead, you should edit your package.json file and add the name of your hostname. In your case, it looks like it's <domain>/dashboard.

With this done, you will also need to edit the Router in your app, usually located in your App.js inside your src folder.

It should look like this:

<Router basename={"/dashboard"}>

After this, you can use npm run build to build your website and load the content of the build folder to your server.

Don't forget to add a .htaccess to your server with FallbackResource ./index.html.

On your server, you can set up a simple web server configuration. Example:

<VirtualHost *:80>
    DocumentRoot "/var/www/htdocs"
    ServerName  <your domain>/dashboard
    ServerAdmin someone@somewhere.com
    ErrorLog /var/log/apache2/<your domain>-error.log
    CustomLog /var/log/apache2/<your domain>-access.log combined


    <Directory "/var/www/htdocs">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory> 
</VirtualHost>

The source of this explanation is: here

Happy deployment!