CI/CD NodeJS + CircleCi + Heroku Deployement
Tags: node
Published: 2022-06-11 13:24:16

_
Let's discuss about CircleCi and Continuous Delivery/Continuous Deployment.
Check out my [CICI with Jenkins](https://dev.to/drsimplegraffiti/cicd-using-jenkins-j83), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uj2lcf6v3ww9gnd70hwv.PNG)
 

---

##### Let create our server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6kmqm027ccw45s80e8g.PNG)

---

#### Let's edit our `package.json` and `.env` files
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5ei0s9fersp6jo81ou2.PNG)

---

#### Now we start our server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm12c0imap6a08g1uvy2.png)

---
In this section 2 we will deploy to Heroku using the Heroku cli
#### Log in to Heroku
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adtdujhger83moopjf3t.PNG)

---

#### Create Heroku app
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pizyc5os3ropujlzwu8t.png)

#### Let push our codes to Github at this stage
```javascript
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
```
 
#### Next we connect heroku to our `apploid app`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u55dd828ur3j8o0n0m93.png)

##### Let's add Port to Heroku Environment variable
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5gbp73cwyb8r3s506nc.png)

---

#### We can deploy to Heroku 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i883u1i5jxa35frbstaq.png)


---

#### Open app on a browser
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcqz9677c4vyx7oy4bn9.PNG)
 
Result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1roj5m2074b8bhv4j76.PNG)


---

In this section, let's setup our circle with github. Head up to [circleci](https://circleci.com/vcs-authorize/) and login with `Github`
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yrr6bm190206etxurnf.png)

---

##### Let's setup and connect our app in CircleCI
Click on the setup project button
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0luodmpvhem1kf5ls9k.png)

#### Choose a deployment method
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj8ocww0cu5ts96z2swv.png)

---

#### Choose deploy with Heroku
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8oglujb6zjctd4l7v7u.png)


---

#### Set your env config on circle ci
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmjrp7znqnkwfspk0xxn.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqxatmcrqzvpnz9kxvay.png)

---
  
#### Click and run
Let me copy the config file and do some editing on the `yml` file
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92wjov0vjzfzkl0yen2k.png)
 
 ---

#### Setup the `config.yml` file  
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af2mqus160w4u6r0c7p6.png)
 

Now click on commit and run. Lets see if our build was successful
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utypjinik8r6jit9smr1.png)

---

#### Let's add another router called deploy
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uac3prubjoyskhge5u7q.png)
  
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axjp4o9tlfyixcuc0az8.png)

---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brmb70vkx8q2tl60ng3n.png)

#### Go to CircleCi, under `project settings` and add the env
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf9zf57tbr4kriialz0v.png)


Lets repush to github
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfeloxqbp3o0e9aw4msx.PNG)

#### Now open your browser to the our deployed url refelct on heroku
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivdsaqywi2rizgcj13ua.PNG)
 

#### Conclusion
I hope this was helpful. Comment in the section below