14. Deploying Your Code to the Web

Overview

By the end of this chapter, you will be able to explain the benefits of a CI/CD workflow and how it ties into the release cycle, release cadence, and development workflows. To this end, you'll be able to articulate what the differences between Vue.js development and production builds are and what trade-offs are made. In order to test and deploy a Vue.js application, you'll configure GitLab CI/CD with pipelines, jobs, and steps. You'll become familiar with Netlify, AWS S3, and AWS CloudFront, and their key similarities and differences.

In this chapter, we will look at how to deploy a Vue.js application to be consumed over the World Wide Web and how to automate this deployment process to release often with ease and confidence.

Introduction

In this chapter, we will look at how you might leverage CI/CD tools and techniques to deliver applications to production with high confidence and at high frequency.

In previous chapters, we saw how to build and test complex Vue.js applications. This chapter is about leveraging all the techniques, including testing and automating them, in order to deliver software to production with minimal risk and time overhead.

The Benefits of CI/CD as Part of an Agile Software Development Process

Continuous integration (CI) is the practice of integrating code multiple times a day. In order to support this, a modern version control system (VCS) such as Git that supports multiple working states (branches) in a single repository is necessary in order to allow developers to work on code independently, while still allowing them to collaborate and integrate their changes safely.

To augment the abilities of the VCS, hosting and collaboration tools around repositories (such as GitLab or GitHub) have been created and allow developers to view and manage code changes more efficiently through a web user interface (UI).

As part of, or in addition to, these hosting platforms and the collaboration tools they provide, automated checks are crucial to maintaining high confidence in the quality of the code before, during, and after integration. Adopting a CI approach often entails including additional code quality steps...

Building for Production

Deploying applications to production starts with creating an artifact that can be deployed. In the case of Vue.js, we're building a client-side application, which means our build artifact will contain HTML, JavaScript, and CSS files.

The Vue CLI comes with a build command. This build command will take our Vue.js single-file components (.vue files) and compile them into render functions (JavaScript functions that the Vue runtime can use to render our application) that will be output to JavaScript.

As part of the build process, the Vue CLI will take JavaScript, Vue single-file components, and modules that are imported into each other and bundle them. Bundling means that related chunks of code that depend on each other will be output as a single JavaScript file.

Due to our use of the Vue CLI, the Vue.js library itself can also be slimmed down. The Vue.js runtime bundle can include a runtime compiler that takes string templates and turns them into...

Using GitLab CI/CD to Test Your Code

GitLab has a built-in CI/CD tool called GitLab CI/CD.

In order to use GitLab CI/CD, you'll need a GitLab account.

To interact with Git repositories hosted on GitLab, you'll also need to associate an SSH key from your machine and to your GitLab account.

Note

Instructions to add an SSH key in the GitLab documentation can be found at https://docs.gitlab.com/ee/gitlab-basics/create-your-ssh-keys.html.

Once you've created an account, you can create a new repository using the New Project button at the top right of the Projects page, as shown in the following screenshot:

Figure 14.7: The GitLab "Projects" page with the New Project button

If you click the New Project button, you will be taken to the New Project page, where you can use the default Blank Project tab to create a project by giving it a name and a slug, as seen in the following screenshot:

Figure 14.8...

Deploying to Netlify

Netlify is a hosting provider that specializes in static hosting and relevant supporting services in order to have a fully interactive site that uses static hosting. This includes offerings such as Netlify Functions (serverless functions), Netlify Forms (a no-backend form submission system), and Netlify Identity (an identity/authentication provider).

The following sections require you to have a Netlify account, which is free.

The simplest way to deploy a site to Netlify is to use the drag and drop interface. You'll find this at the bottom of the home page in the logged-in view: https://app.netlify.com. It looks as follows:

Figure 14.18: Netlify's drag and drop deployment section at the bottom of the App home page

We can, therefore, choose a project where we've run the npm run build command and deploy the dist folder by simply dragging it to the drag and drop deployment section, as shown in the following screenshot:

...

Deploying to AWS Using S3 and CloudFront

Amazon S3 is a static storage offering that can be used as a host for static files, such as what is generated by the Vue CLI's build script.

CloudFront is AWS' content delivery network (CDN) offering. A CDN can improve a web application's performance by serving static content from an edge location. These servers are positioned around the world and are more likely to be geographically located close to the end user than the origin servers (the ones that actually serve the content). Edge servers in a CDN request resources from the origin if they don't have them cached but will serve subsequent requests.

A prerequisite for the following steps is an AWS account:

1. We will start by creating and configuring an S3 bucket.

   We begin by heading to the S3 product page. It will look similar to the following screenshot:

   Figure 14.33: Select S3 from the AWS service list

2. On the S3 console home page, we can click the Create...

Summary

Throughout this chapter, we've looked at how to introduce CI and CD practices to Vue.js projects in order to deploy to production safely and efficiently. We've seen how CI and CD are beneficial in the context of an agile delivery process. We used GitLab's CI/CD features to run tests, linting, and builds on every commit. We saw how to leverage Netlify to host a static website by connecting Netlify to our hosting provider. Finally, we looked at how to set up and deploy to AWS S3 and CloudFront.

Throughout this book, you have learned how to build, test, and deploy a Vue.js application that scales and performs for your team and your end users.