How to deploy Vue.Js App Print

Deploying a Vue.js application on regular cPanel shared hosting requires building the app locally into static files and serving them through a small Node.js/Express server, since you cannot run the Vue dev server (vite/webpack-dev-server) directly on shared hosting.

Key points:

• All web-accessible files must live inside public_html.
• You cannot place your Vue source files directly in public_html root; they must be inside a subfolder (e.g., /home/yourusername/public_html/myapp).
• Development with hot-reload is not possible on the server – always build locally or via a temporary Node app on cPanel.

Step 1: Create an Express server to serve the built Vue app

1. In File Manager, create a folder: /home/yourusername/public_html/myapp/server
2. Go to cPanel → Setup Node.js App → Create Application
3. Choose a suitable Node.js version.
4. Set Application mode to Production (or Development initially Development for setup).
5. Application root: /home/yourusername/public_html/myourapp/server
6. Application URL: your main domain or subdomain (e.g., https://myapp.com)
7. Application startup file: app.js
8. Set a Passenger log path (e.g., /home/yourusername/logs/passenger.log)
9. Click Create.
10. Open Terminal in cPanel, run the provided source command to enter the virtual environment, then:
    npm install express path
11. Create app.js inside the server folder and add this code:

javascript

const express = require('express');

const path = require('path');

const app = express();

if (process.env.NODE_ENV === 'production') {

  app.use('/', express.static(path.join(__dirname, '../dist')));

  app.get('*', (req, res) => {

    res.sendFile(path.join(__dirname, '../dist', 'index.html'));

  });

}

app.listen(process.env.PORT || 9001);

1. Save the file and switch the Node.js app to Production mode, then restart it.

Step 2: Create a temporary Node.js app to build your Vue project on the server

1. In cPanel → Setup Node.js App → Create Application again.
2. Choose the same Node.js version.
3. Application root: /home/yourusername/public_html/myapp (your actual Vue project folder).
4. Application URL: can be anything (e.g., myapp.com/build) – it won’t be used publicly.
5. Application startup file: leave blank or put a dummy path (not used for building).
6. Create the app.
7. Open Terminal, enter this app’s virtual environment using the provided source command.
8. Run:
   npm install
   npm run build
   This creates the production-ready files in /home/yourusername/public_html/myapp/dist
9. Restart both Node.js applications.

Your Vue.js app will now be live at your domain (e.g., https://myapp.com).

If deploying to a subfolder (e.g., myapp.com/myapp), change the Express line to

app.use('/myapp', express.static(path.join(__dirname, '../dist')));

and adjust Vue router base accordingly before building.