Deploy an Angular 12 App with a Rails REST API Back end, using GitHub Pages and Heroku

It’s been a while since I posted! I haven’t stopped coding though. Ok, well, I took some time to get caught up in my day job, and took some time for family — I’ve been coding pretty much every day for the better part of two years so I did need to shift my attention to other aspects of my life. But I still managed to find some time for coding and even built some new simple apps, including an basic CRUD Angular app. I finally deployed it the other day and added it to my portfolio site. Here’s how I did it.

API Deployment

Let’s start with the back end. I like to deploy my back end first, so I can test the front end with a live API before deployment. This assumes you’ve already built your Rails API, including models, controllers and routes, and it’s just sitting there waiting for you to deploy it.

First if you don’t already have the Heroku command line installed, you should go ahead and install that.

sudo snap install --classic heroku

Easy enough! Next step, login to Heroku via the command line:

heroku login

Heroku doesn’t support the Rails default database, SQLite, so you’ve got to make sure your app is using something else, and PostgreSQL is your best bet here. If you’ve built with SQLite and need to convert, you can find a ton of helpful guides out there, including this one.

Your project needs to be in a git repo before you go any further. It should already be, but if not:

git init

And then the usual:

git add .
git commit -m "deployment preparation"

We’re almost there. Now you’re going to connect to deploy:

heroku create
git push heroku master 

If your primary branch is called ‘main’ instead of ‘master’, adjust the above accordingly. Then:

git push heroku main

You’ll get some output, and towards the end you’ll get your API’s URL. Nice!

Now just migrate your database:

heroku run rake db:migrate
heroku run rake db:seed

If you had any seed data, it should now be present at the API. If you didn’t bother with any seed data, now is a good time to create at least one record to make sure your API is running properly. You can do that right from the command line:

heroku run rails console

Create some instances of your models in the console. I always check the API in the browser to make sure everything is up and running as expected.

Deploy the Angular App

This assumes you already have Angular CLI installed and an Angular app in a GitHub repo ready to deploy.

I’d never done this before and I remembered having a few issues the first time I did this with React, which is pretty user friendly, so I anticipated more trouble here. Nope! Very simple.

From your Angular app’s root directory it’s really just a few simple commands:

This one installs angular-cli-ghpages, which automates most of the deployment process, globally:

ng add angular-cli-ghpages

With that installed, just deploy the app using this command:

ng deploy --base-href=/<yourRepoName>/

Almost at the finish line. In your GitHub repo, go to settings and scroll down to or click on “Pages.” In the last step, a branch called gh-pages was automatically generated. That’s the branch you want to build from. Change from master/main to gh-pages. You should then see something like this:

Reload if you don’t. That’s that, your Angular app on GitHub pages!

Conclusion

This wasn’t too difficult but like many things I found these instructions in pieces across the web. Posting this in case anyone else using these two technologies together needs to accomplish the same thing. Thanks for reading!