How to Deploy your app to Heroku
Tags: beginners, webdev, react, rails
Published: 2022-07-12 18:11:15

Hello, this blog is going to explain how to deploy an app that was made with a ruby on rails backend and a react frontend.

To begin you want to create a heroku account, this is free and necessary to use the site to deploy your app. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3loc3nnl8p85cthiy8k.png)
Once you have created the account go to your project and sign in to heroku through the terminal.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zycgel6v8j154ckz06cy.png)
It will direct you to the heroku site to log you in. 

Disclaimer- before you do anything inside of heroku make sure that you have pushed all your data to github using these commands.
`git add .` `git commit -m "message"` and `git push`
This is what heroku will use to build the app on their site to eventually deploy it.

Ok, now that all your information is updated and you are logged into heroku you want to make sure that heroku is available on your application by running these commands
`heroku buildpacks:add heroku/nodejs --index 1`
`heroku buildpacks:add heroku/ruby --index 2`
If they are installed already it will give an error that looks like this ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3spcgnv66ebn2euvcni.png)
 
Alright! Almost there!

Next we want to make sure that heroku sees the app that we are building. To push the information to heroku type: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o3eqxdjixydn3iaae7x.png)

Now, if everything was set up correctly this command will initiate a long line of code that will take a couple minutes to complete. If everything looks good it should also migrate the information for you. If there is an issue and it says `rails aborted` you can view the error and fix it accordingly. For more information about what the error is you can use the command:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54puap626dd7uu4ltxxd.png)
It should populate where exactly the application failed. 


Side note: if you are using image uploading make sure you are using a public site to upload them to. Meaning somewhere not on your local hard drive. A place where heroku can see. I used AWS and used a bucket to upload my images. I also changed my seeds file in my database to tell the application where to view the images. You also need to include them under the "Config Vars" ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfc2ssdfqcsuw303pyfi.png)
Just click reveal confiv vars and put the keys into the key and value areas so heroku knows where to look. 

Side side note. Make sure your public keys are in an .env file so that they are available but hidden to the public eye. Learn from my mistakes.


Back to our regularly scheduled program. 


Ok, so you should have been able to push and migrate your data. Now we can seed our data. Go ahead and type: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgh74rn71496iqw23x9w.png)
This command may also take a little bit of time. If there is an error there make sure that you type: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54puap626dd7uu4ltxxd.png)
to see exactly where the application failed. Be warned, this might be time consuming but you are so close! 

If you did run into an error while pushing or seeding your data to heroku you might want to restart your database so heroku has the most up to date information. Use this command ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g223lllydyps607xv1ij.png)

To find the name of your project it will be here![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8358om5dtvm66nlgtr9q.png)
 
Don't push it the updated version to heroku just yet. You want to make a slight change to your application so github sees a change. Something as simple as this will do it.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xz7hu0gqdsxm7y8ph05.png)

So close, stay with me. 

Now that you have restarted your heroku database and made the proper changed to your project, you can go ahead and re-push the information to heroku. If you forgot the command, here it is:![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o3eqxdjixydn3iaae7x.png)

Once again, this should automatically migrate your information to heroku. You can them type in: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgh74rn71496iqw23x9w.png)

When heroku is done seeding it should say something like the "seeding is complete" and will give you a URL. Click that URL and BAM your project is deployed through heroku! 

Congrats you did it!