How Do I Install Vue.JS 2019

Reading Time: 5 minutes

In this article, we review the history, use, installation, and implementation of Vue.JS in a web development environment. Vue.js is an open-source, JavaScript progressive framework that is primarily used for building user interfaces and single webpage applications.

What Exactly Is Vue.JS?
A Short History

Unlike other monolithic frameworks, Vue.JS is designed from the ground up to be incrementally adoptable. Its core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Web Applications. 

Vue.js was created by Evan You, a Google developer, who after working on multiple Angular.js projects, concluded that:

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.”

“Between the Wires | Evan You”. Between the Wires. November 3, 2016. Archived from the original on June 3, 2017

The first appearance of Vue source code commits date back to July 2013, and the official release was in February of  2014.

Why Use Vue.JS

  1. Because Vue uses an HTML based template pattern which allows for the rendering of webpage DOM elements to be attached to the underlying Vue instance’s data.
  2. All of the Vue templates use valid HTML that can be interpreted by a normal browsers.
  3. Lastly, because Vue is open-source, the support community is extensive. Because the user community is large, there exists a quick way to find solutions for bugs that may be encountered in your Vue application.

In the picture below, you can see how “Standard Web Sites” work.

standard

A request is made from a browser to a server, and the server sends back the data to the browser. But what happens if you click on another link on that site? 

The cycle is repeating, so each time you click on a link: a new request is sent to the server, which then sends the data back to the browser and shows the updated content. 

Can this be bypassed? 

Yes, it can !!

The way that data travels when using Vue is the same as on the image above but, with one significant improvement. Once the site is loaded in a browser, all of the other requests that are made on the page are done in DOM. This means each request using Vue, can reach all of the other elements easily.

Vue compiles the templates into a virtual Document Object Model or shortened “DOM”, which allows Vue to render page components in its memory before updating the browser. Combined with the ability to react to a platform (mobile, tablet or desktop), Vue is able to calculate the minimal number of components that need to be rendered and then applies the minimal amount of manipulation needed when the app changes it state. This way Vue makes sites feel smoother without additional complexity. 

Getting Started with Vue JS on Liquid Web Servers

Requirements or Dependencies?

You can utilize Vue.JS on any type of server but, this tutorial focuses mainly on using a Centos 7 server with cPanel. Officially there are no external dependencies needed for VueJS to work. 

How Do I Use Vue? 

Direct <script> Include
It’s simple as importing a bootstrap css into your HTML template. 

<html>
  <head>
    <title>Vue.js Basics</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>

    <h1>Vue Basics</h1>
    <div id="app"> </div>

    <script src="app.js"></script>
  </body>
</html>

Cpanel installation via Softaculous

Login to your cPanel account via example.com/cpanel

Scroll down to the Softaculous Apps Installer and click on it.

softac
cPanel Main Screen

Once the Softaculous page loads, click on the search field in the upper left-hand corner and type “Vue”

softac2
Softaculous Main Screen

Next, click the “Install Now” button.

softac2
Click Install

After clicking the Install Now button, follow the steps on the next page by filling in the needed information. 

  • Choose the Protocol from the dropdown menu which you want to use.
  • Choose the domain from the dropdown menu on which you want to install – Choose the latest stable version of Vue.js (2.6.10)
  • Choose the directory in which you want to install Vue.js libraries 
  • Click Install

Finish – If all went well and there were no errors during the installation, you can visit example.com and image should show like the one below which means that the Vue.JS is installed correctly. 

Commandline Installation

Requirements For Centos 7.X

To be able to install Vue via the command line, there are some requirements. 

  1. Node.js (6.x – 8.x preferred)
  2. npm version 3.x+
  3. Git ( it should be installed by default on new Cpanel servers )
    1. If it’s not by any chance you can follow this tutorial  https://www.staging.liquidweb.com/kb/how-to-install-and-configure-git-on-centos-7/

If Node is not installed, let’s start by installing it.  First SSH to your server as the root user

Warning:
Always trust and verify the commands you are installing from an external bash source. Running a bash command from a malicious external source (especially as root) can cause undesirable effects up to and including data loss!

Next, type the command : 

[root@host ~]# curl  -sL https://rpm.nodesource.com/setup_12.x | bash -

