Zero Configuration Deployment for React apps with Zeit’s ▲now

UPDATE II: micro-list has been renamed to serve and repo has been updated to reflect that. Please refer to the README file directly for latest info on how to run it, as this article contains outdated details.

UPDATE: now-serve has been replaced with micro-list package to support Now deployment with environment variables. Instead of using now-serve to deploy the production build, Now CLI is used instead to deploy the production build together with some custom environment variables. micro-list is then used to serve those static files using “list build/” command. Refer to the codes changes directly to understand this changes.

With the release of create-react-app (CRA) by React team, the first thought that I had in mind was: “wow, this is great! now, how can I use Zeit’s awesome ▲now service to deploy project that’s generated using CRA?”

At the time CRA was released, I have been following this new and awesome service in deploying NodeJS apps called ▲now. I have tried it myself and the first impression that I had was: Wow. Is this for real? finally someone did it! Deploying NodeJS project with single command: now

With that excitement, another news broke down and made me even more pumped-up, create-react-app project. That’s where I decided to figure out how to marry them together.

Introducing: create-react-app-now

PS: it is not necessary that you build your project on top of create-react-app-now (although you can if you want to), it serves more as an example on how people can use ▲now with CRA-generated projects. This write up will help you in setting it up yourself. It is very simple, trust me.

First thing you need to do is to follow create-react-app readme to get started:

$ npm install -g create-react-app
$ create-react-app <projectname>
$ cd <projectname>

Then you can use “npm start” to run the project locally, “npm run build” to build for production, and other commands that CRA supports.

What you need to keep an eye on is “npm run build” as this command will generate a new folder called “build” in your project’s root folder to keep the production-ready code.

Essentially, you want to deploy that production-ready code to a host. It can be anywhere so long it can serves static html+js+css.

In this case, we are going to use now-serve to host it (ensure you are still inside the <projectname> root folder):

$ npm install -g now now-serve
$ npm run build
$ ns build

That’s it! Your React app will be ready in few minutes if not seconds!

What’s happening here is that, we installed now cli and now-serve cli globally. Followed by building the project to be production-ready. Finally, now-serve is used to deploy the “build” folder into ▲now and serve it to the WWW.

Whenever you need to re-deploy, just run:

$ npm run build
$ ns build

It is that simple! Zero configuration indeed.

But, let’s go a step further to simplify things. Rather than keep repeating the commands to build and deploy to ▲now, why not add a simple script into package.json that automate the process with 1 single command?

Install now cli and now-serve cli as devDependencies:

$ npm install now now-serve --save-dev

Next, add the custom npm script:

{
  ...
  "scripts": {
    ...,
    "deploy": "npm run build && ns build"
  }
}

Whenever you want to deploy (or re-deploy) you React app, just run this 1 command:

$ npm run deploy

PS: if you like this reading, give it a Love maybe? or check out my github and give create-react-app-now a star maybe? if you have any feedback feel free to leave a response below. Cheers!