Vue - Deployment

In this article, deployment best practices will be explained.

General Guidelines

Turn on Production Mode

During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode.

If you are using the full build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version (vue.min.js) for production.

If you are using a build tool like Webpack, the production mode will be determined by process.env.NODE_ENV inside Vue's source code, and it will be in development mode by default. Usually, every build tools provide ways to overwrite this variable to enable Vue’s production mode, and warnings will be stripped by minifiers during the build. All vue-cli templates have these pre-configured for you, but it would be beneficial to know how it is done.

Pre-Compiling Templates

When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.

The easiest way to pre-compile templates is using Single-File Components - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.

If you are using Webpack, and prefer separating JavaScript and template files, you can use vue-template-loader, which also transforms the template files into JavaScript render functions during the build step.

Extracting Component CSS

When using Single-File Components, the CSS inside components are injected dynamically as <style> tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a “flash of unstyled content”. Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching.

Refer to the respective build tool documentations to see how it’s done:

• Webpack + vue-loader (the vue-cli webpack template has this pre-configured)
• Browserify + vueify
• Rollup + rollup-plugin-vue

Previewing Locally

The dist directory is meant to be served by an HTTP server (unless you've configured publicPath to be a relative value), so it will not work if you open dist/index.html directly over file:// protocol. The easiest way to preview your production build locally is using a Node.js static file server, for example serve.

Routing with history.pushState

If you are using Vue Router in history mode, a simple static file server will fail. For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead.

To fix that, you will need to configure your production server to fallback to index.html for any requests that do not match a static file. The Vue Router docs provides configuration instructions for common server setups.

CORS

If your static frontend is deployed to a different domain from your backend API, you will need to properly configure CORS.

PWA

If you are using the PWA plugin, your app must be served over HTTPS so that Service Worker can be properly registered.

Tracking Runtime Errors

If a runtime error occurs during a component’s render, it will be passed to the global Vue.config.errorHandler config function if it has been set. As explained in the Error Handling topic before, it might be a good idea to leverage this hook together with an error-tracking service like Sentry, which provides an official integration for Vue.

Platform

Deploy and serve your applications and assets over a CDN for best delivery and performance. Here are some good options for that:

AWS

If you are using vue-cli, consider checking this vue-cli-plugin-s3-deploy plugin to make it easier to deploy a built Vue.js app to an S3 bucket.

By using this platform, it will use AWS suite of CI/CD services to compile, build, and install an application onto a set of Amazon Elastic Compute Cloud (Amazon EC2) Linux instances via a fully automated and secure pipeline. The goals is to promote a code commit or change to pass through various automated stage gates all the way from development to production environments, across AWS accounts.

This solution uses these AWS services:

AWS Amplify

AWS Amplify is a set of purpose-build tools and features that lets frontend web and mobile developers quickly and easily build full-stack application on AWS, with the flexibility to leverage the breadth of AWS services.

AWS CodeCommit

A fully managed source control service that hosts secure Git-based repositories. CodeCommit makes it easy for teams to collaborate on code in a secure and highly scalable ecosystem. This solution uses CodeCommit to create a repository to store the application and deployment codes.

AWS CodeBuild

A fully managed continuous integration service that compiles source code, runs test, and produces software packages that are ready to deploy, on a dynamically created build server. This solution uses CodeBuild to build and test the code, which we deploy later.

AWS CodeDeploy

A fully managed deployment service that automates software deployments to a variety of compute services such as Amazon EC2, AWS Fargate, AWS Lambda, and your on-premises servers. This solution uses CodeDeploy to deploy the code or application onto a set of EC2 instances running CodeDeploy agents.

AWS CodePipeline

A fully managed continuous delivery service that helps you automate your release pipelines for fast and reliable application and infrastructure updates. This solution uses CodePipeline to create and end-to-end pipeline that fetches the application code from CodeCommit, builds and tests using CodeBuild, and finally deploys using CodeDeploy.

AWS CloudWatch Events

An AWS CloudWatch Events rule is created to trigger the CodePipeline on a Git commit to the CodeCommit repository.

Amazon Simple Storage Service (Amazon S3)

An object storage service that offers industry-leading scalability, data availability, security, and performance. This solution uses an S3 bucket to store the build and deployment artifacts created during the pipeline run.

Netlify

If you are using vue-cli, consider checking this (https://github.com/netlify/vue-cli-plugin-netlify-lambda) to build and serve AWS lamba functions.

Netlify Build is one of the services in Netlify that is pre-configured, fully automated and a modern CI/CD infrastructure for frontend teams. Unlike traditional CI/CD solutions, Netlify doesn't require a full-time administrator to manage the pipeline.

You can set the Netlify Build to deploy a preview of every branch in the repository and automatically attach Deploy Preview URLs to each Pull/Merge Request. Even on production, Netlify preserves every historical version of your site for instant rollbacks.

You can also extend the functionality of the Netlify Build process by installing plugins or writing your own. The Netlify Build API allows you to write custom code that hooks into each stage of the build and deployment lifecycle.