Some Notes on Deploying your React Site w/a Rails API using Netlify and DigitalOcean
Published: 2020-09-14 01:48:32

---
title: Some Notes on Deploying your React Site w/a Rails API using Netlify and DigitalOcean
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

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](https://m.do.co/c/f139fbacd4fc). 

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](https://namecheap.com) but you can use any site you want.

### Starting with React
Getting started with [Netlify](https://netlify.com) 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](https://gorails.com/deploy/ubuntu/20.04) - 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.

```ruby
# require 'capistrano/rails'

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