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:
- Build using the latest Now 2.0 platform.
- Set a project name for all deployments.
- Build your application using the @now/static-build builder and configure the builder to look in the
build
directory for the built app.
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
- Visit the ZEIT Now documentation to learn more about what you can deploy and how you can configure your deployments to do more.