Deploying Your Code to the Web

In the previous two chapters, you had an in-depth look at testing and how it can benefit your application. Now that you’re confident in the stability and usability of your Vue.js application, it’s time to take a deeper look at how to get that code up on the web.

In 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 the differences between Vue.js development and production builds and what trade-offs are made.

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, Amazon Web Services Simple Storage Service (AWS S3), and AWS CloudFront, and their key similarities and differences.

In this chapter, we will cover the following topics:

• Exploring the benefits of CI/CD as part...

Technical requirements

For this chapter, you will need the git CLI, which you will have already used. You will also need accounts with both Netlify and Amazon AWS.

You may find this chapter’s source here: https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter13

Exploring 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. To support this, a modern version control system (VCS), such as Git, which supports multiple working states (branches) in a single repository, is necessary 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 that 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 our apps 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.

A Vue project scaffolded with Vite will have a build command. As part of the build process, Vite 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.

The Vue CLI build step also includes a dead code elimination step. This means that it can analyze the code being generated and if any of it is never used – for example, a statement such as if (false) { /* do something */} – then it will not be present in the build output.

By default, the Vite builds for production when we call vite build, which, in Vue projects, is aliased...

Using GitLab CI/CD to test our code

GitLab has a built-in CI/CD tool called GitLab CI/CD. 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 to your GitLab account.

Note

Instructions for adding an SSH key can be found in the GitLab documentation at https://docs.gitlab.com/ee/ssh/index.html.

Once you’ve created an account, you can create a new repository using the Create blank project action, as shown in the following screenshot. If you are an existing user, you can use the Create new project button at the top right of the Projects page.

Figure 13.7 – The GitLab Projects page with the New Project button

Regardless of your choice, you will be taken to the New project page, where you can create a project by giving it a name and a slug, as seen in the following screenshot:

Figure 13.8...

Deploying to Netlify

Netlify is a hosting provider that specializes in static hosting and relevant supporting services to provide 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 free Netlify account (you can sign up for one at https://app.netlify.com/signup).

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 Sites page in the logged-in view, as follows:

Figure 13.18 – Netlify’s drag-and-drop deployment section at the bottom of the App home page

Now, we can 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...

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’s 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 serve the content). The edge servers in a CDN request resources from the origin if they don’t have them cached but will serve subsequent requests.

Let’s learn how to configure S3 to host a Vue.js application (to do this, make sure that you have an AWS account):

1. Start by creating and configuring an S3 bucket.

To do this, head to the S3 product page. It will look similar to the following:

Figure 13.33 – Selecting...

Summary

Throughout this chapter, we’ve looked at how to introduce CI and CD practices to Vue.js projects so that we can deploy to production safely and efficiently. We’ve also 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 also learned 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 use Vue.js to successfully build powerful, yet easy-to-build, web applications. You’ve worked with data, animations, forms, and more to build multiple different types of applications with various styles of user interaction. You also learned how to test all aspects of the application and finally took the steps to get your application into a live, production environment!

...