Deploy a NodeJS Application in Heroku using Wercker Pipeline & GitHub

Upload the code to GitHub Repository and trigger a Wercker pipeline automatically. Deploy the app in Heroku.

In application development, DevOps is extremely crucial. Every company that uses DevOps in its projects. Developer and operations work is made easier using DevOps. We will utilize Git as a version control system in DevOps. Jenkins was used to compile the code in Git.

In this blog, you will learn how to create a GitHub repository, create a Wercker pipeline to deploy a nodeJS (MERN) application on Heroku.

What you will learn

1. Create a GitHub Repository.
2. Push your code to GitHub Repository from the local machine.
3. Create a Wercker pipeline
4. Deploy a NodeJS (MERN) App in Heroku

Now it’s time to go to the tutorial.

1. Create a GitHub Repository

GitHub is a version control and collaboration tool for programming. It allows you and others to collaborate on projects from any location. This course covers the fundamentals of GitHub, such as repositories, branches, commits, and pull requests.

We are going to use a GitHub repository and trigger a Wercker pipeline when you commit a code into the repository.

Let’s create a repository first.

1. Go to GitHub and create an account if you don’t have one or you can log in to the GitHub account.

2. Then click on the profile icon on the top right corner of the GitHub page. And click Your Repositories.

Navigate to repository

Now you can see your all repositories that currently have or maybe there is no repository if you are new to GitHub. No worries..! Let’s create a new one now.

3. Click on the New button. Then you will be redirected to the repository-creating page.

Create new repository

Here you can give a repository name, description, select private or public, and create the repository.

Create new repository

Click Create repository.

Now you can see the repository you created.

GitHub Repository

Cool…!

You have created your repository. Now let’s see how to push our code into this GitHub repository from our local machine. I use my own created project to continue with this tutorial.

2. Push your code to GitHub Repository

You can use the command mentioned in the GitHub repository page after creating the repository. However, I am going to mention all these commands in this step.

1. Go to the folder your code is stored in your local machine.

2. Right-click and open git bash and use the below commands one by one. (Install git bash if you are not installed in your machine)

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <Your Repository HTTPS URL>
git push -u origin main

Wooo..!

Now it’s done. Go to your GitHub repository and refresh the page. Your whole code is there!

GitHub Repository

Now it’s time to go to create a Wercker pipeline.

3. Create an Application in Wercker

Wercker is a Docker-based continuous delivery platform that helps software developers build and deploy their applications and microservices. The business behind Wercker, also called Wercker, was founded in 2012 and acquired by Oracle Corporation in 2017. (Wikipedia)

1. Go to https://app.wercker.com/

2. Create an account if you don’t have an account or log in to the Wercker.

So now you need to create an application first.

3. Click on the plus (+) sign on the top right corner of the Wercker page.

You are able to see select Add Application. Click on it.

Add Application

4. Select GitHub and Click Next

Select SCM

NOTE: You have to log in to the GitHub account after clicking next.

5. Now you can select the repository you were created before and click next.

Select Repository

6. Now click the recommended option and click next again.

Setup SSH Key

7. In the last step. You can confirm your details and Create the application.

Confirm and Create

Nice ….!

Your Wercker application is ready to continue working with you. You will see your application in the following image.

Wercker Application

Before creating the Wercker pipeline, let’s create an application in Heroku to continue our tutorial.

4. Create an Application in Heroku

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

1. First login to your Heroku account or create an account.

2. Click on the New button.

Click New

3. Select Create new app

Create New App

4. Now you can give a name to your app and select a region. After giving your details Click Create app.

Create Heroku App

Now your application has been created in Heroku.

Heroku App Dashboard

Now again let’s move to Wercker. In the created application, now we can create our pipeline.

5. Create the Wercker Pipeline

To create a Wercker pipeline, we need to use a wercker.yml file. If you need more information, you can refer to the official document.

First, let’s build the nodeJS application. We need a wercker.yml file as I mentioned earlier. Go to your local repository in your local machine and create a file named “wercker.yml”.

Use this code to build the application.

box: node
build:  
  steps:    
    - npm-install    
    - script:        
        name: echo nodejs information        
        code: |          
            echo "node version $(node -v) running"          
            echo "npm version $(npm -v) running"

This is one pipeline. The name of the pipeline is “build”. Using this we can run the command “npm install” and print the node version and npm version we used. The image we are using is “node”.

Not save and commit and push this code to GitHub Repository. You will see the Wercker pipeline is started to run automatically because it has been already created the pipeline named “build”.

Click on Workflows to see the pipeline.

Current Pipelines

Use the following command to push the local repository to the GitHub repository.

git add .
git commit -m "build the app"
git push

After pushing the code. You can see the pipeline has been started.

Pipeline “build” triggered

Cooooool…!

Now let’s see how to deploy the app in Heroku using a pipeline. Attach the following code segment to the “wercker.yml” file and save.

deploy:  
  steps:    
    - heroku-deploy:        
        key: $HEROKU_KEY        
        user: $HEROKU_USER        
        app-name: $HEROKU_APP_NAME

Before pushing the code to GitHub, we must create the next pipeline named “heroku-deploy” and specify variables inside the pipeline.

The final “wercker.yml” file should contain these code segments.

box: node
build:  
  steps:    
    - npm-install    
    - script:        
        name: echo nodejs information        
        code: |          
            echo "node version $(node -v) running"          
            echo "npm version $(npm -v) running"
deploy:  
  steps:    
    - heroku-deploy:        
        key: $HEROKU_KEY        
        user: $HEROKU_USER        
        app-name: $HEROKU_APP_NAME

1. Go to Workflows and click add new pipeline.

Add new pipeline

2. Name the pipeline as “heroku-deploy” and click on Create. Make sure to select the Hook type as “Default”

Create new Pipeline

Now our next pipeline has been created. But here we must specify some variables mentioned in the “wercker.yml” file.

Let’s find these values.

HEROKU_KEY

1. Go to Heroku

2. Click Profile Icon

3. Go to Account Settings

Navigate tp profile and Select Account Settings

4. In the account Tab, Scroll down and find API Key. Click Reveal

Navigate to Account

API Key — Heroku

Copy the API key and paste it into the Wercker pipeline we created now.

Add HEROKU_KEY

HEROKU_USER

Heroku user is the user email address used to create the Heroku account.

Add it into the Wercker pipeline same as before.

Add HEROKU_USER

HEROKU_APP_NAME

This is the app name of the app we created in Heroku.

Heroku App Name

Now you know what you must do. Yes! Add it in the pipeline variables.

Add HEROKU_APP_NAME

Now it is done. But there is another step.

Add the pipeline sequence in Editor.

1. Go to Workflows.
2. Click on the plus button in the Editor area and select the pipeline you just created.

Click the + Button

Click the pipeline and Add

Added Pipeline

Now all ready to go. Push your code to GitHub repository. Yeah…! The pipeline triggers and deploy it in Heroku Automatically.

Wercker Pipelines — Heroku Deploy

Heroku Build

App has been successfully deployed in Heroku.

Success Pipeline

Now you can access the application by clicking “Open app” in Heroku.

Sample App has Deployed

Congratulations…!

Now you are ready to work with Wercker pipelines. You can refer to more details in the official document.