Deploy to Now

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