Popoola Temitope I'm a software developer and technical writer. I love learning about new technology and am always ready to share ideas with others.

Top 3 services to deploy a Vue app for free

6 min read 1707 101

Top 3 Services to Deploy a Vue App for Free

When deploying a Vue.js app, using the right hosting service can make all the difference. Heroku had been the go-to platform for many for years, renowned for its simplicity and popularity among developers because of the features available on its free tier.

In late 2022, however, Heroku eliminated its free deployment features. So today, we’ll explore the best free alternatives for deploying your Vue apps, along with step-by-step instructions on how to deploy your app on each platform.

Jump ahead:

Prerequisites

To follow along with this tutorial, you’ll need to have basic knowledge of how to create a Vue app as well as the following software installed on your machine:

  • Git: Ensure that Git is installed and connected to your GitHub account
  • Vue CLI: Make sure you have Vue CLI installed

Creating a demo ecommerce app

First, let’s create a simple ecommerce website with Vue, and then we’ll explore how to deploy the application using free hosting services. You can find the code for the demo app in this GitHub repo. Once you have Vue CLI installed, you can create a new Vue project by running the command below in the terminal:

npm init vue@latest

Next, follow the prompt options to select the application features. I’ll configure this demo ecommerce application using the following settings:

Config for Our Vue Ecommerce App

After configuration, run the following command in your terminal to complete the application installation and setup:

cd ecommerce-app
npm install

Now, open the application folder in your code editor and navigate to the src directory, then open the App.vue file and replace it with the following code:

<template>
 <div>
   <nav>
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
   </nav>
 </div>
 <center><h3>Latest Shoes</h3></center>
 <div class="container">
   <div class="card">
     <img
       src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
       alt="Product 1"
     />
     <h3>Product 1</h3>
     <p>Description of Product 1</p>
     <button>Add to Cart</button>
   </div>
   <div class="card">
     <img
       src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80"
       alt="Product 2"
     />
     <h3>Product 2</h3>
     <p>Description of Product 2</p>
     <button>Add to Cart</button>
   </div>
   <div class="card">
     <img
       src="https://images.unsplash.com/photo-1603808033192-082d6919d3e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=830&q=80"
       alt="Product 3"
     />
     <h3>Product 3</h3>
     <p>Description of Product 3</p>
     <button>Add to Cart</button>
   </div>
   <!-- Add more product cards here -->
   <div class="card">
     <img
       src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
       alt="Product 1"
     />
     <h3>Product 1</h3>
     <p>Description of Product 1</p>
     <button>Add to Cart</button>
   </div>
   <div class="card">
     <img
       src="https://images.unsplash.com/photo-1603808033192-082d6919d3e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=830&q=80"
       alt="Product 3"
     />
     <h3>Product 3</h3>
     <p>Description of Product 3</p>
     <button>Add to Cart</button>
   </div>
 </div>
</template>

To add styling to the application, navigate to the assets directory and replace the main.css stylesheet with the following:

