Skip to main content

Vue.js Deployment

On KloudBean, you get a complete production-ready stack to build and host high-performance Vue applications with ease in just a few steps.

You get:

  • Git Integration: Pull your code on the server
  • SSH Access: Access to the server to run commands manually and using ADM tool for quick deployment
  • File Manager Access: Add, update, and manage files with ease

Launch New Vue Application​

note

If you already have a server and wish to launch an app on it, go to Applications → Add Application and add a Vue app on the existing server.

In this example, we will create a brand new server.

In order to launch your first Vue app on a new server, navigate to the server provision page:

  1. Select Cloud Provider (your choice)
  2. Select Application → Vue
  3. Select Datacenter with nearest location
  4. Add Application Name
  5. Add Server Name
  6. Select Server size depending on needs (for Vue build, minimum recommended size is 2-4GB)

Vue Launch Step 1

  1. Click on "Launch" button and proceed with the payment process (trial or payment)

Once payment is completed, server with Vue app provisioning will be initiated.

Wait for a while; it will take 5-7 minutes to create your server, configure, and deploy a high-performance web stack.

By default, on a new server you will get the following stack versions:

  • Node: 20.X+
  • npm: Latest
  • nvm: Latest
  • MariaDB: 10.6+ (optional)

Access Application Administration​

Once your server is ready, in order to access the Vue app, select "Apps" from the header menu to go to the Applications page.

On this page, you will see your application in active status.

Vue Launch Step 2

Click on it to navigate to "Application Administration" → "Access" section.

On this section, you will see:

  1. Application default access URL
  2. Server public address to point your custom domain to it

Vue Launch Step 3

Deploy Your Code​

The next step is to deploy your code.

In order to deploy your code, navigate to the "Code Delivery" tab.

Here, on the first tab → "Git Deployment":

  1. Click on "Enable Git Integration"
  2. Copy SSH public key and add to your SCM provider (GitHub, GitLab)

Vue Deploy Step 1

  1. Copy your repo URL and add here in "Git Repository URL", select branch and "Clone Repository"

Vue Deploy Step 2

In this example, I'm going to deploy an example Vue app:

[email protected]:jack-kloudbean/vue-example-app.git

Read the detailed guide on connecting git.

Once the repo is cloned, the next step is to run the deployment. Click on "Pull & Deploy".

Vue Deploy Step 3

Once you click it, it will initiate the build process automatically by doing the following at the backend:

Vue Deploy Step 4

  • Take latest repo pull
  • Enabling bean.conf for configuration like Node version, app source directory, and build command
  • Setting required Node version
  • Installing packages
  • Making build
  • Deploying it to web root directory

Updating Bean Configuration File​

If you need to make any change in bean.conf, you can access it using File Manager or optionally using shell.

Navigate to the third tab "FileManager" and click the "Launch FileManager" button to open it in a new tab.

Once you are in the file manager, in the vue-src directory you will see the bean.conf file.

Vue Bean Conf Step 1

Updating bean.conf​

  1. Locate the bean.conf file, or create a new one if it doesn't exist.
  2. Double-click to edit it. Once the editor opens, update the required variables.

The file will have the following configuration. This is the default settings, where you can change them as per your project requirement if needed:

NODE_VERSION=20.18.0
INSTALL_CMD=npm install
BUILD_CMD=npm run build
APP_DIR=/

Vue Bean Conf Step 2

  1. Once updated, click on the "Save" icon on the top right corner of the editor, and it will be saved.

After saving this, now when you run Build by CI/CD or by manually triggering "Pull & Deploy", your build process will use this updated configuration from bean.conf.

View Build Logs​

Once the build process starts, you can view build logs in live mode. In order to view logs, click on the row of your deployment.

Vue Logs Step 1

Once you click on it, it will open a prompt with the logs of that particular build.

Vue Logs Step 2

In the logs, you can also get information about:

  • Current branch
  • Latest commit
  • Author
  • Files in latest commit

This information is useful to get the info about the commit.

Deployment Using ADM Tool (Application Deployment Manager)​

Application Deployment Manager (ADM) is one of KloudBean's features which enables you to deploy your app quickly by just executing one command. It supports all Node and Python-based applications.

In order to perform deployment using the ADM tool, you have to access your server using shell.

Read the detailed guide on how to SSH server on KloudBean: Getting Server Access Credentials.

Once you are connected to the server, run the following ADM command:

sudo adm

or

sudo adm <app_system_user>

to directly execute for the required application.

Vue ADM Step 1

If you run this command without app_system_user, then you will have to select the app by providing its number in the prompt and click hit enter.

It will start the deployment process with the logs and progress detail on the shell screen.

Vue ADM Step 2

Next Steps​