Ready to Take Your Vue App Live?
So, you’ve built an amazing Vue.js application, tested it thoroughly, and now it’s time to share it with the world. But how do you deploy a Vue app to a server?
Whether you’re a beginner or an experienced developer, deploying an application can seem complicated at first. But don’t worry! This guide will walk you through the entire process, step by step, making it easy and stress-free.
By the end of this article, you’ll know exactly how to deploy your Vue app on a server, whether it’s a shared hosting, VPS, or cloud platform like Netlify, Vercel, or AWS.
Let’s get started!
Step 1: Build Your Vue.js Application
Before deploying, you need to build your application for production. If you haven’t already, install the Vue CLI by running:
npm install -g @vue/cli
Once installed, navigate to your project folder and run:
npm run build
This command generates a dist/ folder containing optimized files for production. These files are what you’ll upload to your server.
Step 2: Choose a Hosting Option
There are several ways to host a Vue.js application. Here are some of the most common options:
1. Deploying on Shared Hosting or cPanel
If you’re using a shared hosting service with cPanel, follow these steps:
- Open cPanel and go to the File Manager.
- Navigate to the public_html folder (or your preferred directory).
- Upload the contents of the dist/ folder.
- If your app uses Vue Router with history mode, create an .htaccess file inside public_html/ and add this 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>
This ensures your Vue app routes work correctly.
2. Deploying on a VPS or Dedicated Server
If you have a VPS or dedicated server, follow these steps:
- Use SSH to connect to your server:
ssh user@your-server-ip
- Navigate to your web directory (e.g.,
/var/www/html). - Upload your dist folder using SCP or FTP.
- Install and configure Nginx or Apache to serve your Vue app.
For Nginx, create a configuration file:
sudo nano /etc/nginx/sites-available/vue-app
Add the following configuration:
server {
listen 80;
server_name yourdomain.com;
root /var/www/html/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}
Save the file, then restart Nginx:
sudo systemctl restart nginx
3. Deploying on Netlify (Easiest Option)
If you want a quick and free deployment, Netlify is a great option:
- Create an account on Netlify.
- Click New site from Git and connect your GitHub repository.
- Set the build command as:
npm run build
- Set the publish directory to
dist/. - Click Deploy Site, and Netlify will handle everything!
4. Deploying on Vercel
Vercel is another hassle-free hosting solution for Vue apps.
- Sign up on Vercel.
- Install the Vercel CLI:
npm install -g vercel
Navigate to your Vue project folder and run:
vercel
- Follow the prompts, and Vercel will deploy your app in minutes.
Step 3: Configure Domain and SSL (Optional but Recommended)
If you want to use a custom domain, you need to configure DNS settings:
- For shared hosting: Add your domain in cPanel and point it to your hosting account.
- For VPS or dedicated server: Update your DNS records to point to your server’s IP.
- For Netlify or Vercel: Use their domain management settings to add a custom domain.
To enable HTTPS (SSL certificate) for security, you can use Let’s Encrypt for VPS or use Netlify/Vercel’s built-in SSL feature.
Step 4: Test Your Deployment
After deployment, test your app by:
- Visiting the domain or server IP.
- Checking if routing works correctly.
- Opening the browser console for any errors.
If everything works fine, congratulations! Your Vue app is now live.
Deploying a Vue.js application doesn’t have to be complicated. Whether you choose shared hosting, VPS, Netlify, or Vercel, each method offers its own benefits depending on your needs.
If you’re looking for expert guidance in web development and deployment, check out CodeHunger for professional solutions tailored to your project.
