If you’ve ever experienced web development, you probably hate configuration files — there are so many of them. The most common ones are Babel, ESLint, tsConfig, webpack, package.json, etc. Moreover, various configurations use different file extensions, and various plug-ins need to be installed when using, which is tedious and boring. A few years ago, mainstream frameworks tried to provide scaffolding for mindless startup, such as create-React-App and Vue Create, and some of the niche frameworks even featured zero configuration. In this issue, we introduce zero Server, a Web framework with zero configuration.

An overview of the

Zero configuration means that you don’t need to write any configuration files by hand, just put the code in the workspace and use a single command to install, compile, package, start, and so on. Zero Server is a Web framework designed with this vision in mind. Its key features are:

  • Zero dependency configuration management
  • API routing based on file path
  • Dynamic routing
  • Support for server-side rendering (SSR) and static page generation (SSG)
  • Support for mainstream frameworks and languages, including React, Vue, Node, Python, Markdown, and more

Get Started

OK, to skip the vague overview, let’s go back to where it all started — installation. To use the framework, you need to install Zero globally:

npm i -g zero
Copy the code

After installation, create a root directory for the Zero application:

mkdir zero-app
Copy the code

Create a new index. JSX file in the zero-app directory: let’s start with a simple React application and write a Hello World component:

export default() = ><h1>Hello World</h1>;
Copy the code

Run zero

cd zero-app
zero
Copy the code

The configuration (.babelrc,.gitignore) and dependency files (package.json, node_module, yarn.lock) are generated automatically:

By the way, Zero helped us launch the service; Type localhost:3000 in the browser to see the index. JSX implementation:

React, let’s try Vue; Create a new about.vue in the root directory as follows:

<template>
  <h2>{{ message }}</h2>
</template>
<script>
  module.exports = {
    data() {
      return {
        message: "About Vue"}; }};</script>
Copy the code

Zero recognizes the extensions of all the major frameworks, handles the dependencies, and finally hot-starts the service — a one-stop service that saves effort and effort. Let’s go to localhost:3000/about and see what happens:

You can also try markdown, Python, HTML, etc.

routing

The relationship between files and routes in the Zero framework is as follows:

file route
index.jsx localhost:3000
about.vue localhost:3000/about
markdown.md localhost:3000/markdown

The Zero application is a file directory based routing system:

  • In a development environment, whenever you create a new file in a specific directory, Zero will use theLujin + file name** (not including extension) automatically set up the corresponding route (a bit slow due to loading dependencies)
  • The build environment needs to be built in advance (zero build), and Then Zero will be in.zeroSpecific static resources are generated under the directory, and routing tables are established based on the file directory

API routing

Following up, Zero supports dynamic apis in addition to compiling static resources. The default framework is Express.js. We create a new node file/API /hello.js and return a message object:

export default (req, res) => {
  res.send({ message: "Hello from API." });
};
Copy the code

Localhost :3000/ API /hello: localhost:3000/ API /hello

Now look at how to call these apis. Zero supports server rendering (SSR). Let’s use React as an example. Zero native support for the React SSR framework next.js; It provides a method to getInitialProps to get the API data and return the page resources when rendered by the server. Let’s create a new Hello. JSX file using back-end rendering techniques:

import React from "react";

export default class extends React.Component {
  static async getInitialProps() {
    return fetch("/api/hello")
      .then((res) = > res.json())
      .then((json) = > ({ message: json.message }));
  }

  render() {
    return <p>Message from API: {this.props.message}</p>; }}Copy the code

See what happens when the server calls the API:

Dynamic routing

Zero also provides a dynamic routing mechanism; Of course, it is still based on the file system path, but the dynamic dynamic routing table corresponds to the file beginning with the $character. For example, create a react page — /user/$name.jsx; Get the URL parameter name again using the getInitialProps of next.js:

import React from "react";

export default class extends React.Component {
  static async getInitialProps({ url }) {
    const { params } = url;
    return { name: params.name };
  }

  render() {
    return <div>Your user name: {this.props.name}</div>; }}Copy the code

Enter localhost: 3000 / user/Onion; The Onion is dynamically populated with $name.

Vue, Svelte, Python and other frameworks have their own SSR methods, which you can check out here.

summary

Zero is one of the more interesting Web frameworks that, from a case study, almost fulfills all of the Zero configuration requirements. But in reality, I guess, there are very few technical heads who put it on the production line. Zero-configuration Web frameworks are still too young to be born, and the production environment is likely to be a bottomless black hole. However, Zero is a perfect choice for writing demos and setting up a local service quickly. Of course, I also hope that one day, there will be a real elegant framework to solve the current cumbersome configuration; But maybe front-end developers won’t be worth much by then. Haha, let’s wait and see.