Launching Your First Website (Rails + React)

Matthew Sedlacek
Sep 29 · 4 min read
Image for post
Image for post
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:resetheroku 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.

Image for post
Image for post

Next select your Git Provider.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Matthew Sedlacek

Written by

Software Engineer — Full Stack, JavaScript, ReactJS, Ruby on Rails, OO Programming

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Matthew Sedlacek

Written by

Software Engineer — Full Stack, JavaScript, ReactJS, Ruby on Rails, OO Programming

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store