Plesk CI/CD: Automatic deployment of a Node.js app (+ automatic frontend build)

With this Plesk CI/CD workflow you can host your Node.js app incl. frontend on your Plesk server completely automated. With automatic build of your frontend app, tedious work is a thing of the past.

No matter if Vue, React, Angular & Co.: Deployment is always done via npm run build, then drag everything to the server and possibly restart Node.js app. This is all very time consuming, especially for small changes. With this Plesk CI/CD workflow and GitHub Actions, it’s all fully automated.

Even simple static websites can be deployed automatically after a push to the repository.

What does CI/CD mean?

CI/CD stands for Continuous Integration/Continuous Delivery. It refers to processes that allow developers to deliver changes to software continuously and automatically. A simple example: If a small code change is made to an existing application, it should be automatically deployed to a development or production server after commit and push to the repository.

Some processes are executed automatically in the background, such as compiling and executing the unit tests. Since various tasks are executed one after the other, this is often referred to as a CI/CD pipeline.

Requirements

To implement a Plesk CI/CD workflow for Node.js apps or frontend applications with Node, two requirements must be met:

  • The Plesk Git extension must be installed in your Plesk (by clicking on Extensions > “Git”).
  • Also, the code of your website/app must be in a GitHub repository

Set up Git repository in Plesk

If you want to deploy frontend and backend of your app with Plesk I would create two repo instances in Plesk. Both can of course point to the same remote repository. This way you have the possibility to exchange only one component – only frontend or only backend.

Git repositories for Plesk CI/CD workflow
Git repositories for Plesk CI/CD workflow

Backend

In my case I provide the complete content of my main branch for the backend. Via the .gitignore I controlled that no frontend builds appear on this branch. All files are automatically provided in the root directory of my application in Plesk.

For everything you need to know about hosting a Node application, check out my in-depth post on Node.js app hosting with Plesk.

Earn money with your website or blog

Frontend

The second repo instance in Plesk is for the frontend only. Here, the complete content of the build branch is automatically provided in the /public subfolder. So the public folder contains the complete content of your frontend build (no matter if Vue, React, Angular, …).

To make access to these static files work the following code is implemented in my index.js of my Node application:

// handle production
if (process.env.NODE_ENV === "production") {
  // static folder
  app.use(express.static(__dirname + "/public"));

  // handle SPA
  app.get(/.*/, (req, res) => res.sendFile(__dirname + "/public/index.html"));
}

If you are using a private GitHub repo, here’s how to clone a private GitHub repository with Plesk.

Up to this point, our files are deployed when we manually execute the pull. So if we commit locally and push it to our remote repository we would always have to log into Plesk and click the “Run Pull Now” button. Also, if we make changes to the frontend, a build will not be executed yet. We are configuring these automations now.

GitHub Actions: Create workflow for automatic build

When we develop locally we always start a development server on our machine. For the live run (production) we have to run a command like npm run build or similar. Now we want to automate this process. For this we use GitHub Actions. GitHub allows us to create pipelines/workflows with configuration files to realize such automation.

Go to your GitHub repository on the “Actions” tab and click on “set up workflow yourself”.

GitHub Actions: Create CI/CD workflow
GitHub Actions: Create CI/CD workflow

You get this editor that provides a file in YAML format.

GitHub Actions: Node.js Workflow Editor
GitHub Actions: Node.js Workflow Editor

I have created a template for you to automatically run our build on a push to any branch (master in this case). So when a push is registered the automated build should be executed. You can set the Node.js version via line 17.

In my fullstack applications, I always organize the frontend in a subfolder client. For React and Vue I have tested this workflow. For similar frameworks this Plesk CI/CD workflow will work as well. For details on the build, it’s best to just check the documentation of your frontend framework.

Earn money with your website or blog

In line 27, an npm i is executed first, followed by an npm run build. The --prefix client parameter causes the commands in the subfolder for our client to be executed.

In the last step we push the complete build to the branch build of the same repository. The content is provided in the server/public subfolder.

# This workflow will do a build of your frontend and automatically push it to a build branch
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI/CD Workflow with frontend

on:
  push:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: Build Frontend
      run: npm i --prefix client && npm run build --prefix client
      env:
       CI: false
    
    - name: Push to build branch
      uses: s0/git-publish-subdir-action@develop
      env:
        REPO: self
        BRANCH: build # The branch name where you want to push the assets
        FOLDER: server/public # The directory where your assets are generated
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
        MESSAGE: "Build: ({sha}) {msg}" # The commit message

As soon as you save the workflow file, the job is automatically executed and your frontend is built and pushed to the build branch. This can take 1-2 minutes depending on the frontend.

Run GitHub Workflow
Run GitHub Workflow

You can add your own jobs to this workflow. For example, the execution of automatic unit tests fit in here perfectly.

Webhooks: Automatically retrieve new pushes

What we have so far: Frontend and backend are now hosted in the right directories on our Plesk server and our frontend is built automatically with GitHub Actions. The only thing missing for a complete Plesk CI/CD workflow is that new pushes are automatically detected and provisioned by Plesk. For this we use webhooks.

In the repository settings in Plesk you will find a webhook URL that you have to copy out.

Plesk Git Repository: Read Webhook URL
Plesk Git Repository: Read Webhook URL

Then go to the repository settings in your GitHub repo under Settings > Webooks and click on “Add webhook”. Here you add the URL and leave all other settings at their default values.

GitHub: Add webhooks
GitHub: Add webhooks

Done! All parts of our automated Plesk CI/CD workflow are done. Now when you make a change locally, commit it and push it to the main branch in your remote repository, the GitHub action is executed and the frontend is built. Once the build is pushed to the build branch automatically, Plesk detects via a ping on the webhook URL and deploys the changes automatically.

Related Posts
Leave a comment

Your email address will not be published.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

This can also interest you