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.

just to double check, is there a reason why you want to be hosting your own front end? something like https://www.netlify.com/ is probably better — azium, May 02 '18 at 18:28
Just a quick note that if you use most Linux distributions, you don't need PM2. https://stackoverflow.com/questions/4018154/how-do-i-run-a-node-js-app-as-a-background-service — mikemaccana, Jul 15 '20 at 15:06

score 24 · Accepted Answer · answered May 02 '18 at 21:35

24

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.

answered May 02 '18 at 21:35

bgran

867
6
12

`args: "serve -p 8443 -T"` this command tells that app will run on 8443 port? right? – Reema Parakh Jan 16 '19 at 05:41
1

@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` – bgran Jan 16 '19 at 17:08
It's not clear to me, what is the name? where to keep this file? and where to give our root app.js file? – 151291 Mar 25 '19 at 05:57
1

@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` – ashlrem Mar 27 '19 at 08:18
1

I don't think pm2 serve works properly with routes. It just serves files statically and mistakes routes for directory paths. – Shahrukh Haider Apr 08 '19 at 14:39
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" } ] } – Francis Jul 17 '20 at 09:27
Works well with React Router, serve index from all URLs – KeitelDOG Aug 12 '20 at 20:32

score 14 · Answer 2 · answered Sep 08 '20 at 03:42

14

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

answered Sep 08 '20 at 03:42

JHM16

649
8
12

score 3 · Answer 3 · answered Sep 12 '18 at 08:57

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!

answered Sep 12 '18 at 08:57

Nditah

1,429
19
23

How can I give reference to only the "dist" folder (which has all bundled changes) here? – techie_questie Nov 16 '18 at 11:26
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! – Matt Catellier Jan 18 '19 at 18:41
and also add #!/bin/bash at the top of the bash file – Issaka Faisal Jan 21 '19 at 11:41
Not a good answer. Running server.sh like this, leaks memory and causes the ec2 instance to lag – Shahrukh Haider Apr 08 '19 at 13:34

score 3 · Answer 4 · edited Mar 25 '21 at 01:25

3

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

edited Mar 25 '21 at 01:25

desertnaut

57,590
26
140
166

answered Mar 24 '21 at 11:51

Pavan Dhamu

31
2

Tanmay Shrivastava · Answer 5 · 2020-07-15T15:04:00.043

1

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

edited Jul 15 '20 at 15:04

answered Jul 12 '20 at 09:39

Tanmay Shrivastava

553
4
9

React build run on server using pm2

5 Answers5