body {
 font-family: Arial, sans-serif;
}
.container {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
nav {
 background-color: #f2f2f2;
 padding: 10px;
 display: flex;
 justify-content: center;
}

nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

nav ul li {
 display: inline;
 margin-right: 10px;
}

nav ul li a {
 text-decoration: none;
 color: #333;
 padding: 5px;
}

.card {
 width: 300px;
 margin-bottom: 20px;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 4px;
}

.card img {
 width: 100%;
 height: auto;
 margin-bottom: 10px;
}

.card h3 {
 margin: 0;
 font-size: 18px;
 font-weight: bold;
}

.card p {
 margin: 10px 0;
 font-size: 14px;
}

.card button {
 padding: 10px 20px;
 font-size: 14px;
 background-color: #4caf50;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

When running the application in development mode, we should have the output below in the browser:

Screenshot of Our Completed Ecommerce Demo App

Pushing our code to GitHub

The first step in deploying our application is to push the source code to a GitHub repository. Most deployment services allow developers to deploy from their GitHub repository, which makes it easy to rebuild the application when changes are made to the codebase.

First, we need to link the source code to a GitHub repository. In the terminal, navigate to the project directory and run the following commands:

git init
gh repo create

After running the above commands, you will be prompted to create and configure a new GitHub repository. You can configure the repository as shown in the image below:

GitHub Config Options for Our Demo Ecommerce App

Next, the following commands will push the code to the new GitHub repository:

git add .
git commit -m "pushing vue app to githup repo"

Best free services to deploy our Vue app

1. Netlify

Netlify is a cloud-based platform that provides developers with various tools and services to build, deploy, and manage websites and web applications. It offers a unified platform for web development, hosting, and content delivery, simplifying the process of building and deploying websites.

The Netlify free starter plan, available at no cost, offers the following features:

  • Fast and reliable development with global edge network deployment
  • Support for real-time collaboration by inviting team members to work on your site
  • Includes 100GB bandwidth, which is sufficient for most personal projects and hobby sites
  • Easily rollback to a previous versions of your site with just a few clicks
  • Deploy both static assets and dynamic serverless functions with the free starter plan

Register a new Netlify account or log in to the Netlify dashboard to start deploying your Vue application:

Screenshot of the Netlify Dashboard

From the dashboard page, click the Import from Git button, which will prompt you to connect to a Git provider; click GitHub and configure the application as shown in the GIF below. Finally, click the Deploy site button:

Walkthrough of Deploying Our Vue Application on Netlify

Once the application is successfully deployed, you will find the link to the application at the top of your dashboard page:

Link to Our Application on the Netlify Dashboard

2. Vercel

Vercel is a serverless cloud platform for hosting applications and serverless functions. It provides a seamless and efficient way to deploy applications and websites.

With Vercel, developers can easily host their projects and enjoy benefits such as instant deployment, automatic scaling, and optimized performance. Vercel’s free hobby plan has the following features:

  • Deploy from CLI or personal Git integrations
  • Built-in CI/CD
  • Automatic HTTPS/SSL
  • Previews for every Git push

To deploy on Vercel, register a new account or log in to your Vercel dashboard page:

Screenshot of the Vercel Dashboard

Click the Create a New Project button on the dashboard, which redirects you to the Import Git Repository page. Select Add GitHub Account, as shown in the image below:

Adding Our GitHub Account to Vercel

You will be redirected to GitHub to install Vercel on your GitHub repository. Select the repository you want to deploy from and click the Install button:

Walkthrough of Installing Vercel on Our GitHub Repository

Once the installation is complete, select the repository you want to deploy from and click Import:

Importing Our GitHub Repo on Vercel

Next, you must configure the application name and click the Deploy button. Your application will be live within a few seconds:

Walkthrough of Deploying Our Demo Vue App on Vercel

3. Render

Render is a hosting platform that provides a simple and efficient way to deploy and manage applications and websites. Render provides developers with features like automated deployment, scaling, and monitoring, making it easier to focus on building their applications rather than dealing with infrastructure management.

Render offers a free “Individual” hosting plan, dedicated to hobbyists, students, and developers who want to test their apps. The Render Individual plan has the following features:

  • Automatic continuous deploys from Git
  • Custom domains with fully managed TLS
  • 100GB bandwidth free
  • 500 build minutes/month free

To deploy your application on Render, log in to the Render dashboard. From the dashboard page, click on New Static Site:

Screenshot of the Render Dashboard

Next, you must install Render on the repository from which you want to deploy. Click Connect GitHub and follow the prompt instruction to install Render, as shown below:

Walkthrough of Connecting Our GitHub Account to Render

Once the installation is complete, you will be redirected back to Render. Select the repository you want to deploy from and click Connect:

Selecting the GitHub Repo to Deploy From with Render

Next, you must set the application Name, Branch, Build Command, and Publish directory, then click Create Static Site:

Setting Our Application Details in Render

Your application should now be live. You will find the link to the application at the top of the dashboard:

Walkthrough of Deploying Our Demo Vue App on Render

Conclusion

In this tutorial, we learned about the best free hosting services for deploying Vue.js app. During application development or testing, using a free hosting service to deploy applications gives developers more control and power to test their applications on a live server.

Choosing the best free hosting service for your Vue app will depend on your specific needs and preferences. Netlify, Vercel, and Render are good free hosting options if you are looking for a simple and easy-to-use solution.

You can access the source code for the demo app used in this article on my GitHub.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - Start monitoring for free.

Popoola Temitope I'm a software developer and technical writer. I love learning about new technology and am always ready to share ideas with others.

Leave a Reply