The setup_12.x section in the above URL indicates the version of the Node JS package we will be installing. A complete list of the versions can be found at https://rpm.nodesource.com 

After we download the repository we can install the NodeJS with the following command:

[root@host ~]# yum install -y nodejs gcc-c++ make 

If there were no errors we can check the version of the NodeJS installed with the following command: 

[root@host ~]# node --version 

Also, we need to check NPM version 

[root@host ~]# npm --version 

If all of the prerequisites comply with the requirements, we can now move to the actual Vue CLI install.

To install the Vue 2 CLI the command is following. 

[root@host ~]# npm install -g vue-cli 

The output should be similar to this one :

cli1

Now that we have installed Vue globally, we can start creating our project. 

Creating a Vue 2 Project

After we have installed Vue.JS 2, we can now start building a project. 

Since we are already SSH’d into our server as the root user, we can start building our project by su’ing back to the local cpanel account/user we originally installed vue on. Let’s login to that user with the following command : 

[root@host ~]# su $user 

Next, we’ll navigate to our domain’s document root folder; home/$user/public_html

[root@host ~]#cd /home/nnewell/public_html 

Now that we are inside the document root, we can type the command:

[root@host ~]# vue init webpack lwvue-project

After we type the command we will be asked the following Questions:

Project name: lwvue-project
(press enter after all questions to move ahead)

Project description: A new Vue.js project

Author? add your name (if you so choose as the owner)

Vue build standalone? Runtime + Compiler: recommended for most users

Install vue-router? Yes

Use ESLint to lint your code? Yes

Set up unit tests? Yes

Pick a test runner? karma

Setup e2e tests with Nightwatch? Yes
S
hould we run npm install for you after the project has been created? (recommended) npm

Completed Setup

Now that we have started our project we will need to spin the server for development so we can test it out. 

[root@host ~]# npm run dev 

That will start the server on http://localhost:8081 by default 

For making a production build of our app we would need to run the following command from inside our project folder

[root@host ~]# npm run build 

If everything goes well the /dist folder should be created and you can basically move all the files from there to our /public_html folder since the Vue apps can be served via any HTTP server. 

And that’s it!

We know that there is already a Vue 3 version, but we will cover that version in an upcoming article for our knowledgebase. In that article, we will touch on the basics and a little bit more development with Vue.JS 3. 

Documentation and other useful Articles : 
https://vuejs.org/
https://vuejs.org/v2/guide/
http://demo.softaculous.com/enduser/index.php?act=js&soft=580
https://github.com/vuejs/vue-cli/tree/v2#vue-cli–
How to Install and Configure Git on CentOS 7

Aditional Video
https://youtu.be/5LYrN_cAJoA?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa

Need More Help?

Our Support and Solutions Teams are filled with talented systems administrators with an intimate knowledge of this and other web hosting technologies. If you are uncomfortable walking through the steps outlined here or are just looking for further feedback, we are just a phone call, chat or ticket away from providing you info you need.
Call us at 1.800.580.4985 

How to Install React JS in Windows

Reading Time: 4 minutesReact.js (React) is an open-source JavaScript library useful in building user interfaces. React is a library so our main focus for this article is installing a JavaScript environment and a Package Manager so that we can download and install libraries including React.

When we are done, you will have a React environment you can use to start development on your Liquid Web server.

 

Install Node.js

The first step is to download the Node.js installer for Windows. Let’s use the latest Long Term Support (LTS) version for Windows and choose the 64-bit version, using the Windows Installer icon.

nodejs1

Once downloaded, we run the Node.js installer (.msi fuke) and follow the steps to complete the installation.

nodejs installationNow that we have Node.js installed, we can move on to the next step.

 

The Command Prompt Environment

We’ll need to use the command prompt (command line) to interact with Node.js and the Node Package Manager (NPM) to install React. Let’s take a few minutes to cover the commands we’ll need to use to get around. Here are the basic commands we will need to get around and create folders/directories:

nodejs_commands

 

Open a Command Prompt in Windows

Click the Start Menu (1), start typing the word command (2), then choose either Command Prompt or the Node.js command prompt (3) — either choice will work.

nodejs_commandprompt

A command prompt window will open with the path showing as C:\Users\<username> where the <username> on your system will be the user you are logged in as.

