The Zero Server web framework allows developers to create, build, and develop web applications with server-side rendering and little to no configuration. Zero Server accepts a mix of Node.js, React, HTML, MDX, Vue, Svelte, Python, and static files. Zero Server also now supports TypeScript.
The Zero web framework allows developers to create a web application by putting files in a hierarchy of folders. Little to no configuration is needed. The hierarchy of folders and the file name determines the route for the page that the file implements. The file itself can be a static file or a program written in a variety of languages. Zero initially supported React, HTML, and MDX to implement web pages. Zero recently added support for Svelte and Python files.
The extension of Zero Server abilities now allows developers to mix and match with fewer restrictions. Considering that Python is a popular language for machine learning, the Zero Server documentation provides the following developer scenario, made possible with Zero’s latest version:
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.
All under a single project folder as a single web application.
From the front-end perspective, the addition of Svelte support by Zero Server lets developers build pages with the advantages touted by the Svelte compiler: single-page components colocating style, template and behavior; reactivity baked into the language, surgical DOM updates giving extra performance on a range of applications, and more.
Before using Zero with Python files, developers must install Python3. Zero then lets developers define API endpoints as individual Python functions in files with a .py extension. The function should be named handler. If such a function is found in ./api/process.py file, it will be exposed as an API at http://<SERVER>/api/process. Zero uses Flask internally. This means that any Flask import, like jsonify (to create a JSON response) and request (to parse URL parameters) can be leveraged.
Zero auto-installs dependencies figuring in a requirements.txt file located in the project root using pip, Python’s package installer. Dynamic routing is provided by a file naming mechanism (any file or folder that starts with $ is considered a dynamic route). Zero Server gives an example of how to handle file upload using Python and Zero. Below is an example upload.py file:
# upload.py
from flask import request
from werkzeug import secure_filename
def handler():
if request.method == 'POST':
f = request.files['file']
f.save(secure_filename(f.filename))
return 'file uploaded successfully'
This will handle the upload action specified in the following HTML form (index.html):
<!-- index.html -->
<html>
<body>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>
</body>
</html>
On the other hand, Svelte files are server-rendered. If a Svelte component resides in a ./about.svelte file, it will implement the page at http://<SERVER>/about. For each Svelte page, Zero transpiles and bundles (with Parcel), renders on the server (so users don’t see a blank page until the JavaScript loads), and performs automatic code splitting. The top-level .svelte component/page is passed by default user and url props, which the Svelte component can consume, using Svelte export let prop declaration syntax:
<script>
export let user; // user data from session (req.user of Express)
export let url; // { query, params }
// also any preload data returned from preload()
</script>
For improved SEO, the page’s head tags can be set with the svelte:head component:
<svelte:head>
<title>Page Title</title>
</svelte:head>
<h1>Hello!</h1>
Additionally, API data can be preloaded and passed to a server-rendered Svelte component. To do so, the Svelte file must export a preload() function that will load any data that the page depends on, before rendering the page:
<script context="module">
export async function preload({ req, url, user }) {
const res = await fetch(`/api/messages`);
const messages = await res.json();
return { messages };
}
</script>
<script>
// messages prop returned from preload() is passed here.
export let messages;
</script>
Zero Server now also supports TypeScript. Zero can be tried without locally installing it, with Glitch. Zero is part of a trend of convention-over-configuration frameworks for creating web apps. Similar frameworks however, like Next.js for React, or Nuxt for Vue, often specialize in a single front-end framework. Such specialization decreases options for developers, but may lead to framework-optimized applications. It will be interesting to see what role Zero Server can play in micro-frontend architectures, which shy away from framework lock-in.
The Zero npm package is available under the Apache 2.0 open-source license. Contributions are welcome via Zero’s GitHub package and should follow the contribution guidelines.
