cURL is a Linux command that is used to transfer multiple data types to and from a server. It operates utilizing the libcurl library, which allows it to use the following protocols to move information:Continue reading “Fun With Curl”
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
- 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.
- All of the Vue templates use valid HTML that can be interpreted by a normal browsers.
- 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.
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://firstname.lastname@example.org/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.
Once the Softaculous page loads, click on the search field in the upper left-hand corner and type “Vue”
Next, click the “Install Now” button.
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.
Requirements For Centos 7.X
To be able to install Vue via the command line, there are some requirements.
- Node.js (6.x – 8.x preferred)
- npm version 3.x+
- Git ( it should be installed by default on new Cpanel servers )
- 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
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 :
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
hould we run
npm install for you after the project has been created? (recommended) npm
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 :
How to Install and Configure Git on CentOS 7
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
Reading Time: 2 minutes
MySQL via Command Line 102: Basic User Interaction
- These instructions are intended for deleting a MySQL database on Linux via the command line.
- I’ll be working from a Liquid Web Core Managed CentOS 7 server, and I’ll be logged in as root.
Reading Time: 3 minutesManaging the network on your servers can be cumbersome, time consuming and, involve a wide range of configurations. Thankfully, there are a handful of tools to help with these configurations. The tool we will be focusing on in this article is Ifconfig.
Reading Time: < 1 minuteInstalling Drush provides a way of managing your Drupal installs using a familiar method, the command line. Drush can simplify your life by allowing you to perform admin duties. Continue reading “Install Drush on Ubuntu 16.04”
Reading Time: 3 minutesWhat if you have dozens of SQL databases and manually backing up/restoring each database is too time-consuming for your project? No problem! We can script out a method that will export and import all databases at once without needing manual intervention. For help with transferring SQL Logins and Stored Procedures & Views take a look at our MSSQL Migration with SSMS article. Continue reading “SQL Databases Migration with Command Line”
Reading Time: < 1 minuteUser management includes removing users who no longer need access, removing their username and any associate root privileges are necessary for securing your server. Deleting a user’s access to your Linux server is a typical operation which can easily be performed using a few commands. Continue reading “How to Remove (Delete) a User on Ubuntu 16.04”
Reading Time: 6 minutesBroken down into two parts our article’s first section hits on “how to whitelist IPs or URIs,” for people who are somewhat familiar with ModSecurity but want to know further about the process. Our second section examines why we configure ModSecurity and how to prevent the security of the server from getting in the way of our work. If you have a Fully Managed Liquid Web server reach out to our Heroic Support team for assistance with whitelisting! Continue reading “Whitelisting in ModSecurity”
Reading Time: 2 minutesUbuntu 16.04 LTS provides you the ability to add a user for anyone who plans on accessing your server. Creating a user is a basic setup but an important and critical one for your server security. In this tutorial, we will create a user and grant administrative access, known as root, to your trusted user. Continue reading “How to Add a User and Grant Root Privileges on Ubuntu 16.04”
Reading Time: 2 minutesHaving access to man pages on your server is a pretty essential asset to be familiar with. If you’re not familiar with man pages they are documentation provided with software packages on Unix systems. They provide a sort of manual for applications, services and system resources. You can learn more about man pages in our introductory article. By default on Ubuntu based servers this command is not provided, since it’s a great tool to have access to this article will help you get them setup.