Lang
Blog

Zero Server — Build Web Applications with Zero Configuration

ByPayal Mittal
March 10th . 5 min read
Zero Server — Build Web Applications with Zero Configuration

Zero allows you to build applications without having to worry about package management, configuration, or routing. Now, you can write your code in the fusion of multiple languages with zero configuration.

In this blog, I’m going to give you a quick go-through about the Zero server so that you can consider using it in your next project -

What is Zero Server?

Zero is a unique web framework that bundles applications and simplifies modern web development. It can support multiple languages in a single project including React.js, Node.js, Vue.js, Svelte, HTML, Markdown, and Python so you can write your application code in the hybrid of all these languages.

Key Features -

Zero facilitates automatic bundling of the code and supports server-side rendering along with many other features, such as -

  • Auto Configuration and Dependency Resolution
  • Built-in File System
  • API Routing
  • Automatic Code Splitting
  • Multiple Languages Support
  • Supports SSR (Server-side Rendering) and SSG
  • Better Error Handling

How Zero Server Works??

Zero was designed to be flexible so that it can support multiple languages and frameworks. It runs each page using handlers, it works just like microservices but locally.

Zero uses file extensions to differentiate between Node.js and React.js frameworks. While react components must use .jsx extension, Node APIs use .js extension. It builds each page, when needed, which is why its load time is longer when you first visit the page. While running Zero in the production environment, you need to build your pages through zero build command.

👉 File-system Based Routing: Routing in Zero applications is based upon the file structure. If your node.js function resides in ./api/login.js, it will point at http://<SERVER>/api/login and likewise, if your React page is put as ./about.jsx and will point at http://<SERVER>/about.

👉 Auto-Configuration: You don’t need config filed for your project folder as it automatically gets compiled, bundled, and served. You just have to place your code.

👉 Zero Server API Routes: You can easily create API routes with Zero by creating an API endpoint in Node.js.

👉 Mix and Match languages: You can mix multiple languages inside a single project. Consider this -

  • Exposing Tensorflow model as a python API
  • Writing the user login code in Node.js
  • Using React pages to consume it
  • Your landing pages in a mix of HTML or Markdown/MDX

👉 Auto Dependency Resolution: If a file does require(‘underscore’), it gets automatically configured from NPM and resolved. You can even create your own package.json file to install a specific version of a dependency or package.

For example -

{
  "name": "myapp",
  "dependencies": {
    "underscore": "^1.4.0",
    "private_ui_pkg": "git+https://github.com/user/repo.git"
  }
}

👉 Dynamic Routing: Zero supports dynamic routing and any file/folder starting with the dollar sign ‘$’ is considered a dynamic route.

👉 Proxy Routing: Zero enables you to proxy routes to any other server and creates a JSON file with the url key with the URL of the server where we’re going to proxy route to.

Getting Started with Zero Server -

To get started with Zero, you will need the basic knowledge of Node.js and React.js. Also, you need to install Node v8+ on your device. Also, some knowledge of HTML/CSS would be beneficial.

You can install zero via npm, as -

npm install -g zero

Now, move ahead and get ready to see the demo where we’ll get a glimpse of what makes Zero special. You need to create a new folder and define a file named time.js inside it. Also, export Request and Response objects and import moment.js inside this file.

// time.js
const moment = require("moment");
module.exports = (req, res) => {
  var time = moment().format("LT"); // 11:51 AM
  res.send({ time: time });
};

Your API endpoint is ready. Now, run the following command to start the server like this -

zero

When you run the server, zero auto-installs all dependencies like moment.js and makes it available for you to use in the time.js file.

As you can see above, you implemented an API without configuring any routes or installing libraries, zero does all this behind the scenes and reduces a significant amount of workload.

Once you get the API running, we’ll see how to consume it using React.js at the frontend. All you have to do is to create a new index.jsx file and insert the following code in here -

// index.jsx
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>;
  }
}

Here, we initialized the standard React Component with one additional hook getIntitialProps() for the initial data population. Being an async static method, Zero calls getInitialProps when the page loads as it returns a plain object which populates props.

Closure:

Being as wonderful and unique a framework as it is, Zero has the potential to simplify the process of web development and even make it a fun experience.

Don’t forget to check out the official documentation to learn more about Zero Server.

Thanks for reading!

Share:
0
+0