Setting up a CI/CD on CPanel for a NuxtJs project.

Buddy.works, CPanel and NuxtJs

Recently working on one of our released products which is deployed on a shared hosting server, I noticed how it is really tiring and annoying it could be generating and manually deploying to CPanel for each small fixes and change I make. The project I was working on is a NuxtJs project so typically after I finish changing or fixing something I had to build the project, upload it to the server using CPanel’s file manager and replace the old files. This soon became really annoying and I started my search for a way to implement a CI/CD pipeline on my server.

Adventure time

After a few google searches, I noticed the lack of information on how to set up a CI/CD pipeline on CPanel not just for NuxtJS but also for other frameworks. After a while, I found a tutorial video that explained how to set it up. a CI/CD for Nuxt on CPanel. But this video required you to remove the dist folder from .gitignore and push it to GitHub, which for some reason did not sit right with me. But I found one good tool from this video which was buddy.works.

Buddy is a CI/CD tool with more than 100 actions that will help you set up your CI/CD pipeline. It is really easy to get started with and contains a generous free plan that allows you to create 5 projects and run 120 pipeline runs every month. After creating an account on Buddy, I created my first project and connected it to my Github project. After this, I created a pipeline for my project.

Creating a pipeline on buddy

I named my pipeline, set it to be triggered on every push, and set it to deploy from the master branch of my repo. After this, I started adding actions to this pipeline. The first action I added was a NodeJs action which loads a docker image with preinstalled NodeJs that will be used to run node tasks. Then I added to command for installing and generating my static files .

Adding nodejs actions

After generating the static files, I needed another action to move these files to my CPanel hosting location. Luckily buddy has also an FTP action that can be used to move the generated files to the CPanel hosting. I added this action after the NodeJS action and gave it the dist folder as the source folder and public_html as the destination folder.

Add source and destination folders

I also had to create an FTP account from CPanel to connect with Buddy. To do this you can search for FTP from CPanel and create a new credential and enter them in the fields in the above picture. After this, I also added two actions that send emails to me when something goes wrong and the pipeline stops and when the pipeline starts working again.

Email actions

I now saved my action, made some changes in my project, and pushed them to my repo fingers crossed. And with luck, everything got deployed within a few minutes and I had now a fully working CI/CD pipeline.

Me happy now

--

--

--

A web and app developer based in Addis Ababa, Ethiopia. I work with technologies like VueJs, Laravel, and ExpressJs. Website: https://abdulazizy.tech/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Developing A Full Microservices Application Stack

Declaration of Homestead

First blog — Taking a first step to become a web developer

Setting My Hardware Up for a Life of Solitude

A Brief Introduction to C# Programming

Handy-Shellcode | picoCTF 2019

BitSeeFull Airdrop

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdulaziz Yesuf

Abdulaziz Yesuf

A web and app developer based in Addis Ababa, Ethiopia. I work with technologies like VueJs, Laravel, and ExpressJs. Website: https://abdulazizy.tech/

More from Medium

Publish NPM Package to Git

Build a Video Conferencing App using SignalWire and Vue 3

Express vs Koa

Three steps to install WordPress LAMP on Ubuntu