How to deploy Vue.Js App

Log into your cPanel and clicking on the file manager option, this will take you to the home directory eg:  /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 (eg /home/yourusername/public_html/myapp ) because application files are not allowed to be stored directly in the public_html directory.

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 deploy it on your hosting account. You can deploy it using the steps stated below. 

To 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 

1.  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.
2.  On your cPanel dashboard, click on Setup Node Js App and click on Create Application
3.  Select the Nodejs version best compatible with your application.
4.  Select the development mode.
5.  Set the application root to the location of your application e.g /home/yourusername/public_html/myapp/server 
6.  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
7.  Set your Application startup file to the full path of your app.js file. E.g /home/yourusername/public_html/myapp/server/app.js 
8.  Set the Passenger log file location where you wish to save error log from your application e.g. /home/yourusername/logs/passenger.log
9.  Click on Create.
10.  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 

    a. Click on the terminal option on your cPanel Dashboard

    b. 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

    c. In your virtual environment, run: npm init 

    d. Install Express and path using npm 

     

          npm install express 

          npm install path 

    e. 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. 

To create the Main app to build your project for production: 

1. On your cPanel dashboard, click on Setup Node Js App and click on Create Application
2. Select the Nodejs version best compatible with your application. 
3. Select the development mode. 
4. Set the application root to the location of your application e.g /home/yourusername/public_html/myapp 
5. 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. 
6. Set your Application startup file to the path of your index.js file. E.g /home/yourusername/public_html/myapp/src/index.js 
7. Set the Passenger log file location where you wish to save the error log from your application e.g. /home/yourusername/logs/passenger.log 
8. Click on Create. 
9. 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 

     a. Click on the terminal option on your cPanel Dashboard

     b.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/ 

     c. In your virtual environment, run: npm install

     d. 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 

      e. Restart both applications and access your website via myapp.com 

Note: if your 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'));