Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Vercel deployment instructions #5835

Merged
merged 1 commit into from Oct 6, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
81 changes: 21 additions & 60 deletions docs/guide/deployment.md
Expand Up @@ -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

Expand Down