When starting a new project, you have a lot on your mind that you want to work on and build. The last thing you probably want to worry about is figuring out how to make sure your app is deployed in a reliable fashion.
In this session, I’m going to show you how you can get a brand new Vue 3 + Vite app deployed and connected with continuous integration / deployment (CI/CD) in five minutes.
Use a starter template
If you want to start with a template so that you can jump straight into coding, just click on the Deploy to Netlify button below. This will automatically setup and connect a GitHub repo with your Netlify account so that you can skip all of the configuration and start working on your Vue 3 app!
Build it from scratch
On the other hand, if you’d like to see how everything was setup from the beginning, read on for detailed instructions on how you can set it all up from the terminal yourself!
Prerequisites
Before getting started, here are some tools that you’ll want to have installed on your system to make things easier:
- Node.js 12 or greater (LTS recommended)
- GitHub CLI
- Netlify CLI
Steps to Deploy Your Vue 3 + Vite App
With the brand new powerful Vite scaffolding engine, here’s how you can get up and running in a matter of seconds.
Step 1. Scaffold your project with Vite.
Open up your terminal and run the following command:
npm create vite@latest YOUR_PROJECT_NAME -- --template vue
Navigate into your project directory with the following command:
cd YOUR_PROJECT_NAME
Step 2. Setup Git integration for your project.
If you’re working with a new instance of GitHub CLI, make sure to start by logging in:
gh auth login
Once you do that, it’s time to initialize git in your project by running the following command:
git init
Create a new repo that’s connected to your account:
gh repo create
When prompted on what kind of repo you want to create, select: Push an existing local repository to GitHub
.
Follow the prompts to fill out the relevant project details.
- Repository name:
YOUR_PROJECT_NAME
- Repository description:
- Visibility:
Public
- This will add an “origin” git remote to your local repository. Continue?
Yes
Commit your initial scaffold and push up to the main branch with the following commands:
# Add all files to staging
git add .
# Commit changes with short message on the change made
git commit -m "feature: scaffold vue 3 and vite project"
# Push changes to main branch
git push origin main
Step 3. Deploy your app
It’s time to connect our new app with Netlify! If you’re not logged in already, you can do so by running command below and following the prompts to authenticate the CLI:
netlify login
Next, we’ll want to initialize a brand new project with Netlify using the following command:
# Initialize a new project with Netlify CLI
netlify init
Fill out the following prompts for a brand new project:
- What would you like to do?
Create & configure a new site
- Team:
YOUR_TEAM
- Site name (optional):
CHOOSE_UNIQUE_SITE_NAME
The following prompts should be have prefilled defaults since Netlify will automatically detect what project you have. So you can just hit enter to use the defaults.
- Your build command (hugo build/yarn run build/etc):
(vite build)
- Directory to deploy (blank for current dir):
(dist)
- Netlify functions folder:
(netlify/functions)
- No netlify.toml detected. Would you like to create one with these build settings?
(Yes)
With that, we’re just one step away from finishing the deployment! Because we’re using Vue 3 in SPA mode, this means that we’ll need to update the netlify.toml
file by uncommenting the redirects
block.
The resulting netlify.toml
should look like the following:
# example netlify.toml
[build]
command = "vite build"
functions = "netlify/functions"
publish = "dist"
## Uncomment to use this redirect for Single Page Applications
## Not needed for static site generators.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Now we just need to commit our change and push it up to our repo with the following commands:
# Add all files to staging
git add .
# Commit changes with short message on the change made
git commit -m "config: add netlify deploy files"
# Push changes to main branch
git push origin main
And because we’ve hooked up Netlify to our GitHub repo, this means Netlify will automatically pick up the changes and deploy our app!
Step 4. Celebrate!
To check on the fruits of our labor, let’s run the following command:
netlify open:site
This will open up the website that has been deployed!
And if you want to check on the status of your site and see what other great features you can play with, you can directly open up the dashboard for your app by running:
netlify open
Final Thoughts
And just like that, your Vue 3 and Vite project is now configured with continuous integration and deployment! 🎉 This means that whenever you push changes to your main
branch, Netlify will automatically kick off a new build and deploy it so everyone can see your changes without you lifting a single finger. 🙌
For additional resources on how you can continue to further leverage Netlify to build out more robust apps, be sure to check out the following resources:
I look forward to seeing what awesome projects y’all build with Vue 3, Vite and Netlify!