Deploying Navi with ZEIT Now

ZEIT Now is a cloud platform for serverless deployment that allows you to deploy your Navi projects and then push live to production on your personal domain or a free .now.sh suffixed URL.

This guide will show you how you can deploy a Navi project in just a few steps:

Step 1: Getting Started with Navi

If you haven’t already set up your Navi-based project, use Create React Navi App to bootstrap one.

Step 2: Getting Now

You can get Now by downloading Now Desktop, which will also install Now CLI and keep it up-to-date automatically.

Opening Now Desktop will present you with a signup flow and a quick tutorial to get you acquainted.

Otherwise, to get set up quickly in your terminal, install Now CLI with npm using the following:

npm install -g now

If you don’t have an account, signup and then run the now login command to log in with your account in the terminal.

Step 3: Preparing to Deploy

With a project ready to go, you can prepare to deploy by creating a few pieces of configuration which will allow Now to understand how to build your project, what to deploy, and where to route users when serving your app.

The first piece of configuration is a now.json file, containing the following:

{
  "version": 2,
  "name": "my-navi-project",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "build" }
    }
  ]
}

To explain the above briefly, this now.json file tells Now to:

With this in place, the final piece of configuration is to tell the @now/static-build builder how to build the app for Now to serve from the build directory.

By default, create-react-app will provide build scripts, and those scripts will output the build directory. The only change you need to make is to create a now-build script in the package.json:

{
  "scripts": {
    ...
    "now-build": "npm run build"
  }
}

Step 4: Deploying

With configuration complete, the only remaining step is to deploy using the following command in your terminal:

now

Now will then describe the build progress and provide you with a URL similar to this one: https://my-navi-project-7hq734oib.now.sh/

Resources