Deploy Rails API on Heroku and Vanilla JavaScript on Netlify
Tags: heroku, netlify, rails, javascript
Published: 2021-04-03 19:54:35

This blog is part II of my Project Deployment series. This is my second attempt to deploy my recent project, [Know It All](https://dev.to/fentybit/know-it-all-2kpp). 🚀  The project was created with **Rails API back-end** and **JavaScript/HTML/CSS front-end**. I chose to deploy my back-end on [Heroku](https://www.heroku.com/), and my front-end on [Netlify](https://www.netlify.com/).

### **Deploy Rails API on Heroku**
Since I already signed up previously on [Heroku](https://signup.heroku.com/), I had to log in and create this new project.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cwle6vhy6m8psp4q07n.png)

I had to set `lets-know-it-all` as `know-it-all` app domain name was already taken. 🥲

My deployment would be performed with [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install).

```
$ heroku login
  › Warning: Our terms of service have changed: https://dashboard.heroku.com/terms-of-service
  heroku: Press any key to open up the browser to login or q to exit: 
  Opening browser to https://cli-auth.heroku.com/auth/cli/browser/....
  Logging in... done
  Logged in as _______@gmail.com
```

I built the project already with PostgreSQL, unlike my previous Ruby on Rails project which I had to migrate my SQLite to PostgreSQL database. Make sure you are utilizing gem `pg`. Since I used Ruby version 2.6.1, I had to use [Heroku-18](https://devcenter.heroku.com/articles/heroku-18-stack) stack. You may review this [Heroku stacks](https://devcenter.heroku.com/categories/stacks) documentation.

```
$ Bundler Output: Your bundle only supports platforms ["x86_64-darwin-19"] but your local platform
  is x86_64-linux. Add the current platform to the lockfile with `bundle lock
  --add-platform x86_64-linux` and try again.
```

Heroku CLI is very friendly, and it will provide you guidance if any. Following Heroku's instruction on command prompt `bundle lock --add-platform x86_64-linux`, it immediately took care of my bundling issue. The following two commands `heroku create --stack heroku-18`, and `$ git push heroku master` kicked off my project deployment.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km0osyppiant6tjc2yfe.gif)

Let's not forget that once Heroku app is successfully created, the database should be migrated to Heroku's PostgreSQL. If you have seeding content in your `seeds.rb` file, then it is also prudent to run `heroku run rails db:seed`. *Note — I had to reset my deployment a few times as I was trying to debug a few error codes in my `seeds.rb`. `heroku pg:reset DATABASE` comes in handy whenever you need to reset your Heroku PostgreSQL.*

```
$ heroku run rails db:migrate
$ heroku run rails db:seed
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvv8kojc1tzkvqywituz.gif)

Now I have my [Rails API set up with Heroku](https://lets-know-it-all.herokuapp.com/api/v1/categories), sweet!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv1bwjrpla5uggw4fw27.gif)

### **Deploy Vanilla JavaScript on Netlify**

This would be my first time deploying anything with [Netlify](https://www.netlify.com/)! and it was super easy. 🥳

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cumky486ytjvvnxm6hde.png)

I have a tendency to use GitHub as my third-party authentication when signing up either on Heroku or Netlify. Select **New site from Git** to link your GitHub repo. I separated my front-end and back-end repo for this purpose, so I could simply link my [KnowItAll_frontend](https://github.com/fentybit/KnowItAll_frontend) repo to Netlify. It should only take less than a minute to deploy.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo6ghn5pqf0vad3ent5i.png)

Check out my simple Trivia app, [Know It All](https://lets-know-it-all.netlify.app/)!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1phsb6kae0fpvgsxqrm0.gif)

***
<center>[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)</center>