React build run on server using pm2

Question

I have compiled my react app using

react-scripts build

And it generated a build\ folder in the root directory of App. I am running the build\ folder using

sudo serve -T -p 443 build/

This runs my React app successfully on HTTPS since I am passing -T. But I needed to run my app forever using any of the modules available. I was looking into node modules forever & pm2. I am trying to using pm2 in the following way:

sudo pm2 serve -T -p 443 build/

It throws:

error: unknown option `-T'

and when I use:

sudo pm2 serve -p 443 build/

It works on console but I am not able to access my app from URL

[ec2-user@ip-10-XXX-XX-XXX UI]$ sudo pm2 serve -p 443 build/
[PM2] Spawning PM2 daemon with pm2_home=/root/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /usr/local/lib/node_modules/pm2/lib/API/Serve.js in fork_mode (1 instance)
[PM2] Done.
[PM2] Serving /var/www/html/UI/build on port 8080
┌─────────────────────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐
│ App name                │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user │ watching │
├─────────────────────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤
│ static-page-server-8080 │ 0  │ fork │ 26609 │ online │ 0       │ 0s     │ 2%  │ 21.7 MB   │ root │ disabled │
└─────────────────────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app

Can someone help me with this? Or if there is any other way to run your react app on production forever.

Newt

just to double check, is there a reason why you want to be hosting your own front end? something like netlify.com is probably better – Rushton

Just a quick note that if you use most Linux distributions, you don't need PM2. #4018654 – Ringtail

Answer 1

You need to use a pm2 JSON config to run arbitrary binaries:

app.config.json

{
  apps : [
    {
      name      : "your-app",
      script    : "npx",
      interpreter: "none",
      args: "serve -p 8443 -T"
    }
  ]
}

To start:

pm2 start app.config.json

interpreter: "none" tells pm2 not to treat the script like a JavaScript file when executing, and instead to treat it like an ordinary binary.

If you have a serve binary in the same directory as the app config, you can execute serve directly instead of npx.

Bergh

args: "serve -p 8443 -T" this command tells that app will run on 8443 port? right? – Balfour

@ReemaParakh That's correct. script: "npx" tells pm2 to execute the npx command, and args: "serve -p 8443 -T" will be passed to npx as arguments. So ultimately, pm2 will run npx serve -p 8443 -T – Bergh

It's not clear to me, what is the name? where to keep this file? and where to give our root app.js file? – Thorium

@151291 You should keep this file in your root folder along with your package.json file. The name : "your-app" is like when you run pm2 directly on terminal pm2 start index.js --name your-app – Ignoramus

I don't think pm2 serve works properly with routes. It just serves files statically and mistakes routes for directory paths. – Rattling

I tried this and obtained a beautiful table in the terminal, but nothing in the browser . ***** I tried servername:3011 and servername:3011/appname ****** My json file looks like this: { "apps" : [ { "name" : "confluence2zoomin", "script" : "npx", "interpreter": "none", "args": "serve -p 3011 -T" } ] } – Rael

Works well with React Router, serve index from all URLs – Haven

Answer 2

Use below command it worked for me

first build your react application and then hit this command inside your application folder .

pm2 serve build/ 3000 --name "react-build" --spa

Hydrobomb

What is this --spa flag for? – Saltarello

That's for serving Single Page Application(SPA) Refer: Serving SPA: redirect all to index.html @ pm2.keymetrics.io/docs/usage/expose – Downcomer

Without --spa it worked for me – Upshot

Answer 3

@bgran provided a nice solution. As an alternative, I dare to suggest you can add this deploy to your script in package.json

"deploy": "pm2 start ./server.sh --name yourAppName",

Then in the same directory as the package.json, create an executable server.sh:

echo "Serving yourAppName!"
serve -s build

Don't forget to make server.sh an executable by running:

chmod +x server.sh

Now it's party time! Deploy your app by running

npm run deploy

Done!

Serpentine

How can I give reference to only the "dist" folder (which has all bundled changes) here? – Farewell

This worked in combination with app.config.json as described in previous file. If i did not write my own server.sh it would not execute. Thanks! – Lifeanddeath

and also add #!/bin/bash at the top of the bash file – Officialism

Not a good answer. Running server.sh like this, leaks memory and causes the ec2 instance to lag – Rattling

Answer 4

If you are willing to run React project using pm2 then try to run below command

pm2 start --name <app name<app name>> npm -- start

Extender

Answer 5

create run.sh file

put below command inside run.sh file

serve -s build

and save.

Then run this command.

sudo pm2 start run.sh --name app-name

Rashid