CI/CD NodeJS + CircleCi + Heroku Deployement

drsimplegraffiti

Abayomi Ogunnusi

Posted on June 11, 2022

CI/CD NodeJS + CircleCi + Heroku Deployement

_
Let's discuss about CircleCi and Continuous Delivery/Continuous Deployment.
Check out my CICI with Jenkins, which is another CircleCi alternative. _

🎯 Prerequisite

NodeJs and Express Knowledge
Heroku Account
CircleCi Account


To deploy Heroku, let's create up a very simple app.

Image description


Let create our server

Image description


Let's edit our package.json and .env files

Image description


Now we start our server

Image description


In this section 2 we will deploy to Heroku using the Heroku cli

Log in to Heroku

Image description


Create Heroku app

Image description

Let push our codes to Github at this stage

git init && git add . && git commit -m "Initial commit" && git branch -M main && git remote add origin https://github.com/drsimplegraffiti/cicd-heroku-circleci.git && git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Next we connect heroku to our apploid app

Image description

Let's add Port to Heroku Environment variable

Image description


We can deploy to Heroku

Image description


Open app on a browser

Image description

Result:
Image description


In this section, let's setup our circle with github. Head up to circleci and login with Github
Image description


Let's setup and connect our app in CircleCI

Click on the setup project button
Image description

Choose a deployment method

Image description


Choose deploy with Heroku

Image description


Set your env config on circle ci

Image description
Image description


Click and run

Let me copy the config file and do some editing on the yml file
Image description


Setup the config.yml file

Image description

Now click on commit and run. Lets see if our build was successful
Image description


Let's add another router called deploy

Image description

Notice we didnt run git push heroku main. Let's if our deploy endpoint is active. Open your browser and type:
https://apploid.herokuapp.com/deploy


Debugging failed build

I made this build fail on purpose in order to show you how to debug minor issues. Click on the failed button for details
Image description


This happened before i didnt add my Heroku api keys and heroku app name in the CircleCi Environment variable.Lets do that right now. Go to account settings on Heroku and copy the key and paste in the env varible on CircleCi
Image description

Go to CircleCi, under project settings and add the env

Image description

Lets repush to github
Image description

Now open your browser to the our deployed url refelct on heroku

Image description

Conclusion

I hope this was helpful. Comment in the section below

💖 💪 🙅 🚩
drsimplegraffiti
Abayomi Ogunnusi

Posted on June 11, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related