Deploy a VueJS 3 App on Netlify using Continuous Deployment for Free

In this article, I will take you through developing a simple VueJS 3 App using the new composition API and deploying it for free on Netlify.

About the App

The App I will create will be a simple ToDo app, but it could be much more complex but the process of deploying to Netlify would be just the same.

About Netlify

Netlify host Apps in a way that makes it very simple for the developer. It is basically a 3 step process proving a Continuous Deployment service.

1. Develop your App and push to GIT
2. Create build settings on Netlify that point to our App’s GIT repo
3. Deploy your App.

Netlify pulls your App from GIT (You get to choose the branch it pulls from), builds it and deploys it for you. What’s great, is that as soon as you push new changes to the GIT branch Netlify is watching, Netlify will pull, build and redeploy the new version of the app almost instantly, this is what is known as Continuous Deployment

Prerequisites

I am assuming that you already have the following installed or setup.

• Git installed https://git-scm.com/
• An account on Github, BitBucket, or some other internet-accessible Git server
  - https://github.com/
  - https://bitbucket.org/product
• Node.js and NPM installed https://nodejs.org/en/
• An IDE for writing your code. I use VSCode https://code.visualstudio.com/

Developing the ToDo App

Installing VueJS

Even if you already have the VueJS CLI installed, you should still follow this step to ensure you have the latest version.

Open a terminal window. You don’t have to be in any specific folder for this step. Enter the following code.

npm install -g @vue/cli

The above command will install the VueJS CLI globally, allowing you to create new VueJS applications.

Create a VueJS starter App

When we create a new VueJS app, a new folder will be created that contains all the VueJS application files and folders.

In a terminal window, navigate to where you want the application folder to be created and enter the following command

vue create vuejs_netlify

vuejs_netlify is just the name of the app we want to create. It will also be the name of the folder that the Vue CLI will create.

Selecting application presets

Select Manually select features and press enter.

Use your keyboards arrow keys to move up and down the list

The next screen will ask you to choose the features you want to include in this project.

Select the following features.

• Choose Vue version
• Babel

Use your keyboards arrow keys to move up and down the list. Use the space bar to select/deselect features.

Hit enter on your keyboard, when done.

Configure the features you have selected

• Pick a preset
  Choose 3.x (Preview)
• Where to place the config for Babel
  Chooses In dedicated config files
• Save this preset?
  Choose N

The Vue CLI will now create your new project.

When it’s finished enter the following command in the terminal to go into the folder created by the Vue CLI

cd vuejs_netlify

Installing tailwind CSS

I like to use tailwind CSS in my VueJS projects. It’s very easy to add tailwind to a VueJS project using the plugin system. Just enter the following command in the terminal.

vue add tailwind

When prompted, select minimal and hit enter.

Open the app folder in your IDE

If you're using VSCode, just enter code . in the terminal. This will open VSCode, the . tells VSCode to open the current folder

We will look at the code in a moment, but let’s get the Vue development server up and running first and make sure the basic app created by the Vue CLI is working.

In the terminal enter the following command

npm run serve

You should see something like the screenshot below.

Navigate to the Local URL: http://localhost:8080

If you already have something else running on port 8080, Vue will choose another port.

Don’t worry if the formatting looks a bit off, this is because we have installed tailwind css, it is conflicting with some of the CSS classes that come with the default VueJS project

Create the files we need

Open VSCode, the initial project structure should look like the screenshot below.

Rename HelloWorld.vue

In the src/components folder. Rename HelloWorld.vue to ToDo.vue

To rename a file in VSCode, right-click the file and click Rename

Delete everything in the ToDo.vue file and replace with the code below.

The code I have used in ToDo.vue uses the newComposition API available in VueJS 3. To learn more about the Composition API, see my article https://levelup.gitconnected.com/developing-a-full-app-using-the-vue-3-composition-api-4fd9431f2136

Update App.vue

Open src/App.vue and change it to contain the code shown below.

Notice in the template, that Vue3 now allows us to have multiple root elements. In Vue2, these two div’s would have needed to be wrapped in a single parent div.

App Summary

That is the basic ToDo App complete. As you can see, the code is simple and concise. If you take a look at your browser, you can add todo’s, toggle the complete status and delete them.

