Javascript: How to deploy Vue.js on cPanel

So you’ve built an excellent user interface and you want to host your single webpage applications online. What next? Time to host it on cPanel. Now, here is an in-depth article on how to deploy Vue.js on cPanel. This step by step guide will guide you on what to do and how to run the app.

Also, when you compare Vue.js cPanel hosting to other types of hosting, you will discover that it has a lot of benefits and it’s user-friendly interface makes cPanel the go-to content management system for vue.js applications. If you are confused about whether you should host on cPanel or not, here are some benefits:

Benefits of Hosting Vue.js on cPanel

• It come with unlimited customized email with your domain.
• You have high end protection
• It also has a file manager that is easy to access.
• It has a user friendly interface
• There is no need for additional software or solution to expose the app using a domain name
• You can easily restart and create application from the cPanel interface
• The server hosting it is protected by bitninja on the server level and the user can also activate bitninja at the user level as well for more optimized protection
• The apps are backed up on a weekly basis
• Using cPanel is more affordable as you don’t need to have a whole server
• No need to bother about managing a whole server

How to Deploy Vue.js

After logining in to your cPanel and clicking on the file manager option, it takes you to the home
directory of your user e.g /home/yourusername

Web files are stored in the public_html directory, to deploy your application, you will need to upload your application files in a subfolder under public_html because application files are not allowed to be stored directly in the public_html directory for example /home/yourusername/public_html/myapp

Unfortunately, you won’t be able to develop your vue.js application on the hosting account because this is a shared hosting environment and you won’t be able to access your application in development mode using the server IP and a port. It is advised to develop your application locally and then deploys it on your hosting account. You can deploy it using the steps stated below.

Create Express Js app to serve your build folder:

This step is done before creating the app we will use for building the app for production because
we are creating it in a subfolder in your app folder, so if you uploaded your file to /home/yourusername/public_html/myapp, we will be creating this express app in
/home/yourusername/public_html/myapp/server folder.

In your cPanel, create a new folder called server in /home/yourusername/public_html/myapp

• Upload through file manager or FTP into public_html and also create a new folder called server in /home/yourusername/public_html/myapp where your app files reside.
• On your cPanel dashboard, click on Setup Node Js App and click on Create Application
• Select the Nodejs version best compatible with your application.
• Select the development mode.
• Set the application root to the location of your application e.g
  /home/yourusername/public_html/myapp/server
• Set your application URL, this is the URL where your application will load from. This should
  be the URL in which your application will be available e.g. myapp.com
• Set your Application startup file to the full path of your app.js file. E.g
  /home/yourusername/public_html/myapp/server/app.js
• Set the Passenger log file location where you wish to save error log from your application e.g.
  /home/yourusername/logs/passenger.log
• Click on Create.
• Install requirements, dependencies, and configure the express application

After the application is created, it displays more details about the created application. If it
doesn’t for you, click on the edit icon

• Click on terminal option on your cPanel Dashboard
• From the details of the created application, copy the command to enter into the virtual environment, paste it on the terminal screen and press Enter. E.g source /home/yourusername/nodevenv/public_html/myapp/server/10/bin/activate && cd /home/yourusername/public_html/myapp/server
• In your virtual environment, run: npm init
• Install Express and path using npm
  • npm install express
  • npm install path
• Create app.js file inside the app directory of the express app created /home/yourusername/public_html/myapp/server/app.js and paste the content below in it and save the file.

var express=require ('express');
var path= require('path');

var app= express()

if (process.env.NODE_ENV === 'production') {
app.use('/', express.static('../dist'));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))
})
}
app.listen(9001)

Now we are done with the Express app, we can edit this application and set it to production
mode. We will go ahead and create the APP to build our main project now.

Create the Main app to build your project for production: 

On your cPanel dashboard, click on Setup Node Js App and click on Create Application

• Select the Nodejs version best compatible with your application.
• Select the development mode.
• Set the application root to the location of your application e.g
  /home/yourusername/public_html/myapp
• Set your application URL, In this case, this doesn’t matter so you can use something like
  myapp.com/build but the app is not going to load from this URL, it will load from the URL of the
  express app we created earlier.
• Set your Application startup file to the path of your index.js file. E.g
  /home/yourusername/public_html/myapp/src/index.js
• Set the Passenger log file location where you wish to save error log from your application e.g.
  /home/yourusername/logs/passenger.log
• Click on Create.
• Install requirements, dependencies, and configure the express application.

• Install requirements, dependencies, and configure the express application.

After the application is created, it displays more details about the created application. If it
doesn’t for you, click on the edit icon.

• Click on terminal option on your cPanel Dashboard
• From the details of the created application, copy the command to enter into the virtual environment, paste it on the terminal screen and press Enter. E.g source /home/yourusername/nodevenv/public_html/myapp/10/bin/activate && cd /home/yourusername/public_html/myapp/
• In your virtual environment, run: npm install
• Run
  • npm run build

This will build your project for production in the dist directory located in your app directory i.e. /home/yourusername/public_html/myapp/dist

Restart both applications and access you website via myapp.com

Note: if you app is to be deployed on e.g myapp.com/myapp then you will have to configure your routes to support that path before building your application for production and in your app.js file in the line stated below, set / to /myapp app.use(‘/myapp’, express.static(‘../dist’));

In conclusion

Your applications can now run smoothly at affordable prices on cPanel. Follow these steps and you will have your Vue js apps up and running in no time. You can also read about how to deploy react.js on cPanel.