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"
}

0:00
Now is a deployment platform created by a company called Zeit, who also
0:04
built open source tools like Next.js and the HyperTerminal, among others.
0:09
With Now, you can instantly deploy your app with minimal configuration.
0:13
As you'll see, just one command, called now, deploys your app.
0:17
I recommend signing up for an account at Zeit.co.
0:20
It's free, and you can also sign up and log in using your GitHub account.
0:23
For this video, I'm going to use a course directory project that I've not yet
0:27
deployed with GitHub Pages or any deployment tool.
0:30
I suggest that you do the same to avoid any possible errors or
0:33
conflicts in the deployment configuration.
0:36
Now has a desktop app you can download, and a CLI, or command line interface.
0:42
I'm going to be using Now's CLI tool for this deployment.
0:44
So first, I'll install the CLI globally with npm install -g now.
0:52
When using Create React App,
0:54
there are a few steps to follow to deploy your app with Now.
0:58
First, you need to create a now.json configuration file
1:02
that instructs Now how to build the project.
1:05
So let's do that.
1:06
Inside the root of the project, create a new file named now.json.
1:11
In this file, we include the version of Now we want to use, along with the build,
1:16
and routers, and an optional project name.
1:19
The Zeit docs has a handy boiler plate snippet containing all these information,
1:24
which you can copy and paste into your now.json file.
1:28
I've also posted the snippet in the teacher's notes.
1:31
In the file, we are specifying that we want to use Now version 2,
1:36
the latest version of Now as I'm recording this video.
1:40
I'll set name to course-directory.
1:45
And that's all I really need to change in this file.
1:47
You don't really need to worry about what all this means.
1:51
The builds property defines the builds.
1:54
So in Now, builds are a step-up deployment that transform a deployment source
1:58
into production-ready outputs.
2:01
This instructs Now to use its @now/static-build, to build and
2:06
deploy the React application, selecting the package.json fie as the entry point.
2:12
And the routes property configures custom routes that map to the static files in
2:16
the code, to execute in our app.
2:18
Again, don't worry too much about what all this code means.
2:20
You can read more about it in the links posted in the teacher's notes.
2:24
Finally, we need to include a script and package.json that specifies
2:30
what command Now will run on the server to build the application,
2:35
in the scripts object, at a key named now-build.
2:41
And set it to, react-scripts
2:47
build && mv build dist.
2:52
You can also copy this snippet from the teacher's notes.
2:55
It's specifying mv build dist, to move all the static files from the build
3:00
folder to the dist folder, which Now identifies as its static folder.
3:07
All right, now we're ready to deploy.
3:08
In the console, all you need to do to deploy the app is run the command, now.
3:15
It might take a little while to build your app the first time around.
3:18
But once your app has deployed successfully,
3:21
you will see a URL in the console output.
3:24
And that is where your app is hosted.
3:27
Let's test the app.
3:30
It looks like all the navigation links and sub-links work as expected.
3:34
You can even refresh the app, and everything still looks and works great.
3:38
Good.
3:42
Keep in mind that with Now, you'll get a unique URL for every deployment.
3:49
So if you deploy your app multiple times, you will have multiple URLs.
3:53
The good thing about having different deployment URLs is that you can easily
3:58
point users or clients to a specific version of your app.
4:04
And any time you make a change in your app,
4:07
Now rebuilds just the parts of the application that changed.
4:10
So it's quite performant when it comes to deploying any changes,
4:13
no matter how large your project.
4:16
Finally, when you log in to Zeit's website,
4:19
you're presented with a dashboard that lets you view each of your deployments.
4:23
Click the Deployments link.
4:25
And here, you not only see a full list of your deployments,
4:28
you're also able to delete any deployments you no longer use.
4:33
And there's a whole lot more you can do with Now, like map
4:36
your own domain name to Now's deployment URL and set up GitHub integration.
4:42
You can configure Now to deploy your app whenever you submit a pull request,
4:45
or make changes to existing pull requests.
4:48
I've posted links about those features in the teacher's notes with this video.

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

Deploying a React App

Deploy to Now

Resources

now.json Snippet

package.json Script

Sign in