Deploying Vue.js Apps for Free: Exploring the Best Alternatives to Heroku
When it comes to deploying a Vue.js application, the right hosting service can make all the difference. For years, Heroku was the go-to platform for many developers, thanks to its simplicity and popularity. However, with the elimination of its free deployment features in late 2022, developers are now on the hunt for alternative solutions.
Getting Started
To follow along with this tutorial, you’ll need to have basic knowledge of creating a Vue app and have 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
Let’s create a simple ecommerce website with Vue and then 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, create a new Vue project by running the command below in the terminal:
Next, follow the prompt options to select the application features. Configure this demo ecommerce application using the following settings:
After configuration, run the following command in your terminal to complete the application installation and setup:
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:
To add styling to the application, navigate to the assets directory and replace the main.css stylesheet with the following:
When running the application in development mode, you should have the output below in the browser:
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, making it easy to rebuild the application when changes are made to the codebase.
First, link the source code to a GitHub repository. In the terminal, navigate to the project directory and run the following commands:
After running the above commands, you will be prompted to create and configure a new GitHub repository. Configure the repository as shown in the image below:
Next, the following commands will push the code to the new GitHub repository:
Best Free Services to Deploy Your Vue App
- 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 version 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:
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:
Once the application is successfully deployed, you will find the link to the application at the top of your dashboard page:
- 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:
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:
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:
Once the installation is complete, select the repository you want to deploy from and click Import:
Next, configure the application name and click the Deploy button. Your application will be live within a few seconds:
- 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:
Next, 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:
Once the installation is complete, you will be redirected back to Render. Select the repository you want to deploy from and click Connect:
Next, set the application Name, Branch, Build Command, and Publish directory, then click Create Static Site:
Your application should now be live. You will find the link to the application at the top of the dashboard:
Choosing the Best Free Hosting Service for Your Vue App
In this tutorial, we explored the best free hosting services for deploying Vue.js apps. 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.