React App on Apache server, guide to setting up?

Question

I built up a React App using the Facebook create-react-app and everything works fine locally, I also have a hosting plan that uses an Apache server.

Trying to learn more about client vs. server side routing I found this great post, which makes a lot of sense to me. I want to use the Catch-all solution (although, I am using react-router v4, which seems to operate somewhat differently than v3)...

As someone completely new to back-end servers, and no Apache knowledge are there any good guides or suggestions re how to set up a React App on an Apache server (with react-router v4)? (This is my first attempt at setting something up on a server.)

Thanks for any guidance.

https://stackoverflow.com/questions/42461279/how-to-deploy-a-react-app-on-apache-web-server — Chase DeAnda, Sep 21 '17 at 16:36

score 1 · Answer 1 · answered Sep 22 '17 at 22:23

Figured this one out on my own, was quite more straight forward than expected. I just ran npm build & placed all my build files at the root. And then edited the .htaccess file to say:

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

So far, everything seems to be working perfectly. Let me know if there's any concerns with this solution. As this was built on top of the create-react-app it also did not requiring to eject the built in webpack config.

Thanks for the advice.

Right, it is more directly than I thought, thanks :) – Ngoc Nam Nov 13 '19 at 02:51 — Ngoc Nam, Nov 13 '19 at 02:51

score 0 · Answer 2 · answered Sep 22 '17 at 20:05

I ran into your problem when I came to host my first client-side rendering app with React. To make it even worse, I was using a PHP MVC framework as backend of the API used by the app. API calls which I had to access locally on the same server and enviorment.

This is how I solved my problem:

put the HTML code of build/index.html in the index file of my MVC application
Moved static content (CSS,JSS bundles) reachable for my back-end system. That was in root/build
Edited assets references in the index file (changed in step 1) to point to the new location (changed in step 2)

And it worked perfectly fine!

Now in your case, you can follow the same pattern and put your build/index.html file as if you are running a normal HTML page and move the assets to a reachable location.

React App on Apache server, guide to setting up?

2 Answers2