Getting a React app running with json-server on Digital Ocean

This will help you setup subdomains to serve your React Frontend and its json-server backend. This assumes you've followed Steve's steps to get your Droplet up and running. This is a work in progress, and I may have missed a step I took!

GitHub setup

Follow GitHub's instructions to setup an SSH key on your Droplet and add it to your Github account. This allows you to clone from your repos on Github directly to your Droplet.

Update Node JS

sudo npm install -g n
sudo n stable
node -v to check version (if it still says 4.2.6 and not 11.something, run step 2 again) This will get you the latest version of NodeJS on your Droplet. I had issues installing packages before this.

Install json-server and forever globally

sudo npm install -g json-server forever
We'll use forever in the last step to keep json-server running, well, forever.

Point subdomains to your Droplet IP Address

You will need a subdomain for the frontend, and a subdomain for json-server.
Wherever you bought your domain, go to your DNS settings and create A records for the two subdomains.
Point them to the IP address of your Droplet.

ex: I created barkeeper.sebastiancivarolo.com and barkeeper-json.sebastiancivarolo.com

Cloning your React Project to your Droplet

In your home directory in your droplet, clone down your react project:
git clone [repo-address] [project-folder]
cd [project-folder]
npm install
BEFORE YOU BUILD Update your API manager to point to the new subdomain your created instead of http://localhost:5002.
sudo npm run build This will create a production version of your react project in a /build folder.

Create a directory for your react subdomain

This format will help you stay organized and know where each subdomain server lives.
In ~ aka home/{username}/:

mkdir ~/www
cd ~/www
mkdir {your-subdomain.folder.com} (name it the same as the subdomain url. just do it.)
mkdir {your-json-subdomain.folder.com} You can stick your database.json here, or just know where you're keeping it.
cd back to the folder where you cloned your git repo (cd ~/{repo-folder})
cd build Should take you into the build folder

(You could theoretically skip making the subdomain folder for your react project and just serve your site from the build folder, but I wanted to keep the repository separate from the server.)

Copy the contents of the build folder to your subdomain folder

cp -r * ~/www/your-subdomain.folder.com
You can cd ~/www/your-subdomain.folder.com and ls to check the files copied.
Also copy your database.json to your json subdomain directory or wherever you want to store it.

The NGINX stuff

Now we need to tell NGINX where our subdomains need to point.

sudo touch /etc/nginx/sites-available/yourdomain.com
sudo vi /etc/nginx/sites-available/yourdomain.com

Create the server blocks for your two subdomains

Both go in the file we are editing now. Semicolons are crucial, you'll probably forget one and get an error
For your react project:

server {
        listen 80;
        
        root /home/{username}/www/yoursubdomain.folder.com;
        index index.html;
        
        server_name yoursubdomain.url.com;
        
        location / {
                try_files $uri /index.html;
        }
}

For json-server:

server {
        listen 80;
        
        server_name your-json.subdomain.com;
        
        root /home/{username}/www/your-json.subdomain.com;
        
        location / {
                proxy_pass http://localhost:5002/;
        }
        
}

Your file should look like this: Two separate server blocks

server {
        ...
        ...
}
server {
        ...
        ...
}

To exit: esc then :x and return

We need to symlink this file into sites-enabled:
sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/yourdomain.com
Restart NGINX sudo service nginx restart
If you get an error, check your file.
sudo systemctl status nginx.service should help tell you why it didn't work.

Start JSON-server

cd into the directory where you put your database.json
forever start -c "json-server -p 5002 -w db.json" ./

Other useful commands:
forever stopall forever list forever restartall

You did it!

Go to yoursubdomain.domain.com and hopefully it works!

Updates to your app

If you make updates, git pull the latest version
sudo npm run build
rm -rf ~/www/subdomain.yoursite.com/*
cd ~/your-repo-folder/build
cp -r * ~/www/subdomain.yoursite.com/

Credit

Adapted from https://albertogrespan.com/blog/running-multiple-domains-or-subdomains-in-nginx-with-server-blocks/

scivarolo/react-jsonserver-digitalocean