OpenReplay
Navigate back to the homepage
BLOG
Browse Repo
Back

Step-by-step Guide To Building and Deploying a Vue JS App with Netlify in 2021

Nwose Lotanna Victor
May 17th, 2021 · 4 min read

One of the things web developers worry about after the main hustle of building an application that customers can use is how to distribute it to or serve the application publicly for the said customers. The web development industry has grown to the point where developers are now asked to focus on the core building process as other secondary parts are taken care of by easy-to-use services.

Before we start

You will need Node installed and also:

  • A GitHub account, you can set one up here.
  • Create a Netlify account, most preferably link your GitHub to it.
  • A code editor: Visual Studio Code is highly recommended. (here’s why)
  • Vue CLI 3.0 installed on your machine. To do this, uninstall the old CLI version first:
1npm uninstall -g vue-cli

then install the new one:

1npm install -g @vue/cli

Where to host your Vue app

There are a lot of services you can use to deploy your Vue JS application some of these places include: Git platforms such as GitHub Pages, GitLab Pages, and Bitbucket Pages, other platforms include Firebase hosting, Heroku, Digital Ocean, AWS solutions, CloudFront, Now and Surge and many more. Today we would be focusing on one of the easiest to set up for your Vue JS application: Netlify.

What is Netlify?

Netlify in my opinion is the fastest way to deploy your Vue JS web application. It is a git-based serverless platform where you can build, collaborate and publish your apps for your customers with ease. It integrates with the most modern web development tools. Asides from deployment, Netlify offers solutions that cover cloud lambda functions and even JamStack architecture.

Why use Netlify?

The three main reasons to use Netlify to deploy your app are that it is super-fast to set up, it provides a very straightforward 3-step process that even a newbie can handle. The second reason is that it is free, and the final reason for me is that Netlify takes on the responsibility of continuously deploying as you make new changes and push them.

What we are building

null

We would be building a re-imagined Airbnb listing component using UI elements displaying listing images, amenities, a booking button, and the price per night, let us call it Vuebnb. We would then deploy this component publicly using Netlify.

Getting started

If you have followed this post from the start, navigate to a file location of your choice and open it up in VS Code and then in the terminal, initialize a new Vue project with this command

1vue create vuebnb

This would show you some options, choose default values and it will create a scaffold of a new Vue JS application in that file location you chose.

1cd vuebnb
2npm run start

This would show you the application in your local development server. Moving on, we would use elements from the Bootstrap Vue component library to build out this component so we need to install it.

1# With npm
2npm install vue bootstrap bootstrap-vue
3
4# With yarn
5yarn add vue bootstrap bootstrap-vue

Inside your source folder, update your main.js file with the code block below:

1import Vue from 'vue'
2import App from './App.vue'
3import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
4// Import Bootstrap an BootstrapVue CSS files (order is important)
5import 'bootstrap/dist/css/bootstrap.css'
6import 'bootstrap-vue/dist/bootstrap-vue.css'
7// Make BootstrapVue available throughout your project
8Vue.use(BootstrapVue)
9// Optionally install the BootstrapVue icon components plugin
10Vue.use(IconsPlugin)
11Vue.config.productionTip = false
12new Vue({
13 render: h => h(App),
14}).$mount('#app')

This file contains all the necessary import statements we need from BootStrapVue to work in the application. Also, update the content of your app.vue file to the code block below:

1<template>
2 <div id="app">
3 <h2>Vuebnb Listings</h2>
4 <HelloWorld msg="Welcome to Your Vue.js App"/>
5 </div>
6</template>
7<script>
8import HelloWorld from './components/HelloWorld.vue'
9export default {
10 name: 'app',
11 components: {
12 HelloWorld
13 }
14}
15</script>
16<style>
17#app {
18 font-family: 'Avenir', Helvetica, Arial, sans-serif;
19 -webkit-font-smoothing: antialiased;
20 -moz-osx-font-smoothing: grayscale;
21 text-align: center;
22 color: #2c3e50;
23 margin-top: 30px;
24 margin-bottom: 10px;
25}
26</style>

Testing out

The magic happens in the HelloWorld component, so in the template section we would create 3 card elements which would contain titles, footer details, image details and even styles. There are 3 cards as shown in the image above and each card has card texts, and list group item where amenities are listed for each apartment and finally buttons which are linked to the payment confirmation modal. Putting all of it together, navigate inside it, replace the content with the code block below:

