Zero Server is an application bundler made to simplify web development. It takes away the hassle of package management and routing by automatically doing it for you. As stated on its website,
It’s as simple as writing your code in a mix of Node.js, React, HTML, MDX, Vue, and static files and putting them all in a folder. Zero will serve them all. Zero abstracts the usual project configuration for routing, bundling, and transpiling to make it easier to get started.
Zero Server offers several features that make it a great choice for developing your next web application:
Your project folder doesn’t require config files. You just place your code and it’s automatically compiled, bundled, and served.
File system-based routing
If your code resides in
./api/login.js, it’s exposed at
Auto dependency resolution
If a file does
require('underscore'), it is automatically installed and resolved. You can always create your own
package.json file to install a specific version of a package.
Zero is designed to support code written in many languages, all under a single project. Imagine this:
- Exposing your Tensorflow model as a Python API
- Using React pages to consume it
- Writing the user login code in Node.js
- Your landing pages in a mix of HTML or Markdown/MDX
You can have all this under a single project folder as a single web application.
Improved error handling
Each endpoint runs in its own process. So if
/api/login crashes for some reason, it doesn’t affect the
/chatroom page or the
/api/chat API. Crashed endpoints are restarted automatically when the next user visits them.
In this tutorial, we will learn how to set up an application with Zero Server and demonstrate the process by building a small React e-commerce application. Let’s dive in.
To follow this tutorial, you’ll need a basic understanding of React and Node.js. Also, ensure that you have at least Node v8+ installed on your machine before you begin. HTML/CSS knowledge is also required, but not mandatory.
To build the required application, here are a few tools we’ll use:
Exploring Zero Server
To start working with Zero, you need to first install it globally on your development machine. To do so, type the following in your terminal:
Once this is done, you can go ahead and start building your applications using its capabilities. Let’s do a quick demo to see what makes Zero unique. Create a test folder called
zero, and define the following folder structure:
api folder, create a
time.js file and add the following code to it:
In our file, we:
- Export a function that accepts
Responseobjects (like Express)
And that’s it! Your API is ready. Now, when you run your server, Zero does two things:
- Automatically installs and makes
moment.jsavailable for you to use in your file
- Exposes your newly created API to the URL
To run your file, navigate to the created folder via your terminal and type the command
**zero**. Once that’s done, you should see this in your terminal:
Now when you visit http://localhost:3000 in your browser, you will see this:
As you can see, without installing any library or configuring routes, you have implemented a basic API. Zero reduces your workload by doing all this for you behind the scenes. This way, you get to focus on what truly matters to your project: your code.
Now that we have an API running, let’s see how to consume it using React on the front end. At the root of your directory, create an
index.jsx, and add the following lines of code to it:
In our file, we initialize a standard React component, with one additional Hook for initial data population.
getInitialProps is an
async static method called by
zero when the page loads. This method can return a plain object, which populates
Now, go to this URL: http://localhost:3000. You should see the current server time rendered by React while fetching the API endpoint you created earlier:
That’s it! You have created a basic application without any installation or extra configuration. This is very powerful, and it’s the base Zero Server stands on.
N.B., you can always create your own
package.json file to install a specific version of a package.
Bootstrapping an e-commerce application with Zero Server
Now that we have an understanding of how Zero works, let’s go ahead and bootstrap a small e-commerce application.
Update your folder structure to look like this:
In our components directory, we define three files:
Productcomponent to hold a single product’s data
ProductListcomponent to serve, fetch, and display products
Totalcomponent to store our current cart data
**index.jsx** will house all our components. As mentioned above, Zero currently supports the following languages:
To distinguish between Node.js and React, Zero uses the file extension. You’re required to name your React components with the
jsx extension and your Node APIs with the
js extension to enable Zero to process your files properly.
Creating our components
First, let’s define our
Product component. Open up the file and add the following lines of code:
Here, we display a single product and define functions to add and remove items from our state, which is where the current cart data is stored.
Before we create our
ProductList component, let’s create our
Total component. This will house the current cart state. Open up your
Total.jsx, and add the following lines of code to it:
Total.jsx file, we calculate the total alongside the taxable amount for the products in our cart.
To allow our
ProductList.jsx file to display a list of products, let’s add the following code:
This component does three things:
- Sets our initial product data
- Defines functions to handle parts of our app, like calculating the total price of items in the cart
- Passes data down to other components as props
There’s one last step left to see our products on-screen. All we need to do is import our
ProductList.jsx into our index component. Update your
index.jsx to look like this:
Now, start your server by typing
zero in your terminal. Once you visit http://localhost:3000, you will see this screen:
And that’s it! We have created a working React application without installing or configuring routes, or any other hassle! All thanks to Zero Server.
In this tutorial, we’ve built a simple React application where items can be added and removed from a cart. We’ve been able to write our application without any extra configuration or package management using Zero Server.
Zero is a powerful tool that has the potential to speed up your web development. Be sure to check out the docs. Happy coding!
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.