Deploy the app to Netlify

Now the app is complete. Let's get it deployed to Netlify.

Add and commit our code to GIT.

In a terminal window, go into your projects folder.

When we created our project, the Vue Create command already add a local GIT repository for us. We just need to stage our files and commit them with the two commands below.

git add .
git commit -m "Initial commit"

The above commands will stage all the new and changed files and then commit them to the local repository, with the message Initial commit Our project already has a default .gitignore file, you don’t need to change anything in here, but anything in that file will be ignored by git, i.e. node_modules, which we never want to push to GIT.

The result will look like below

Creating a GIT Repository

To use Netlify, we need to push our code to a GIT repository that is accessible through the internet. I am going to use GitHub, but you can also use BitBucket

Log in to GitHub and create a new blank repository by clicking the New button.

In the Create a new repository page, enter vuejs_netlify as the repository name. Mark it as Public and click the Create repository button.

Git will create the repository and amongst, other details, you will see the following

The URL https://github.com/simonjcarr/vuejs_netlify.git is what will become the remote address for the local GIT repository. Let’s tell the local repository about that remote repo now.

Remember, the URL above is for my GIT hub repository and won’t work for you. Make sure to use your repository address.

In the terminal enter the following command, replacing the GIT URL with yours.

git remote add origin https://github.com/simonjcarr/vuejs_netlify.git

The term origin is a standard used to refer to the default upstream remote. You can have multiple remotes but each must have a unique name.

Now we can push our code to GIT with the following command.

git push origin master

The above command tells GIT to push the master branch to the remote named origin. The result will look like this.

Deploying code to Netlify

If you don’t already have an account with Netlify, you should visit their site now and create one. https://app.netlify.com They have a free tier, so it won’t cost you anything.

After you log in to Netlify, click the Sites menu and then click New site from Git

You will need to give Netlify access to your GitHub repository through OAuth2, you can do this by clicking the GitHub logo.

You will be shown a list of all your Git repositories. If like me you have a lot of them, you can use the search box to find the repo we just created, in my case simonjcarr/vuejs_netlify

Click the repository name.

On the next page, fill in the following details

Branch to deploy
Select the master branch, or if you a separate branches for test, pre-prod and prod select the appropriate branch.
Build command
In our case for VueJS, it is npm run build
Publish directory
For VueJS the build command will publish the files to the dist folder.

Once you have completed the form, hit the Deploy site button.

You will be taken to your Apps control panel and while the site is deploying, you will see the following

After about a minute, the message will change to show the temporary URL for your site.

If you click the link, you will see your live site, deployed on Netlify. You can check out my site at the following link. The link above will not work for you, read on to find out why. The working URL is here https://gallant-shirley-a42ed3.netlify.app/

Your own domain name is optional

You can see in the screenshots above, Netlify gives you the option to point your own custom domain to your deployed App. Your own domain has its own obvious advantages. A less obvious one, but which will be become clear in the section below, is that each time you push new code to GitHub and your App is updated, the domain name Netlify provides will change.

Modifying and redeploying the application

Netlify makes it very easy to modify and redeploy your code. In fact, all we have to do is push new code to our repository and Netlify will take care of the rest automatically.

Please note my comments at the end of the last section about your own domain name. When you push new code to GitHub and Netlify redeploys your App, the domain name provided by Netlify will change.

In your IDE, open the ToDo.vue file.

Add the following code to the bottom of the template section

<div v-if="todos.length == 0">
  <div class="text-2xl font-bold">Your ToDo list is empty</div></div>

The full ToDo.vue file should look like this

Commit the changes and push to GitHub

In the terminal run the following commands

git add .
git commit -m "Added a message when todo list is empty"
git push origin master

After about 60 seconds, refresh your Netlify Apps control panel to get the new domain name.

The updated App ( https://gallant-shirley-a42ed3.netlify.app/ )is now deployed with the updated code.

Summary

Netlify makes it very easy to deploy your Apps into production and keep them in sync with GitHub using Continuous Deployment. To make the most out of Netlify you will need to point your own Domain Name at the new app, but that is something you would do anyway for a production site.

If you like my articles please follow me and give me a clap if you liked this article.