1<template>
2 <div class="hello">
3 <b-card-group deck>
4 <b-card
5 footer="$150 /night"
6 footer-tag="footer"
7 title="Modern English Basement Apartment"
8 img-src="https://wander-lush.org/wp-content/uploads/2021/01/Medellin-Airbnb-Penthouse-in-Laureles.jpg"
9 img-alt="Image"
10 img-top
11 tag="article"
12 style="max-width: 20rem;"
13 class="mb-2"
14 >
15 <b-card-text>
16 Good vibes of the city, catch the sunset from the rooftop.
17 </b-card-text>
18 <b-list-group>
19 <b-list-group-item>Wifi, Kitchen, Heating</b-list-group-item>
20 <b-list-group-item>Free Parking lot</b-list-group-item>
21 <b-list-group-item>Gym and Swimming pool</b-list-group-item>
22 </b-list-group>
23 <br>
24 <b-button href="#" variant="info" v-b-modal.modal-1>Book a stay</b-button>
25 <b-modal id="modal-1" title="Payment Confirmation">
26 <p class="my-4">You have just booked your Vuebnb</p>
27 </b-modal>
28 </b-card>
29<!-- end of card 1 -->
30 <b-card
31 footer="$200 /night"
32 footer-tag="footer"
33 title="Comfy 1 Bedroom Condo Downtown"
34 img-src="https://media.cntraveler.com/photos/5e9907c14ab09800086faf63/master/pass/airbnb-view-37143825.jpg"
35 img-alt="Image"
36 img-top
37 tag="article"
38 style="max-width: 20rem;"
39 class="mb-2"
40 >
41 <b-card-text>
42 Quiet neigborhood, host parties and invite friends over.
43 </b-card-text>
44 <b-list-group>
45 <b-list-group-item>Wifi, Kitchen, Heating</b-list-group-item>
46 <b-list-group-item>Free Parking lot</b-list-group-item>
47 <b-list-group-item>Gym and Swimming pool</b-list-group-item>
48 </b-list-group>
49<br>
50 <b-button href="#" variant="info" v-b-modal.modal-2>Book a stay</b-button>
51 <b-modal id="modal-2" title="Payment Confirmation">
52 <p class="my-4">You have just booked your Vuebnb</p>
53 </b-modal>
54 </b-card>
55<!-- end of card 2 -->
56 <b-card
57 footer="$100 /night"
58 footer-tag="footer"
59 title="Private Spacious Retreat in Great Location"
60 img-src="https://media.cntraveler.com/photos/5de7dbee45a09000087e427f/master/pass/airbnb-9232684-los-angeles.jpg"
61 img-alt="Image"
62 img-top
63 tag="article"
64 style="max-width: 20rem;"
65 class="mb-2"
66 >
67 <b-card-text>
68 Greenry and zen is all you feel here, we got a bottler.
69 </b-card-text>
70 <b-list-group>
71 <b-list-group-item>Wifi, Kitchen, Heating</b-list-group-item>
72 <b-list-group-item>Free Parking lot</b-list-group-item>
73 <b-list-group-item>Gym and Swimming pool</b-list-group-item>
74 </b-list-group>
75<br>
76 <b-button href="#" variant="info" v-b-modal.modal-3>Book a stay</b-button>
77 <b-modal id="modal-3" title="Payment Confirmation">
78 <p class="my-4">You have just booked your Vuebnb</p>
79 </b-modal>
80 </b-card>
81<!-- end of card 3 -->
82 </b-card-group>
83</div>
84</template>
85<script>
86export default {
87 name: 'HelloWorld',
88 props: {
89 msg: String
90 }
91}
92</script>
93<!-- Add "scoped" attribute to limit CSS to this component only -->
94<style scoped>
95.hello{
96 margin-left: 90px;
97 padding-left: 20px;
98}
99</style>

Now if you run your application on the dev server it should look like this:

Production: setting up Netlify

Now the component is built the way we want it, let us prepare the project for deployment. The first thing to do is to run the Vue build command to minify files and bundle it up into chunks that are light-weight and easy to parse:

1npm run build

null

It should look something like the image above if successful. Inside your project files you would also see a new dist folder where Vue minifies everything to be production-ready. Now make sure that you push this entire project to GitHub, you can follow the guidelines here. You only need to build for production once, subsequently Netlify runs the build command when you make a change to the repository. Now open Netlify and log-in, after you get in click on “New site from Git”

null

This takes you through a process of connecting any Git-based platform where your project is hosted (in our case GitHub) After you have been authenticated, you are asked to find the project on GitHub so you have to search for the project, in my case “NetlifyBase”

null

The third and final step is to specify the build command and your dist folder and click on “Deploy site”!

null

And in a few minutes (mine was 2) your project should be deployed! You can check out the demo app here: NetlifyApp

null

This is so cool, right? It gets even better!

Observability for Production Vue Apps

Debugging Vue apps in production may be challenging and time-consuming. OpenReplay is an open-source session replay stack for developers. It helps you replay everything your users do and shows how your app behaves and renders for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder.

OpenReplay Frontend Monitoring

OpenReplay helps to quickly get to the root cause by reproducing issues as if they happened in your own browser. It also monitors your frontend performance by capturing key metrics such as page load time, memory consumption, and slow network requests.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Updating to suit your taste

The update process for your app is also now automated thanks to Netlify, so whenever you have a new change, all you need to do is to push the commit to GitHub, and Netlify will pick it up and deploy the changes!

Wrapping up

This has been a good journey, from building a listings component in Vue JS to deploying the application using Netlify. The 3-step easy deploy process and the continuous automated updating capabilities are really solid features that make Netlify stand out!

More articles from OpenReplay Blog

Forever Functional: Memoizing Functions for Performance

Are popular frameworks such as React and Vue actually performing memoization? Learn all about this technique with this step-by-step tutorial.

May 16th, 2021 · 8 min read

How to Evaluate Site Speed with the Performance API

Browser DevTools are great for monitoring web application performance on your local development PC but they're less practical for measuring site speed on different devices

May 12th, 2021 · 6 min read
© 2021 OpenReplay Blog
Link to $https://twitter.com/OpenReplayHQLink to $https://github.com/openreplay/openreplayLink to $https://www.linkedin.com/company/18257552