I have successfully deployed an app for the first time and wanted to share with everyone how I did it so other's can maybe avoid some of my pitfalls along the way.
This assumes that you have a Heroku account, have configured your computer to access Heroku via the CLI, and two Github repositories(frontend and backend split apart).
Reconfigure SQLite3 database to postgreSQL (if you made your rails api with postgres initially, skip to step 2)
- Remove gem ‘sqlite3’ in gemfile
- Replace with gem ‘pg’
- Run 'bundle install'
- Delete sqlite database from db folder
- In your config/database.yml replace sqlite3 adaptor references with postgres
default: &default
adapter: postgresql
encoding: unicode
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
development:
<<: *default
database: witchy_wardrobe_backend_development
test:
<<: *default
database: witchy_wardrobe_backend_test
production:
<<: *default
database: witchy_wardrobe_backend_production
username: witchy_wardrobe_backend
password: <%= ENV['WITCHY_WARDROBE_BACKEND_DATABASE_PASSWORD'] %>
(Note: I copied a file from a project where I initially built the api with postgres, there is a lot more commented out information that I removed here.)
- Run 'rails db:create'
- Run 'rails db:migrate'
- Run 'rails db:seed' (if you are using seeds)
- Test that your app is still working. Don't forget to commit your changes!
Connect the Rails API to Heroku
- In your console run 'heroku login'
- Once logged in (you may be redirected to a browser to enter in you Heroku password) run 'heroku create name-for-your-api' (I used 'heroku create witchy-wardrobe-api')
- Run 'git push heroku master'
- To connect up the database with a heroku database run 'heroku rake db:schema:load'
- Run 'heroku rake db:migrate'
- Run 'heroku rake db:seed'
- Now you should be able to navigate to https://name-for-your-api.herokuapp.com/ (https://witchy-wardrobe-api.herokuapp.com/)
- Unless you set up a root route in your routes.rb and build corresponding controllers, actions, and views, you will most likely see:
- Regardless of if you have a root, you can navigate to one of your endpoints to see your json response
- Check out Latest Activity at your Heroku site for potential deployment errors: https://dashboard.heroku.com/apps/name-for-your-api
Prepare your frontend to use your new backend api
- You likely have a number of functions in your application that fetch data from your API, and all of those will need to be changed to match the Heroku URLs. In my case, I had already defined a constant for my backend URL, so I only needed to update one URL, changing it from localhost:3000 to my new URL below:
index.js
const BASE_URL = 'https://witchy-wardrobe-api.herokuapp.com';
const ITEMS_URL = `${BASE_URL}/items`;
const CATEGORY_URL = `${BASE_URL}/categories`;
const OUTFITS_URL = `${BASE_URL}/outfits`;
- Commit and push up this change to your Github
Setup Github.io pages for your frontend
- You can follow the instructions on Github Pages, if you do this be sure to change from 'User or Organization Site' to 'Project Site'
- Go to your Github Repository for your frontend and go to settings
- Scroll down to the Github Pages section
Navigate to http://username.github.io/repository (https://mmcclure11.github.io/witchy-wardrobe-frontend/#)
If all went well, do a happy dance! Woohoo! Congrats! You’ve deployed a project! Tell all your friends and family!
Be sure to check out that your functionality is working. I had an issue where my frontend kept sending requests to localhost:3000 instead of my new heroku URL even though there were no signs of localhost:3000 in my frontend any where. After opening and closing and refreshing several times it started sending requests to the correct URL and all functionality was up and running.
Happy Coding!
Top comments (2)
Thank you for this! Helped me deploy my project!
Glad this was helpful Ellaine!!