When we need a live (development, staging, production, etc.) environment for our Vue.js project, we have to set up a server where we will deploy our app. This article will walk you through this process.

Thanks to Nginx, for a Vue.js project, the process is not so hard. First, we will set up the server on the Ubuntu operating system.

Preparing the Server

First of all, we should log in to the server

ssh username@ipAdresss

Then we should update apt package addresses.

sudo apt update

Then install the Node

curl https://deb.nodesource.com/setup_16.x | sudo bash 
sudo apt install nodejs

Preparing the Vue.js Project

We should create an “apps” directory in the “home” directory and clone our project from the remote repository.

cd ~
mkdir apps
cd apps
git clone https://github.com/my-app.git

Go to the project directory, install the relevant packages for the application and build it.

cd {project_folder}
npm install
npm run build

If the process goes successfully, the “dist” directory should be created in the root directory. We will use the “dist” directory later in the Nginx configuration.

Installing and Configuring Nginx

Installation

sudo apt install nginx

To make sure nginx works, we should execute the following command:
service nginx status.

Configuration

Go to the following directory:

cd /etc/nginx/sites-enabled

You will see the default configuration; you can see the insight and then delete

sudo rm -rf default

Now let’s create a new file for our project with any editor of your choice.

sudo vi my-app.ge

And write the following configuration.

server {
    listen      80;
    # change example.com with your domain name
    server_name example.com;
    charset utf-8;
    # change {{app_root}} with your application path
    root    {{app_root}}/dist;
    index   index.html index.htm;
    # Always serve index.html for any request
    location / {
        # change {{app_root}} with your application path
        root {{app_root}}/dist;
        try_files $uri /index.html;
    }
    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

Save the file:

:wq

Check the configuration syntax

sudo nginx -t

Restart the server

sudo systemctl restart nginx

Now, if we visit our website at http://example.com, we can see our application. But if we want to consider our work done, there is still one little thing left - moving our project to the HTTPS protocol.

Setting up an SSL certificate using LetsEcrypt.

To set up an SSL certificate on our website, we will be using LetsEncrypt. 

We will need to install several packages on the server to do that.

First, let’s install Certbot:

sudo apt install certbot python3-certbot-nginx

Then we should execute the following command:

sudo certbot

And follow the Certbot instructions. Once you go through all of them, you will already have set up an SSL certificate for your Vue.js app and can access your website over HTTPS.

Summary

To sum up, the process of setting up a server and an SSL certificate to build and deploy your Vue.js app on a live environment is the following:

• Installing the relevant packages on a server
• Cloning the project and running the build process
• Configuring Nginx
• Setting up an SSL certificate using LetsEncrypt