22
Host a React and Rails API Application
One of the best things about being a software engineer is bringing ideas to life. The more advance you get, the harder it is to keep your projects to yourself. In this article I want to layout a simple guide to getting your project out to the masses. I will talk about using a mix of heroku and GitHub pages. I will discuss how to get them to work together and some common gotchas when hosting.
I am going to make a couple assumptions with this article. I want this to be a quick reference for when you decide to host. I won’t waste your time describing how to create-a-react-app or how to create a rails api.
If you do not have any of the above assumptions, make sure you achieve this setup before continuing. Once your ready lets get started!
I use Heroku and GitHub pages due to their flexibility and cost. Before we begin, we need to assess our application to decide what is the best way to host. Our backend will always be hosted on Heroku. We use Heroku because it will give use access to a database for our application. We have two options for our React portion. We can use either GitHub pages or Heroku. So when do we use what? I prefer to use Github pages for single page applications that do not use react router. I like GitHub pages because once setup, one command will host your application and with the same command, we can push our changes to the production page. Also, GitHub pages is always awake ready for visitors. If your application uses react-router, we need to make sure to use Heroku. You can actually use Heroku for any react application but the one down side to Heroku is their dynos sleep. This means that if you do not have traffic for a 30 min period the application goes offline. If you get traffic, it will turn back on but it takes some time. You can fix this by purchasing a hobby dyno but I like free : ). So in general, backend always on Heroku and the React app can be either depending on if you used react router.
I am a big fan of using branches to organize my code on GitHub. I always have two branches, a development and production branch. You can name them whatever you want but makes sure you have two incase anything bad happens. If you are not sure how to do this, check out my GitHub Intro article on the topic. I will use the production branch for all my hosting. I will make changes and test in my development branch. Once everything is working, I will merge the branches and then redeploy the production branch. This will insure you always have working code hosted and you can easily maintain and expand your application.
Okay, let's get your react app hosted live. Github makes this process very simple we just have to make sure our application is setup correctly.
npm install gh-pages —save-dev
“homepage": “http://{username}.github.io/{repo-name>}
- Inside the scripts section:
“predeploy”: npm run build”
“deploy”: “gh-pages -d build:

npm run deploy
this will create a production build of your react application and also create a new gh-pages branch where it will store this build.
Now go to github repo to make sure everything is working properly
- go to setting => pages and make sure that your source is gh-pages and that the box above it is green with you live url.

Doing the above steps should get your application hosted for anyone to use. You can also set a custom domain name if you have purchased a domain.
There are a couple of different ways to host your React app on Heroku. You can view these options in your Heroku account. The easiest way is connecting with GitHub and deploying straight from there.
Yep, it's that simple. To make changes to your site just commit your changes to your hosted branch and redeploy. Just remember that the dynos will go to sleep and take a bit to wake up with the free dyno.
There are two different ways you can deploy a rails app. You can do it the exact same way as your React application or through Heroku Git. I prefer to use GitHub unless I have some information that I am hiding from GitHub like API keys etc. To setup with Github, just follow the same exact steps in the React app to Heroku above. To use the Heroku Git follow these steps. The official docs can be found at https://devcenter.heroku.com/articles/getting-started-with-rails6
heroku login
heroku create
git push heroku main
heroku run rake db:migrate
heroku open
The above will create an application on Heroku and host it. You can manage the application on Heroku. When you make changes to your code just make sure you're in the same branch as above and
git push heroku main
. heroku stack
will show you the available stacks heroku stack:set <new stack to switch to>
This will switch to a new stack. Now try to redeploy..gitignorge
or .env
file make sure to add them to your config vars. You can do this by going to Heroku app setting tab. In this tab, you will see config vars. Click reveal config vars and add the api key there. cors.rb
file make sure to update with the new url that you have for your frontend. I have spent hours trying to figure out why my frontend wasn’t talking to my backend because of this... So make sure to update your cors.rb
.I hope you find that helpful and use it as a quick reference when you decide its time to share your projects with the world. If you enjoyed this please share it with your friends!
22