To deploy our application, we will need to deploy to our own computers. There are many services out there, such as AWS, Azure, Netlify, and so on, which will have their own ways of deploying. In our case, we are going to deploy out to Heroku.

Follow these steps to do so:

1. We will need to get a Heroku account if we don't have one already. Head over to https://id.heroku.com/login and choose Sign Up at the bottom of the form.
2. Log in to the new account and click on the top-right button that states New.
3. In the dropdown, click Create new app.
4. We can call the app anything we want. Type in an application name.
5. Head back to our CircleCI dashboard and go back into the settings. Create a new context called deploy. 
6. Add a new variable called HEROKU_APP_NAME. This is the app name that we set up in step 3.
7. Head back to Heroku and click on the user profile icon in the top right. From the dropdown, click on Account Settings.
8. You should see a section called API Key. Click the Reveal button and copy the key shown.
9. Head back to our CircleCI dashboard and create a new variable called HEROKU_API_KEY. The value should be the key we got in step 8.
10. Add a new job to our config.yml file. Our job should look something like the following:

version : 2.1
orbs:
  heroku: circleci/[email protected]
jobs:
  deploy:
    executor: heroku/default
    steps:
      - checkout
      - heroku/install
      - heroku/deploy-via-git:
          only-branch: master
workflows:
 version: 2
 build_and_deploy:
 jobs:
   - build:
       context: build
   - deploy
       context: deploy
       requires:
         - build
   

What we've done here is add a new job to our workflow, which is the deploy job. Here, the first step is to add the official Heroku orb to our workflow. Next, we created a job called deploy and we went through the steps set out by the Heroku orb. These can be found at https://circleci.com/orbs/registry/orb/circleci/heroku.

11. We need to deploy our build back to GitHub for Heroku to pick up the changes. To do this, we need to create a deploy key. Run the ssh-keygen -m PEM -t rsa -C "<your_email>" command in the command prompt. Make sure that you don't enter a password.
12. Copy the key that was just generated and head into the GitHub repository's Settings.
13. Click on Deploy Keys in the left navbar.
14. Click Add a deploy key.
15. Add a title and then paste the key that we copied in step 12.
16. Check the box that states Allow write access.
17. Head back into CircleCI and click on the project settings in the left-hand navbar.
18. Click on SSH Permissions and then Add SSH Key.
19. Add the private key we created in step 11. Make sure to add github.com in the Hostname section.
20. With this added, add the following lines to the config.yml file for our build job:

steps:
  - add_ssh_keys:
    fingerprints:
      - "<fingerprint in SSH settings>"

21. At the end of our build, add the following step:

- run: git push

One issue that we will have is that our application wants to work over HTTPS, but Heroku requires a pro license for this. Either opt in for this (this is a paid service) or change our application so that it only works with HTTP.

By doing this, we have successfully set up a CI/CD pipeline that can be utilized almost anywhere. We also added an additional security check to make sure that we are deploying safe code. With all of this under our belt, we are able to build and deploy web applications written in JavaScript!