Installation

You can install zero globally by:

npm install -g zero

Hello World

Let's start by making a website that tells us server time.

First we need to create an API endpoint in Node.js to tell us time in JSON.

Create a new folder and add a new file time.js in that folder. In this file, export a function that accepts Request and Response objects (like Express):

const moment = require ( "moment" ) module . exports = ( req , res ) => { var time = moment ( ) . format ( 'LT' ) ; res . send ( { time : time } ) }

Once saved, you can cd into that folder and start the server like this:

zero

Running this command will automatically install any dependencies (like momentjs here) and start the web server.

Open this URL in the browser: http://localhost:3000/time

You just created an API endpoint 🎉:

Keep the server running. Now let's consume our API from a React page, create a new file index.jsx and add the following code:

import React from 'react' export default class extends React . Component { static async getInitialProps ( ) { var json = await fetch ( "/time" ) . then ( ( resp ) => resp . json ( ) ) return { time : json . time } } render ( ) { return < p > Current time is : { this . props . time } </ p > } }

This is a standard React component. With one additional hook for initial data population:

getInitialProps is an async static method which is called by zero when the page loads. This method can return a plain object which populates props .

Now go to this URL: http://localhost:3000/ and you should see the current server time rendered by React while fetch -ing an API endpoint you created earlier:

zero automatically bundles your code and supports server-side rendering. You don't need to fiddle with webpack anymore.

That's it! You just created a web application.