How to Deploy NodeJs-express app with a static front-end in a pug on Elestio
Tags: opensource, elestio, node, express
Published: 2023-10-11 12:16:31

---
title: How to Deploy NodeJs-express app with a static front-end in a pug on Elestio
published: true
date: 2022-11-21 09:41:21 UTC
tags: opensource, elestio, nodejs, express
canonical_url: https://elestio.hashnode.dev/how-to-deploy-nodejs-express-app-with-a-static-front-end-in-a-pug-on-elestio
---

So you made a static full stack frontend pug with nodejs backend application and want to deploy it to the cloud 🚀

You probably heard about Kubernetes (and all its complexity) or various options to deploy your apps like Heroku, Render Fly, or Railways. They all have something in common, those products are building your own source code on every commit from your GIT repository.

Elestio is doing the same **but different!** Instead of deploying your app to a shared cluster, we deploy to dedicated VMs.

In this tutorial, we will deploy a simple NodeJs-express app with a static front-end in a pug that the backend in nodejs was created using the npm init command. You can use any existing application, create a new one with npm init, or simply fork and use our example by following the [**_link_**](https://github.com/elestio-examples/nodejs-express-pug?ref=blog.elest.io).

> _To learn more about the elestio CI-CD, go_ [**here**](https://docs.elest.io/books/cicd-pipelines/page/overview?ref=blog.elest.io).

If youre new, sign up for [_Elestio_](https://dash.elest.io/?ref=blog.elest.io), otherwise, login to your existing account.

#### Deploy a NodeJs-express app with a static front-end in a pug with CI/CD to the cloud

#### Step 1:

Go to CI/CD from the left sidebar.

#### Step 2:

Now, select the deployment source.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005794551/6481e298-1e84-48a7-bdf1-1c4f932f37d0.png)

In this tutorial, Im deploying using GITHUB, but you can also use GITLAB if you have a project there.

#### Step 3:

Select the repository.

If you have already authenticated your GITHUB or GITLAB account in ci-cd for repository access, you can choose the desired repository to deploy directly. Otherwise, you must first authenticate your GIT account with elestio ci-cd for repository access.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005797225/d185c392-4288-4a3c-b82d-8c7314d7f06b.png)

#### Step 4:

Choose Deployment Targets

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005799580/e37fc3bc-f0da-4f0e-90ef-292819d3f2be.png)

Elestio offers two types of deployment targets **Deploy on a new VM** and **Deploy on an existing VM**.

You are allowed to set up n pipelines on each elestio Ci-CD target/VM. According to the project configuration you select and the project youre deploying, the number of pipelines varies.

If you want to deploy these projects as a pipeline on a new Target/VM or dont have any installed targets, choose Deploy on a new VM. If you already have any installed or previously configured ci-cd targets/VMs, choose Deploy on an existing VM, and then choose the existing target from the targets dropdown.

Follow the steps below only if you select **Deploy on a new VM** , otherwise click the next button to proceed.

> _CI/CD Pipelines by Elestio are available with our 5 cloud partners (AWS Lightsail, Digital Ocean, Vultr, Linode & Hetzner) in 85 locations over 27 countries but also on any cloud (AWS, Azure, Google, Oracle, ) and on-premise with_ [_BYOVM._](https://doc.elest.io/books/cloud-providers/page/byovm-bring-your-own-vm?ref=blog.elest.io)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005801098/dbbc7e91-1dd6-448d-a46d-6e72bf3245a6.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005803291/8f3620a6-f255-40b4-8022-eca631ce01b5.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005804884/14b05f2b-b871-43fa-aad7-7141007ea29a.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005806357/1b0d1220-d6b7-46c1-8335-0209387eebbf.png)

> _If you want to deploy it with a different name and a different project, you can customize it. By default, we configure it with a dynamic target name and the current project._

#### Step 5:

Configure your Project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005807886/a2c17dd0-4e52-4a0e-a62f-08d53332dff5.png)

You can configure the project details by filling up the project name, branch, run time, version, framework, and root directory.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005810241/7931acfd-e6ae-4acd-a95c-2f18101c4864.png)

You can configure your project install, run, and build commands in the Build and output setting.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005811666/ec118e34-3901-4d31-94d4-63b9462e04c7.png)

The configuration of life cycle scripts is always optional; they should only be used if you want to execute a specific command before and after building your project. Otherwise, leave them empty.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005813200/08ee7de1-3f49-4b0e-8f22-7ef1edc0e4f1.png)

You can list all of your projects API keys and secrets here if they were saved in ENV

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005814726/06d08f02-2288-43ba-b7c2-6932532dbc56.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005816255/deb20a0e-0bb4-4667-8b5d-25265138a96e.png)

The final step is to configure the exposed port and reverse proxy settings. You can specify the port on which your project will run here.

> _If your project includes_ **_elestio.yml_** \*, Elestio will auto-fill all of these fields. As in this tutorial, were using our NodeJs elestio example, so you can see in the above images that all of our fields are auto-filled.\*

Refer to these links to learn how to create our own [**_elestio.yml_**](https://docs.elest.io/books/cicd-pipelines/page/create-your-own-template-elestioyml?ref=blog.elest.io) for the project.

A sample elestio.yml for NodeJs is shown below. check it out on [**_github_**](https://github.com/elestio-examples/nodejs-express-pug/blob/main/elestio.yaml?ref=blog.elest.io)

```
config:
    runTime: 'NodeJs'
    version: ''
    framework: 'NoFramework'
    buildCommand: ''
    buildDir: ''
    runCommand: 'npm start'
    installCommand: 'npm install'
    icon: "public/images/nodejs.svg"
    screenshot: "public/images/screenshot.jpg"
ports:
  - protocol: "HTTPS"
    targetProtocol: "HTTP"
    listeningPort: "443"
    targetPort: "3000"
    targetIP: "172.17.0.1"
    public: true
    path: "/"
    isAuth: false
    login: ""
    password: ""
environments:
    - key: 'ENV'
       value: 'production'
    - key: 'PORT'
       value: '3000'
webUI:
  - url: "https://[CI_CD_DOMAIN]"
    label: "Website"

```

#### Step 6:

Click the **_Create CI/CD pipeline_** button to deploy your pipeline.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005818546/f740d16a-8a80-418a-9431-1afeb6aa0fd4.png)

_In a couple of moments, your application was successfully deployed on elestio 🚀._

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005821091/4f2ac6ff-c75e-437d-86a2-65b1caebacca.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697005822930/7e9c73f6-9a0e-4b7a-aede-bc3d43c4cce1.gif)

You can now view your deployed URL and access your application by going to desired application pipeline details.

Please let us know by contacting our support [**_email_**](mailto:support@elest.io)or [**_ticketing_**](https://dash.elest.io/support/creation?ref=blog.elest.io)system if you give it a shot and encounter any problems or if anything goes wrong.

Join us on [**_discord_**](https://discord.gg/4T4JGaMYrD?ref=blog.elest.io) to know more.

_Originally published at_ [_https://blog.elest.io_](https://blog.elest.io/how-to-deploy-nodejs-express-app-with-a-static-front-end-in-a-pug-on-elestio/) _on November 21, 2022._