This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

Deploying from LEARN on Vimeo

Deploying to Heroku

Its time to deploy our app to Heroku. You'll need to create an account on Heroku.com, but it is free to setup new apps once you have done so.

You can read about deploying React apps on Heroku here.

Challenge

  • Setup your Heroku account, and follow the instructions in the link above to deploy your app.

Deploying a Rails and React App

You will need separate repos for your API and your Front end.

If you are working with a single repo, remove git with rm -rf .git and clear any cached history with git rm --cached.

You can then create separate git repos.

Deploying Rails API

Deploying a Rails app to Heroku is pretty straightforward. But when that app uses Paperclip, we need to do a bit more work. To be able to make Paperclip work in production, we need to set it up with S3.

Here is a good overall guide to get S3 working with your Rails app: https://gist.github.com/belgoros/b289a0b57b52d16b99d436ca9b80417f

  • Pay attention to these sections:
    • S3 Settings
    • Amazon Identity and Access Management
    • Bucket Policies
    • Add AWS Services To Rails
      • production.rb
      • Setting heroku configs through terminal

When that setup is complete you can deploy your Rails API to Heroku.

Here is Heroku's S3 guide for additional reference: https://devcenter.heroku.com/articles/paperclip-s3

Deploying React Front End

First off, you will need somewhere to store your environment variables (ie. your api url and any api keys).

  • Create a .env file in root of project
    • Add api url and api keys
    • ie. REACT_APP_API_URL=your-rails-heroku-url
      • Note: the format of these variable names are important. React will recognize environment variables with this naming pattern: REACT_APP_*.
    • add it to .gitignore

Then you can use the following buildpack to deploy your front end to Heroku: https://github.com/mars/create-react-app-buildpack

  • Note: There is a section here on how to use your .env file at runtime and how to access them in your React components.

Deploying a Rails and React App

You will need separate repos for your API and your Front end.

If you are working with a single repo, remove git with rm -rf .git and clear any cached history with git rm --cached.

You can then create separate git repos.

Deploying Rails API

Deploying a Rails app to Heroku is pretty straightforward. Follow the official Heroku docs to deploy your Rails API.

Deploying React Front End

First off, you will need somewhere to store your environment variables (ie. your api url and any api keys).

  • Create a .env file in root of project
    • Add api url and api keys
    • ie. REACT_APP_API_URL=your-rails-heroku-url
      • Note: the format of these variable names are important. React will recognize environment variables with this naming pattern: REACT_APP_*.
    • add it to .gitignore

Then you can use the following buildpack to deploy your front end to Heroku: https://github.com/mars/create-react-app-buildpack

  • Note: There is a section here on how to use your .env file at runtime and how to access them in your React components.