DEV Community


Posted on • Updated on

Deploying React Js portfolio application to heroku

If you have your application code in vs code or any text editor.

step 1: Open command prompt
step 2: Give command git init (This will initialize a git repository in your
project folder)
step 3: Open
step 4: Create a new repository
step 5: open gitbash and go to your project folder
step 6: Generate ssh keys.
give command : ssh-keygen -t rsa -b 4096 -C "your mail id"
press enter for all question asked.
step 7: To make sure our app is running give command : eval "$(ssh-agent -s)"
step 8: To register the file we need to give the command: ssh-add -K
step 9: copy the remote origin link from your github repository
example: git remote add origin
step 10: Generate ssh keys in git bash,copy it and add to github settings.
give command : cat ~/.ssh/ t(to geneate ssh keys in
step 11: To check whether our key has been set up successfully or not give
command: ssh -T
step 11: Now give command
git push -u origin master

Now your code has pushed to git hub.
Next Download heroku cli.
open vs studio command prompt do the following steps:
go to project folder
login to heroku website
give command :
heroku keys:add
this will automatically take ssh key of the project
Next give command to create heroku application
heroku create my-portfolio
Next give command to publish to heroku
git push heroku master

Thats all.
Thank you

2nd method:

  1. From Visual studio command prompt give command Git init
  2. git add .
  3. git commit -m "initial commit"
  4. Open and login/Signup
  5. Download heroku cli
  6. Give command heroku create
  7. It creates two links, the first one is the address we need to give whwnever we need to visit our application.The second link is our deployment target, a git repository where we can push our local server
  8. copy second link and give command git remote add heroku second link Its okay if you get this msg (fatal: remote heroku already exists.)
  9. Give command git push heroku master
  10. Now give heroku open which opens your project in browser.

Top comments (0)