Mohit Bajoria

Software Developer

Deploying apps to Zeit now

March 08, 2018

Recently i have been using zeit now to deploy web apps and really it's just the one command deployment of your static, Node.js site.

What is Now ?

Now allows you to take your Javascript or docker based application to the cloud with just one command. Practically any directory that contains a package.json ordockerfilecan be taken to cloud with just one commandnow

When you deploy a project, now will provide you with a unique url something like, it's a unique URL and everytime you deploy it will change, unless you have a specific domain.

Get Started

You need to have now globally installed on your PC, you can install it by

npm install -g now

First time you do now it will ask for your email address and password that you have used during sign up on Zeit now, if you haven't signup yet you can do here now

Let's deploy a Nodejs based application, we will be using create-react-app to generate a application and then deploying it to now

*you should have create-react-app globally installed on your computer to generate below boilerplate

In my directory, i will do create-react-app my-app and it will generate a boilerplate with all the configuration done out of the box

Now i will cd into the directory cd my-app and run now, you will get a unique url and you are done

> Deploying ~/Desktop/Code/my-project/my-app under
> Using Node.js 8.10.0 (default)
> Ready! (copied to clipboard) [15s]
> You ( are on the OSS plan. Your code and logs will be made public.
> NOTE: You can use `now --public` to skip this prompt
> Synced 1 file (246.02KB) [2s]
> Initializing…
> Building
> ▲ npm run build
> > my-app@0.1.0 build /home/nowuser/src
> > react-scripts build
> ▲ npm install
> ✓ Using "yarn.lock"
> ⧗ Installing 3 main dependencies…
> ✓ Installed 1368 modules [11s]
> Creating an optimized production build...
> Compiled successfully.
> File sizes after gzip:
>   35.72 KB  build/static/js/main.ee7b2412.js
>   299 B     build/static/css/main.c17080f1.css
> The project was built assuming it is hosted at the server root.
> You can control this with the homepage field in your package.json.
> For example, add this to build it for GitHub Pages:
>   "homepage" : "",
> The build folder is ready to be deployed.
> You may serve it with a static server:
>   yarn global add serve
>   serve -s build
> Find out more about deployment here:
> ▲ npm start
> > my-app@0.1.0 start /home/nowuser/src
> > react-scripts start
> Starting the development server...
> Deployment complete!

Yes, it's that simple to deploy to now, Thanks to ZEIT who have made this amazing tool for humans.

Dealing with ENV variables

If your application deals with env variables, secret_key, passwords, you can also add secrets to now

e option

Simplest option is using -e option, assuming that you would like to add API_KEY and give it a value of sjfsbshcsbc, this is how you can do

now -e API_KEY="sjfsbshcsbc"

This will deploy the project within the current directory and assign the environment variable, you can access it like this


Securing env variables using Secrets

Sometimes you just don't want to expose your API_KEY to another team members or you want to keep it secret, this can be accomplished using now secret which will allow you to store such data in a secure way

now secret add api_key your_value

Once you do this, this api_key content is not directly accesible by anyone, Afterwards you can access this secret (which you add above) to an env variable

now -e API_KEY=@api_key

You can also pass -e multiple times, if you have multiple secrets like this

now -e API_KEY=@api_key -e DATABASE_PASSWORD=@dbpassword

Deleting remote Github branches