nodejs_commandprompt2

To execute a command, we type the command and any required options, then press Enter to execute it and see the results. Let’s walk through each of the commands listed above to see what happens:

dir

nodejs_commandprompt3

Let’s look at the contents of the downloads folder with this command:

dir downloads

nodejs_commandprompt4

The path shows we are still in the directory C:\Users\ReactUser>, however, we are looking at the contents of C:\Users\ReactUser\downloads and we see that it has one file. Let’s move to the downloads directory with this command:

cd downloads

nodejs_commandprompt5

We’ve changed to the downloads folder as the command prompt shows C:\Users\ReactUser\Downloads>. You can use the dir command to see the contents of this directory/folder. Next, let’s go back to the previous directory with this command:

cd..

nodejs_commandprompt6

Now we are back to where we started. Let’s create a new directory for our first project and name it reactproject1. We’ll use the command:

mkdir reactproject1

nodejs_commandprompt7

Again, we use the dir command to list the files within our current folder.

dir

nodejs_commandprompt8

If you want to learn more about commands, please check out these links:

 

Install React on Windows

There are two ways to install React for your projects. Let’s look at each approach so that you can decide which one you prefer to use.

 Option 1 

  • Create a project folder
  • Change to the project folder
  • Create a package.json file
  • Install React and other modules you choose

This install option allows you to full control over everything that is installed and defined as dependencies.

Step 1: To get started, we need to open a command prompt.

Step 2: Create a project folder named reactproject1:

mkdir reactproject1

Press Enter to execute the command, and we get a new directory called reactproject1. If you did this as part of the Command Prompt examples, you could skip this step as it will tell you that it already exists.

Step 3: Move to the project folder, using cd reactproject1, so we can install React into it.

cd reactproject1

At this point, you will see your prompt indicate C:\Users\ReactUser\reactproject1.

Step 4: Create a package.json file, the following command will walk you through creating a package.json file.

npm init

nodejs_commandprompt9

Step 5: Install React and other modules using npm install — save react, thiswill install React into your project and update the package.json file with dependencies.

npm install --save react

We can install additional packages using npm install — save and the name of the package we want to install. Here we are installing react-dom: npm install — save react-dom

npm install --save react-dom

 

 Option 2 

  • Install Create-React-App package to simplify the process of creating and installing React into your projects

 

 

Step 1: To get started, we need to open a command prompt and type npm install -g create-react-app. This installs the Create-React-App module which makes it very easy to create and deploy React into projects with a single command.

Note
When using create-react-app ensure you are in the desired directory/folder location as this command will create the project folder in the current path.

npm install -g create-react-appCreate-React-App is installed in the following location: C:\Users\<username>\AppData\Roaming\npm\node_modules\create-react-app\

Once Create-React-App is installed, we can use it to create a project folder and install React and dependencies automatically.

To make sure you are in the desired directory when creating a new project, you can use dir to see where you are, and cd <directory_name> or cd.. to get to the desired location.

Step 2: To create a new project and deploy React into it, we run create-react-app <project_name>. Let’s do this to create reactproject2.

create-react-app reactproject2

The entire process is automated and begins with creating a new React app folder for the project, then installs packages and dependencies. The default packages include react, react-dom, and react-scripts. The installation will take a few minutes.

nodejs_commandprompt10

Run a React Project Application

To run our new project, we need to use the command prompt to change to the project folder, then start it. The cd reactproject2  command will take us to the reactproject2 folder.

cd reactproject2

And npm start will run the project application.

nodejs_commandprompt11

The default browser will open and load the project:

localhostTo learn more about React, you may find these links helpful:

You now have your environment set for building out projects!  If you are running our lightning fast servers, our support team is at your disposal for any questions you may have.

How to Install NVM (Node Version Manager) for Node.js on Ubuntu 16.04 LTS

Reading Time: < 1 minuteNode Version Manager, also known as NVM is used to control and manage multiple active versions of Node.js in one system. It is a command line utility and a bash script that allows programmers to shift between different versions of Node.js. They will be able to install any version using a single command and setting defaults using the command line utility.

Continue reading “How to Install NVM (Node Version Manager) for Node.js on Ubuntu 16.04 LTS”

Best Editor for Web Development 2017

Reading Time: 3 minutes

