Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Deploy to Now

4:51 with Guil Hernandez

Learn how to deploy your React app with minimal configuration, using Now.

Teacher's Notes
Video Transcript
Downloads

Resources

now.json Snippet

{
  "version": 2,
  "name": "create-react-app",
  "builds": [
    { "src": "package.json", "use": "@now/static-build" }
  ],
  "routes": [
    {"src": "^/static/(.*)", "dest": "/static/$1"},
    {"src": "^/favicon.ico", "dest": "/favicon.ico"},
    {"src": "^/asset-manifest.json", "dest": "/asset-manifest.json"},
    {"src": "^/manifest.json", "dest": "/manifest.json"},
    {"src": "^/service-worker.js", "headers": {"cache-control": "s-maxage=0"}, "dest": "/service-worker.js"},
    {"src": "^/precache-manifest.(.*)", "dest": "/precache-manifest.$1"},
    {"src": "^/(.*)", "dest": "/index.html"}
  ]
}

package.json Script

"scripts": {
  ...
  "now-build": "react-scripts build && mv build dist"
}

Now is a deployment platform created by a company called Zeit, who also 0:00

built open source tools like Next.js and the HyperTerminal, among others. 0:04

With Now, you can instantly deploy your app with minimal configuration. 0:09

As you'll see, just one command, called now, deploys your app. 0:13

I recommend signing up for an account at Zeit.co. 0:17

It's free, and you can also sign up and log in using your GitHub account. 0:20

For this video, I'm going to use a course directory project that I've not yet 0:23

deployed with GitHub Pages or any deployment tool. 0:27

I suggest that you do the same to avoid any possible errors or 0:30

conflicts in the deployment configuration. 0:33

Now has a desktop app you can download, and a CLI, or command line interface. 0:36

I'm going to be using Now's CLI tool for this deployment. 0:42

So first, I'll install the CLI globally with npm install -g now. 0:44

When using Create React App, 0:52

there are a few steps to follow to deploy your app with Now. 0:54

First, you need to create a now.json configuration file 0:58

that instructs Now how to build the project. 1:02

So let's do that. 1:05

Inside the root of the project, create a new file named now.json. 1:06

In this file, we include the version of Now we want to use, along with the build, 1:11

and routers, and an optional project name. 1:16

The Zeit docs has a handy boiler plate snippet containing all these information, 1:19

which you can copy and paste into your now.json file. 1:24

I've also posted the snippet in the teacher's notes. 1:28

In the file, we are specifying that we want to use Now version 2, 1:31

the latest version of Now as I'm recording this video. 1:36

I'll set name to course-directory. 1:40

And that's all I really need to change in this file. 1:45

You don't really need to worry about what all this means. 1:47

The builds property defines the builds. 1:51

So in Now, builds are a step-up deployment that transform a deployment source 1:54

into production-ready outputs. 1:58

This instructs Now to use its @now/static-build, to build and 2:01

deploy the React application, selecting the package.json fie as the entry point. 2:06

And the routes property configures custom routes that map to the static files in 2:12

the code, to execute in our app. 2:16

Again, don't worry too much about what all this code means. 2:18

You can read more about it in the links posted in the teacher's notes. 2:20

Finally, we need to include a script and package.json that specifies 2:24

what command Now will run on the server to build the application, 2:30

in the scripts object, at a key named now-build. 2:35

And set it to, react-scripts 2:41

build && mv build dist. 2:47

You can also copy this snippet from the teacher's notes. 2:52

It's specifying mv build dist, to move all the static files from the build 2:55

folder to the dist folder, which Now identifies as its static folder. 3:00

All right, now we're ready to deploy. 3:07

In the console, all you need to do to deploy the app is run the command, now. 3:08

It might take a little while to build your app the first time around. 3:15

But once your app has deployed successfully, 3:18

you will see a URL in the console output. 3:21

And that is where your app is hosted. 3:24

Let's test the app. 3:27

It looks like all the navigation links and sub-links work as expected. 3:30

You can even refresh the app, and everything still looks and works great. 3:34

Good. 3:38

Keep in mind that with Now, you'll get a unique URL for every deployment. 3:42

So if you deploy your app multiple times, you will have multiple URLs. 3:49

The good thing about having different deployment URLs is that you can easily 3:53

point users or clients to a specific version of your app. 3:58

And any time you make a change in your app, 4:04

Now rebuilds just the parts of the application that changed. 4:07

So it's quite performant when it comes to deploying any changes, 4:10

no matter how large your project. 4:13

Finally, when you log in to Zeit's website, 4:16

you're presented with a dashboard that lets you view each of your deployments. 4:19

Click the Deployments link. 4:23

And here, you not only see a full list of your deployments, 4:25

you're also able to delete any deployments you no longer use. 4:28

And there's a whole lot more you can do with Now, like map 4:33

your own domain name to Now's deployment URL and set up GitHub integration. 4:36

You can configure Now to deploy your app whenever you submit a pull request, 4:42

or make changes to existing pull requests. 4:45

I've posted links about those features in the teacher's notes with this video. 4:48

You need to sign up for Treehouse in order to download course files.

Sign up