Running React app on Passanger - node.js

Question

I am trying to run an react app on a server running Passenger. I can run simple Node.js apps no problem but I can not figure out how to run an React app. I am right now just in the beginning so I just created the default React sample project and I am trying to get that to run on Passenger.
I have done npm build but the suggestions for how to run that built app include yarn and serve. How would I configure the Passenger server to host my react app?
Any help on this would be very appreciated.

Answer 1

I know this is an older question now, but I figured out a solution for my case that allows a React app to run using Passenger that doesn't require yarn or serve -s build (which my VPS didn't let me run without being constantly logged in). I was not able to find any clear docs on how to do this anywhere else. The closest answer I found required me to build an express node server to frontend the React app (which I couldn't do for other reasons). I hope this answer helps others that might be searching for a similar solution to their question. I will add that I tested this solution on two different VPS cloud servers (DreamHost VPS and HostGator). Your VPS or server might need a modified setup to make this work.
First you need to create your production ready React app using npm run build (on your local system or your server, but I would recommend your local system). If you don't know how to do this you can look it up from the React docs in Creating a Production Build. The result of the production build should be a build directory. This is your React app encapsulated in a single deployable directory.
On the server running Passenger you will need to setup two directories (if your hosting provider didn't already do this for you) in the root level directory where Passenger expects apps to be run from. Create a public and tmp directory..
├── public
└── tmp
Note: If you are going to be running other node apps from here, then you might need a node_modules or other required directories. But they are not needed if you are just running the React app by itself.
Copy the contents of the build directory from Step 1 into the public directory on your server. The results of this should look something like this.
public
├── static
│ ├── css
│ │ ├── main.########.chunk.css
│ │ └── main.########.chunk.css.map
│ ├── js
│ │ ├── main.########.chunk.js
│ │ ├── main.########.chunk.js.map
│ │ ├── runtime~main.########.js
│ │ └── runtime~main.########.js.map
│ └── media
│ ├── background-image.########.png
│ └── logo.########.svg
├── asset-manifest.json
├── favicon.gif
├── favicon.ico
├── index.html
├── index.tmp.html
├── manifest.json
├── precache-manifest.########################.js
└── service-worker.js
Back at the root directory level, next to the public and tmp directories (not inside the public dir), create an app.js file containing this code:// app.js
// A simple Node.JS app launcher for running with Passenger.
const react_app = require("./public/index.html");
module.exports = {create: react_app.create}; This creates the node app that Passenger needs to connect too. The ./public/index.html in the code is the path to the actual entry point to your React app. But Passenger on many VPS setups is going to look for an app.js file to connect too. In some cases you might have to call this file server.js rather than app.js. This will depend on your hosting providers Passenger setup.
Finally you need to create an empty file called restart.txt inside the tmp directory. This file is used by Passenger on your server to detect when the React app should be "restarted". You simply have to do touch restart.txt from the command line on your server to have Passenger restart your service (at least that's the way it works on my server).
You should now be able to hit your React app from whatever address you have setup for your server.
The final root level directory structure should look like this (if you don't need a node_modules dir):
.
├── app.js
├── public
└── tmp
I would also recommend adding in a .htaccess file (again depending on you hosting provider) that prohibits file directory browsing and the like. Some VPS might require that you modify or add in a .htaccess file to make Passenger work at all. See your VPS specific docs for this info.
NOTE! This entire process is NOT needed if your React app can live on it's own. By that I mean that you can just upload the contents of the React production build process to the public or www or whatever "public directory" your server exposes to the world. The index.html file created in the React build folder is sufficient in many cases to serve up your React app from a web server. 😉

Answer 2

I tried the above answer and it worked to some extent but I found an easier way to achieve this. With this solution you can host your application on an apache or nginx server.
1.Add the homepage key to your package.json file
"author": "Your Name",
"license": "Your license",
"homepage": "https://your-domain.com/"
2.Create a production build with the below
npm run build
3.Copy the content of the generated build folder to your server root directory
4.Create a .htaccess file in the root directory with the content below
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]