How to Install Vue CLI on Ubuntu 20.04

/ Category: Tutorials, Ubuntu / Comments: None

how to install vue cli on ubuntu 20.04
Spread the love

VueJS is a popular JavaScript framework for building interactive web application user interfaces. It builds on top of standard HTML, CSS, and JavaScript, and is very easy to integrate with other projects and libraries. Vue CLI is a complete Vue development package.

In this tutorial, we will show you how to install Vue CLI and create a VueJS project on your Ubuntu 20.04 server.

Prerequisites

  • A Ubuntu 20.04 VPS with root access enabled or a user with Sudo privileges.
  • Install Node.js version 8.9 or above (v10+ recommended)

Step 1: Log in via SSH and Update your System

First, you will need to log in to your Ubuntu 20.04 server via SSH as the root user:

ssh [email protected]_Address -p Port_number

You will need to replace ‘IP_Address’ and ‘Port_number’ with your server’s respective IP address and SSH port number. Additionally, replace ‘root’ with the sudo username if necessary.

You have to make sure that all Ubuntu OS packages installed on the server are up to date. Run the following commands to upgrade all installed packages on your server:

apt-get update
apt-get upgrade

Step 2. Install Nodejs and NPM

Vue CLI comes as an NPM package. The first thing you need to make sure of is that Node.js and NPM are available on your system.

By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add the Node.js official repository to your system.

Add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_16.x | bash -

And install the Node.js from the added repositories running the following command:

sudo apt-get install nodejs

Once NodeJS has been installed, you can verify the installed version of Node.js with the following command:

node -v

You should get the following output:

v16.14.2

Once Node.js is installed, update the NPM to the latest version using the following command:

npm install [email protected] -g

You can now verify the npm version with the following command:

npm -v

You should get the following output:

8.6.0

Step 3. Install Vue CLI

Now install the Vue CLI package using NPM. This package helps to set all tools required to create a new project in VueJS.

npm install -g @vue/cli

Check the version with:

vue --version

You should get the following output:

@vue/cli 5.0.4

Step 4: Create your VueJS Application

You can create your VueJS application with the following command:

vue create my-project

You’ll be prompted with the following code:

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

You can choose the default preset Vue 2 or Vue 3 project which comes with a basic Babel + ESLint setup or select “Manually select features” to pick the features you need.

Once the installation is finished, you should get the following output:

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve

Change the directory to the VueJS application:

cd my-project

Now you need to start your VueJS application with the following command:

npm run serve

You should get the following output:

 DONE  Compiled successfully in 10295ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.10:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

By default, the VueJS application starts on port 8080.

Step 5: Create a Systemd Service File for VueJS App

Next, you need to create a systemd service file to manage the VueJS service. You can create it with the following command:

nano /lib/systemd/system/vuejs.service

Add the following lines:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/root/my-project
ExecStart=npm run serve -- --port=8080

[Install]
WantedBy=default.target

Save and close the file, then reload the systemd service with the following command:

systemctl daemon-reload

Next, start the VueJS service and enable it to start at system reboot with the following command:

systemctl start vuejs
systemctl enable vuejs

You can verify the status of the VueJS service with the following command:

systemctl status vuejs

You should get the following output:

● vuejs.service
Loaded: loaded (/lib/systemd/system/vuejs.service; static; vendor preset: enabled)
Active: active (running)
Main PID: 11730 (npm run serve -)
Tasks: 19 (limit: 2245)
Memory: 37.3M
CGroup: /system.slice/vuejs.service
├─11730 npm run serve --port=8080
├─11743 sh -c vue-cli-service serve "--port=8080"
└─11744 node /root/my-project/node_modules/.bin/vue-cli-service serve --port=8080

Step 6: Access VueJS Web UI

Now, open your web browser and type:

http://your-server-ip-address:8080

You should see your VueJS Application on the following screen:

Congratulations! You have successfully installed the VueJS App using Vue CLI on your Ubuntu 20.04 server.

Of course, you don’t have to install Vue CLI on Ubuntu if you use one of our Managed Hosting services, in which case you can simply ask our expert Linux admins to install this for you. They are available 24×7 and will take care of your request immediately.

PS. If you liked this post on how to install Vue CLI on Ubuntu, please share it with your friends on the social networks using the buttons on the left or simply leave a reply below. Thanks.

Be the first to write a comment.

Your feedback