Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to deploy your React app with minimal configuration, using Now.
Resources
- Now – Global Serverless Deployments
- zeit.co
- now.json configuration
- Deploy a Create React App project with Now
- Domains and Aliases
- Now for GitHub
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