Best Web Development Tools of 2017: Editors/IDEs and Package Management

The worlds of web hosting and web development are in a constant state of evolution. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

In this article we will discuss and highlight a handful of tools that help make web development easy. Whether you work on Frontend, Backend, PHP, Javascript, or even Perl this list will have something helpful.

As a web hosting company we don’t often talk about the tools used to create the web. We’re usually ultra focused on the components that enable us to server and support you; things like: server hardware, Linux, Apache and etc.

We may not support development tools, but we do want to help our customers to build amazing stuff.
Continue reading “Best Editor for Web Development 2017”

How to Install Node.js via NVM (Node Version Manager) on Fedora 21

Reading Time: 2 minutesNode.js is a cross-platform runtime environment, configurable on Linux, OS X, and Microsoft Windows, and built on JavaScript. Applications, both server-side and networking, are also written in JavaScript. Node.js lends itself nicely to quick deploying, real-time web applications, and is generally thought of as extremely scalable due to its event-driven architecture.

The Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as: installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing Node.js via NVM (Node Version Manager) on a single Fedora 21 node.
  • I’ll be working from a Liquid Web Self Managed Fedora 21 server, and I’ll be logged in as root.
  • If NVM is not already installed, then visit our tutorial on: How to Install NVM (Node Version Manager) for Node.js on Fedora 21

Continue reading “How to Install Node.js via NVM (Node Version Manager) on Fedora 21”

How to Install Node.js via NVM (Node Version Manager) on Fedora 20

Reading Time: 2 minutesNode.js is a cross-platform runtime environment, configurable on Linux, OS X, and Microsoft Windows, and built on JavaScript. Applications, both server-side and networking, are also written in JavaScript. Node.js lends itself nicely to quick deploying, real-time web applications, and is generally thought of as extremely scalable due to its event-driven architecture.

The Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as: installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing Node.js via NVM (Node Version Manager) on a single Fedora 20 node.
  • I’ll be working from a Liquid Web Self Managed Fedora 20 server, and I’ll be logged in as root.
  • If NVM is not already installed, then visit our tutorial on: How to Install NVM (Node Version Manager) for Node.js on Fedora 20

Continue reading “How to Install Node.js via NVM (Node Version Manager) on Fedora 20”

How to Install Node.js via NVM (Node Version Manager) on CentOS 7

Reading Time: 2 minutesNode.js is a cross-platform runtime environment, configurable on Linux, OS X, and Microsoft Windows, and built on JavaScript. Applications, both server-side and networking, are also written in JavaScript. Node.js lends itself nicely to quick deploying, real-time web applications, and is generally thought of as extremely scalable due to its event-driven architecture.

The Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing Node.js via NVM (Node Version Manager) on a single CentOS 7 node.
  • I’ll be working from a Liquid Web Core Managed CentOS 7 server, and I’ll be logged in as root.
  • If NVM is not already installed, then visit our tutorial on: How to Install NVM (Node Version Manager) for Node.js on CentOS 7

Continue reading “How to Install Node.js via NVM (Node Version Manager) on CentOS 7”

How to Install NVM (Node Version Manager) for Node.js on Fedora 21

Reading Time: < 1 minuteThe Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as: installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing NVM (Node Version Manager) on a single Fedora 21 node.
  • I’ll be working from a Liquid Web Self Managed Fedora 21 server, and I’ll be logged in as root.

Continue reading “How to Install NVM (Node Version Manager) for Node.js on Fedora 21”

How to Install NVM (Node Version Manager) for Node.js on Fedora 20

Reading Time: < 1 minuteThe Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as: installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing NVM (Node Version Manager) on a single Fedora 20 node.
  • I’ll be working from a Liquid Web Self Managed Fedora 20 server, and I’ll be logged in as root.

Continue reading “How to Install NVM (Node Version Manager) for Node.js on Fedora 20”

How to Install NVM (Node Version Manager) for Node.js on CentOS 7

Reading Time: < 1 minuteThe Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing NVM (Node Version Manager) on a single CentOS 7 node.
  • I’ll be working from a Liquid Web Core Managed CentOS 7 server, and I’ll be logged in as root.

Continue reading “How to Install NVM (Node Version Manager) for Node.js on CentOS 7”