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 documentation #9560

Merged
merged 2 commits into from
Aug 28, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions docusaurus/docs/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -444,35 +444,40 @@ To support `pushState`, make sure to create a `public/_redirects` file with the

When you build the project, Create React App will place the `public` folder contents into the build output.

## [ZEIT Now](https://zeit.co)
## [Vercel](https://vercel.com)

[ZEIT Now](https://zeit.co) is a cloud platform for websites and serverless APIs, that you can use to deploy your Create React App projects to your personal domain (or a free `.now.sh` suffixed URL).
[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.

This guide will show you how to get started in a few quick steps:
### Step 1: Deploying your React project to Vercel

### Step 1: Installing Now CLI
To deploy your React project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository.

To install their command-line interface with [npm](https://www.npmjs.com/package/now), run the following command:
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.

```shell
npm i -g now
```
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).

### Step 2: Deploying
Once deployed, you will get a URL to see your app live, such as the following: https://create-react-app-example.vercel.app/.

You can deploy your application by running the following command in the root of the project directory:
### Step 2 (optional): Using a Custom Domain

```shell
now
```
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)

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.

Once the domain as been added, you will be presented with different methods for configuring it.

### Deploying a fresh React project

**Alternatively**, you can also use their integration for [GitHub](https://zeit.co/github) or [GitLab](https://zeit.co/gitlab).
You can deploy a fresh React project, with a Git repository set up for you, with the following Deploy Button:

That’s all!
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgit.luolix.top%2Fvercel%2Fvercel%2Ftree%2Fmaster%2Fexamples%2Fcreate-react-app)

Your site will now deploy, and you will receive a link similar to the following: https://react.now-examples.now.sh
### Vercel References:

Out of the box, you are preconfigured for client-side routing compatibility and appropriate default caching headers. This behaviour can be overwritten [like this](https://zeit.co/docs/v2/advanced/routes/).
- [Example Source](https://github.com/vercel/vercel/tree/master/examples/create-react-app)
- [Official Vercel Guide](https://vercel.com/guides/deploying-react-with-vercel-cra)
- [Vercel Deployment Docs](https://vercel.com/docs)
- [Vercel Custom Domain Docs](https://vercel.com/docs/custom-domains)

## [Render](https://render.com)

Expand Down