Introduction

Picobase is a platform for publishing web apps built with modern Web Standards. With Picobase you get hosting, authentication and everything else your app need managed for you.

Get Started

The only thing you need is a index.js file that exports a WinterCG Fetch API handler. With this you can publish a react app, api or anything else.

export default async function handler(req, ctx) {
  const url = new URL(req.url);
 
  if (url.pathname === "/hello") {
    if (!ctx.user) {
      return new Response("Unauthorized", { status: 401 });
    }
    return new Response(`Hello ${ctx.user.name}!`);
  }
 
  // Static assets in /public folder are served if no response returned
  return null;
}

Frameworks

Since Picobase is built with modern Web Standards, you can use most modern frameworks that supports the WinterCG Fetch API which includes Hono, Remix, ElysiaJS and many more. Below is a minimal example of a Hono app, but in the official docs (opens in a new tab) there are more complete examples of full-stack apps such as a server side rendered react apps etc.

import { Hono } from "hono";
const app = new Hono();
 
app.get("/", (c) => c.text("Hono!"));
 
export default app.fetch;

Development

If you are using a framework you can use its built in development tools, but you likely need to wrap the entrypoint so that you can mock the context object passed by Picobase in production. An example of this is provided here using the Cloudflare Wrangler CLI. The Cloudflare runtime is very similar to the one used by Picobase so the wrangler cli is a good choice for local development if it can be used to run your framework.

npx wrangler dev dev.js

import handler from "./index.js";
 
export default {
  fetch: async (req, env) => {
    const response = await handler(req, {
      user: {
        id: "abc",
        name: "John Doe",
      }
      instance: {
        id: "123",
      }
    });
 
    if (response) {
      return response;
    }
 
    const url = new URL(req.url);
    return env.ASSETS.fetch(`/public${url.pathname}`);
  },
};