Some Notes on Deploying your React Site w/a Rails API using Netlify and DigitalOcean

After finishing out my time at Flatiron School, I wanted to deploy some of the apps that I had made and ended up learning a hard lesson in how much there is to #devops and deploying your apps.

Using DigitalOcean to host your backend is great since you can host a bunch of personal projects on one server and avoid the Heroku spin up delay for only $5 a month and easily expand it if you start getting traffic. If you don't have an account, feel free to use my referral link and you'll get $100 in credit.

There are downsides to decoupling your frontend and backend servers. The biggest one to me is that your local development will have minor inconveniences since you won't be using localhost:3000 and using an actual URL. All in all, it's not the worst way to do it.

I'm going to assume you already own a domain ready to go. I like to use Namecheap but you can use any site you want.

Starting with React

Getting started with Netlify is honestly super slick. You create an account, link your github and you can push your React app pretty quickly. They even take care of your main domain SSL Certificates. When it comes to deploying your front-end, I found that I needed to do 2 things. I needed to create a netlify.toml file, in my parent directory and put the following inside of it:

[build]
  command = "CI= npm run build"
  publish="build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

The [build] sets it so that your code can get pushed while having React warnings (really be sure this is a good idea for your app). The [redirects] is what's used if you're using React Router. Add your domain to your account and make sure you point your domain to Netlify nameservers. You can additionally setup a subdomain to point at your backend from inside of the Domain panel.

Moving to Rails

Honestly, for the most part this guide is almost perfect - AND - it has a video so you can follow along if you want. They walk you thru creating your droplet and doing everything you need. If you're using a preloaded SSH key on your droplet you'll need to do make some changes before you can execute the ssh-copy-id commands:

Edit the config file with this command
sudo nano /etc/ssh/sshd_config

Change this line from 'no' to 'yes', then save and exit
PasswordAuthentication no

Then restart daemon and continue with the ssh-copy-id portion.
sudo systemctl restart sshd
Once you do that you'll want to come back and change the PasswordAuthentication back to no.

Rails API changes

If you're using Rails as an API only app then you'll need to tweak your Capfile. Comment out this line and add the 2 other lines.

# require 'capistrano/rails'

require 'capistrano/bundler'
require 'capistrano/rails/migrations'