From ac1bf2288965ec94c01eef7e14b644c6d703cfd5 Mon Sep 17 00:00:00 2001 From: Timothy <1695613+timothyis@users.noreply.github.com> Date: Fri, 28 Aug 2020 19:01:36 +0100 Subject: [PATCH] Update Vercel deployment instructions --- docs/guide/deployment.md | 81 +++++++++++----------------------------- 1 file changed, 21 insertions(+), 60 deletions(-) diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md index c5b4108f2c..ac21aa5d8c 100644 --- a/docs/guide/deployment.md +++ b/docs/guide/deployment.md @@ -269,77 +269,38 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho ### Vercel -This example uses the latest Vercel platform version 2. +[Vercel](https://vercel.com/home) is a cloud platform that enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, asset compression, cache invalidation, and more. -1. Install the Vercel CLI: +#### Step 1: Deploying your Vue project to Vercel -```bash -npm install -g vercel +To deploy your Vue project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository. -# Or, if you prefer a local one -npm install vercel -``` +Import the project into Vercel using the [Import Flow](https://vercel.com/import/git). During the import, you will find all relevant [options](https://vercel.com/docs/build-step#build-&-development-settings) preconfigured for you with the ability to change as needed. -2. Add a `vercel.json` file to your project root: +After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git-integrations#production-branch) (commonly "master" or "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production). - ```json - { - "name": "my-example-app", - "version": 2, - "builds": [ - { - "src": "package.json", - "use": "@vercel/static-build" - } - ], - "routes": [ - { - "src": "/(js|css|img)/.*", - "headers": { "cache-control": "max-age=31536000, immutable" } - }, - { "handle": "filesystem" }, - { "src": ".*", "dest": "/" } - ], - "alias": "example.com" - } - ``` +Once deployed, you will get a URL to see your app live, such as the following: https://vue-example-tawny.vercel.app/. - If you have different/additional folders, modify the route accordingly: - - ```diff - - { - - "src": "/(js|css|img)/.*", - - "headers": { "cache-control": "max-age=31536000, immutable" } - - } - + { - + "src": "/(js|css|img|fonts|media)/.*", - + "headers": { "cache-control": "max-age=31536000, immutable" } - + } - ``` +#### Step 2 (optional): Using a Custom Domain - If your `outputDir` is not the default `dist`, say `build`: - - ```diff - - { - - "src": "package.json", - - "use": "@vercel/static-build" - - } - + { - + "src": "package.json", - + "use": "@vercel/static-build", - + "config": { "distDir": "build" } - + } - ``` +If you want to use a Custom Domain with your Vercel deployment, you can **Add** or **Transfer in** your domain via your Vercel [account Domain settings.](https://vercel.com/dashboard/domains) -3. Adding a `now-build` script in `package.json`: +To add your domain to your project, navigate to your [Project](https://vercel.com/docs/platform/projects) from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the **Domains** menu item. From your projects **Domain** page, enter the domain you wish to add to your project. - ```json - "vercel-build": "npm run build" - ``` +Once the domain as been added, you will be presented with different methods for configuring it. + +#### Deploying a fresh Vue project + +You can deploy a fresh Vue project, with a Git repository set up for you, with the following Deploy Button: + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmaster%2Fexamples%2Fvue) - To make a deployment, run `vercel`. +## References: - If you want your deployment aliased, run `vercel --target production` instead. +- [Example Source](https://github.com/vercel/vercel/tree/master/examples/vue) +- [Official Vercel Guide](https://vercel.com/guides/deploying-vuejs-to-vercel) +- [Vercel Deployment Docs](https://vercel.com/docs) +- [Vercel Custom Domain Docs](https://vercel.com/docs/custom-domains) ### Stdlib