How To Deploy Vuejs Project On Godaddy Shared Hosting Step By Step Guide

image
image
image
image
image
image
image
image
How to Deploy Vue.js Project on GoDaddy Shared Hosting: Step-by-Step Guide

How to Deploy Vue.js Project on GoDaddy Shared Hosting: Step-by-Step Guide

Are you looking to deploy your Vue.js application on GoDaddy shared hosting? While shared hosting isn't the first choice for modern JavaScript frameworks like Vue, it can be done easily with a few tweaks. In this step-by-step guide, you’ll learn how to deploy a Vue.js project on GoDaddy shared hosting—perfect for small projects, portfolios, or lightweight apps.


Prerequisites

Before you begin, ensure you have the following:

  1. A working Vue.js project
  2. An active GoDaddy shared hosting account
  3. Access to cPanel and File Manager or FTP
  4. Basic knowledge of command-line tools


Step 1: Build Your Vue.js Project for Production

The first step is to generate the production-ready files.

  1. Open your terminal and navigate to your Vue project folder.
  2. Run the following command:
npm run build


Step 2: Clean Up and Rename dist Folder (Optional but Recommended)

Rename your dist folder to something like my-app to keep things organized.

mv dist my-app


Step 3: Log in to Your GoDaddy cPanel

  1. Go to your GoDaddy account
  2. Access My Products > Web Hosting > Manage
  3. Click cPanel Admin to enter the hosting control panel


Step 4: Upload Vue Build Files to Public_HTML

  1. Inside cPanel, go to File Manager
  2. Navigate to the public_html directory
  3. Upload your entire contents of the my-app folder (not the folder itself)


Step 5: Set Up .htaccess for SPA Routing (Important!)

Vue.js uses client-side routing. On GoDaddy shared hosting (Apache), you must set up URL rewriting.

  1. In public_html, create or edit the .htaccess file
  2. Add the following code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>


Step 6: Access Your Deployed Vue.js App

Now, simply go to:

https://yourdomain.com


Bonus Tips

✅ Use publicPath in vue.config.js

If your Vue app is not hosted at the root (/), set the correct public path:

// vue.config.js
module.exports = {
publicPath: '/your-folder-name/'
};

Then rebuild:

npm run build


Enable Gzip Compression

For faster load times, you can enable Gzip via .htaccess:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>


Final Thoughts

Deploying a Vue.js app on GoDaddy shared hosting is absolutely possible with a little extra configuration. By building your project, uploading it to public_html, and configuring .htaccess correctly, your Vue app will be live in no time.