Deploy Vue app

How to deploy a Vue app to your server

This guide will walk you through deploying a Vue application to your server and shows what a simple but very effective workflow looks like. Let's automate your deployment process for your Vue projects!

Deploying with Launchdeck

Launchdeck is an automated code deployment tool that allows you to easily deploy a Vue JS app to your server. You can write configuration files, define custom commands and deploy automatically whenever you push.

Our basic plan is free, includes all features, and allows you to deploy 1 project as often as you'd like!

Create a project

Let’s get started by creating a new project and linking your Git account. All repositories within your account will be retrieved and shown as a list, from which you can now select the one that you’d wish to use. When creating the new project, Launchdeck will automatically add a webhook to your repository so that when you push new commits, they'll show up in Launchdeck automatically.

You can connect to a repository on any of the main hosting providers - Bitbucket, GitHub, GitLab or if you host a repository elsewhere you can configure it manually.

Connect your repository

Configure build commands

The next step allows us to define commands which will be executed in an isolated docker container - this is the build step. Hit the button “Auto suggest build automation” and we will automatically suggest a build config based on the contents of your repository.

If you’re using the Vue CLI you’ll only need to add the following build commands. Please note that there also is a input and output file specified. This will be used to cache the node_modules folder and prevent you from installing the dependencies from scratch with every deployment. This will save you a ton of time!

build:
  - cmd: npm install
    input: package.json
    output: node_modules
  - npm run build

To run tests (defined as the test script in package.json) add the following command:

npm test

All files generated using these build commands will be uploaded to the server. If you use the Vue CLI you'll want to deploy just the browser bundle which is generated inside the dist directory. To "pull" everything inside this folder up to the working directory and delete everything else, use:

pull-up dist

Build commands Vue app automation

You’ll find more information on how to set up and use build commands on our docs page about build automation.

Configure a server

Now let’s tell Launchdeck where to upload your Vue app.

Hit ‘+ new server’, select the protocol, and enter the credentials to your server.

All the ins and outs on how to set up a server can be found below in our server setup docs;

Deploy for the first time

We’re now ready to start our first deployment. Click ‘create new project’ to confirm the settings and add the project. In the project overview, you can now start the build. The code will be cloned from your repository and prepared for you to publish it. Hit ‘Publish’ and your Vue app is live!

If we then commit changes to our repository, the commit will automatically appear in your project overview where you’ll be able to upload and publish your new version with the push of a button. If anything goes wrong, you can simply roll back to the latest working version.

That’s all! By using Launchdeck to deploy your Vue application, you’ll never have to upload a new version or run commands manually. Just hit “publish”, and Launchdeck will deploy your app.

Overview Vue app deployments