Build Front/Back and Deploy to Heroku

BUILDING A REACT APP

1. Add a Procfile to your project’s root directory:

Procfile

2. The following command assumes you have the back and front ends in one repo. From your top repo directory, run this command but substitute “frontend” for whatever folder your front end it in:

npm run build --prefix frontend

3. Move the frontend files to the /public directory:

mv frontend/build/* public

4. Run Rails Server

rails s

4: Make sure React Developer Tools extension is installed on Chrome/Firefox. Then, visit http://localhost:3000 and check RDT to verify that your site is running in Production Mode.

CONFIGURING RAILS FOR CLIENT-SIDE ROUTING

The following assumes the use of Rails::API (https://github.com/rails-api/rails-api).

Go into config/routes.rb file and wrap the routes in the namespaced method which follows:

# config/routes.rb
Rails.application.routes.draw do
   namespace :api do
     <routes>
   end
   get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }
end

Example:

# config/routes.rb
    
Rails.application.routes.draw do
   namespace :api do
    resources :users
    resources :people, only: [:index, :update, :show]
    resources :friends, only: [:create, :index, :destroy, :show]
    resources :budgets, only: [:create, :index]
    resources :person_budgets, only: [:index]
    get '/authorize_user', to: "users#show"
    post '/login', to: "sessions#login"
    delete '/logout', to: "sessions#logout"
  end
  get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }
end

Should a user enter a route that lies outside of the Rails::API routes, get “*path”, to: “fallback#index”, constraints: ->(req) { !req.xhr? && req.format.html? } directs the user to the site’s public/index.html.

get “*path”, to: “fallback#index”, constraints: ->(req) { !req.xhr? && req.format.html? } assumes a Fallback Controller, which must be present:

# app/controllers/fallback_controller.rb
    
    class FallbackController < ActionController::Base
    
        def index
            render file: 'public/index.html'
        end
    
    end

HEROKU BUILD PROCESS

1. Create a new app on Heroku:

heroku create

2. Run Heroku buildpacks for NodeJS (React):

heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2

3. Deploy the app from Main/Master branch:

git push heroku main

Or, to deploy code to Heroku from a non-main branch of the local repository (for example, testbranch), use the following syntax push it to the remote’s main branch:

git push heroku testbranch:main

Running either of these commands will start the build process for both React and Rails.

A brief aside — in my limited experience with Heroku I’ve already come across an instance where the above command for Main/Master was not working. Git kept telling me to push or pull (or something) but I had already done those. It might be helpful to keep in mind:

git push --force heroku yourbranch:main

Once the deployment process is successfully initiated, your terminal will display a flurry of activity while deploying.

Once deployment has finished, your terminal will display a link ending in .git. As a beginner I first believed this .git link to be the URL for my website, but it’s not. To launch the deployed site at its URL, simply run:

heroku open

The URL is also available by signing in to Heroku Dashboard. Once logged in, visit “Dashboard” where the latest deployment will be listed at the top (if indeed there are multiple deployments). Select the App Name and look for the button titled “Open App.” This will launch the deployed site.

SEEDING THE DATABASE

If the deployed project included seed data for the database, that seed data did not seed itself during deployment. You must manually do it, and now’s the time.

From terminal, inside the project directory, run

heroku run rails db:migrate; heroku run rails db:seed

The following error might arise:

Error: Cannot run more than 1 Free size dynos.

If so, run

heroku ps

which should return the following line:

run.1234 (Free): up 2022/02/16 18:00:09 -0600 (~ 8m ago): bas

Pay attention to the first part of the line with the numbers, which is in this example “run.1234” These numbers will vary per user. Continuing on, run the command

heroku ps:stop run.1234

Finally, run

heroku run rails db:migrate; heroku run rails db:seed

The db should now be seeded and ready to go.