Launching Your First Website (Rails + React)

Photo by SpaceX on Unsplash

Congratulations, you’ve built your first full-stack application and now looking to host it on the web to show your friends, family, and future employers. This guide will walk you through the necessary steps to

1. Host your backend on Heroku
2. Push your local Postgres database to Heroku
3. Host your frontend on Netlify
4. Adding API keys to your Netlify App

Backend

Heroku is a great software development platform for Rails applications. The main benefits are that it’s beginner-friendly, cost-effective, and deployment is quick and easy. Before starting this tutorial, you will need to download and install the Heroku CLI. After you’ve created an account and logged in, you are ready to begin the process to host your backend on Heroku. In your terminal, type the following command.

heroku create

This command will create a new app on Heroku. If you would like to name your backend, include it in the line above; otherwise, Heroku will generate a name for you.

git push heroku master

The git push command will push your repository up to the Heroku app you created in the previous terminal command. You do not need to specify the name given to your app in the previous step because ‘heroku create’ builds a git remote called ‘heroku’ that points to the application you just created.

heroku run rake db:migrate

Heroku rake tasks run the same way as they do on your local machine. This step is required to run your migrations.

heroku open

Following a successful migration, you should make sure that your routes are working as expected. Your backend is now deployed!

**Optional**

If you want your Heroku app to include the data from your local database, run the following commands.

heroku pg:reset
heroku pg:push name-of-local-database DATABASE_URL --app name-of-Heroku-app

After pushing up your local database, check that your routes now contain the correct database information with the following command.

heroku open

Now you can replace your localhost routes with your newly created heroku routes in your frontend repository.

Front End

Netlify is another software development platform but mainly targeted at frontend developers. Netlify is excellent for hosting your frontend because of its speed, continuous deployments, easy setup with Git, and live support.

After creating an account with Netlify and you’ve set up your connections to your Heroku backend in your frontend repository, select the “New site from Git” option.

Next select your Git Provider.

You will then be asked by your Git provider to authorize Netlify. After doing so, you will see a list of your repositories to choose from.

After you have selected your frontend repository, the below options will populate. Click the ‘Deploy site’ button.

Following clicking the “Deploy site” button, you will be redirected to your new site dashboard, as seen below. The main area to pay attention to is the production deploys area that now says “Building.” Here you will be shown any errors, or if there aren’t any, you will see that your site was published.

If you do encounter errors, the logs provide details on the error and how to fix them. There is also a live chat feature with individuals who can help. After fixing your errors, you can go to the deploys tab and click “Trigger deploy” to try again.

When all errors are fixed, you will see a Published message similar to the one below.

The last step is adding API keys and tokens to your app environment. This can be found in the settings tab in the Environment section. Make sure your variables are named the same as they are in your environment file in your repository.

Now it’s time to celebrate; you now how your app hosted and can share with the world!