Host a create-react-app on my digitalocean website

I’m going through the beta react projects and trying to host them on my website in a projects/ subdirectory.

After building my first react app I npm build and uploaded it to but I get an error when looking for the js and css along the lines


I can get around this by uploading the static directory from my build directory to my websites home directory but it seems like a hacky workaround. I know with the naming structure I probably wont run into naming collisions but I also know there has got to be a better way to do this!

I’m hosting using a digitalocean droplet, I believe my answer lies in routing but I have no idea how to set it all up. From the information I could find I think I need to edit the sites-available and/or sites-enabled files but the tinkering I did took down my site until I reverted it. :anguished:

If anyone has any tips or tutorials I’d appreciate it.

Although this isn’t a direct answer to your question, I’d recommend ignoring the hassle altogether and using Heroku to host your projects. It’s a free, simple way to host your projects.

1 Like

I think the “hacky workaround” you describe is the thing you should be doing. React serves a static index.html file that runs a big script. I think if you put copy your app directory onto your droplet, run the build script, and configure your server to serve that index.html it should work.

I also second Heroku! Way easier. = )

1 Like

Oh okay thanks, just to be clear right now I have my project at

But in order for me to get it to load I need to move my JS and CSS folders from


So if I host multiple apps I’ll have several CSS and JS files in the same folders away from my project directory and index.html files. I was basically just hoping there was an easy way to point my index.html file at the CSS and JS directory relative to each project instead of like a master folder.

I’ll definitely look into heroku, I figured I’m already paying for this thing it’d probably be easier to keep all my projects in one place but that’s proving to be untrue :confused:

If anyone comes across a similar problem I finally figured out the fix and if I would have just scrolled up a couple of lines in my terminal I wouldn’t have had this issue in the first place :flushed:

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "",

so yeah, just add "homepage" : <path to project root>, to your package.json and everything will work perfectly. I knew I was missing something simple

1 Like

First you should always “build” your React app and host the built React App for a production environment. Second DigitalOcean made a nice tutorial on deploying Node.js apps see,

Not really sure how any of this addresses the issues I was having but as I said I figured out a solution by pointing to the project directory in package.json.

1 Like

It gave you DigitalOceans recommended way of deploying Node.js apps.

  • Latest Node.js version installed on your computer or the Linux server where are you going to deploy the application.
sudo apt-get update
sudo apt-get install nodejs
node -v or node –version
npm -v or npm –version
  • create-react-app tool
npm install -g create-react-app

Deploying the app

1.First of all, create the app using npx create-react-app

  npx create-react-app my-app

2.Now you can run the app by running following command in the project directory root

  npm start

3.The default react app will run in http://localhost:30004.Now install serve and pm2 packages globally on the system/server

npm install -g serve
npm install -g pm2

5.Since you are in the root directory of your project, run the following command to create a production build of your app. This will create a directory named build in the project root directory

npm run build 

6.Now we can run the following command to deploy the app

  pm2 serve <path> <port> --spa

In our case, we can run the following command

pm2 serve build 8082 --spa 

PM2 can serve static files very easily with the pm2 serve feature. It supports serving raw files from a specified folder or you can serve a SPA (Single Page Application) with it.

Now you can see that your application is running on 8081 port while you have logged out from your ssh terminal of the browser.

  • Check the status of the application following command in the shell.
pm2 list

Bonus : Below are some utility commands to manage the pm2 process

  • Specify the app name pm2 --name <app-name>
  • Delete all pm2 process pm2 delete all
  • Delete specific process pm2 delete <app-name>
  • Check the CPU and memory usage pm2 monit