Building a Full-Stack Serverless Application with Cloudflare Workers

Serverless computing has revolutionized software development, simplifying deployment and DevOps. This tutorial demonstrates building a full-stack serverless application using Cloudflare Workers, a platform that abstracts away scaling and infrastructure. The project, "Repo Hunt," is a daily leaderboard for open-source projects, inspired by Product Hunt and Reddit. The finished site is available here.

Cloudflare Workers, leveraging Cloudflare's global network, delivers extremely low-latency performance regardless of user location. The Wrangler CLI tool simplifies building, uploading, and publishing. This tutorial uses the "Router" template, enabling URL-based routing. The source code is available on GitHub [link-to-github-repo].

Setting Up Your Environment

Install Wrangler:

npm install -g @cloudflare/wrangler

Create a new project using the Router template:

wrangler generate repo-hunt https://github.com/cloudflare/worker-template-router
cd repo-hunt

The Router template utilizes Webpack, allowing the inclusion of npm modules. A Router class handles URL routing. A basic example:

// index.js
const Router = require('./router');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  try {
    const r = new Router();
    r.get('/', () => new Response("Hello, world!"));
    const resp = await r.route(request);
    return resp;
  } catch (err) {
    return new Response(err);
  }
}

Workers respond to fetch events, returning a Response. This tutorial uses routes for the homepage (/), submission form (/post), and submission handling (/repo).

Routing and Templating

The homepage (/) route renders a list of submitted repositories. We'll start with a simple HTML response:

// index.js
const Router = require('./router');
const index = require('./handlers/index');

// ... (rest of index.js)

// handlers/index.js
const headers = { 'Content-Type': 'text/html' };
const handler = () => {
  return new Response("Hello, world!", { headers });
};
module.exports = handler;

Use wrangler preview to test. Next, we'll create a more sophisticated template:

// handlers/index.js
const headers = { 'Content-Type': 'text/html' };
const template = require('../templates/index');

// ... (rest of handlers/index.js)

// templates/index.js
const layout = require('./layout');
const template = () => layout(`<h1 id="Hello-world">Hello, world!</h1>`);
module.exports = template;

// templates/layout.js
const layout = body => `<!-- HTML layout including Bulma CSS -->${body}`;
module.exports = layout;

This uses a layout template for consistent styling (Bulma CSS is included).

Data Persistence with Workers KV

Workers KV provides a key-value store for data persistence. We'll store repositories (key: repos:${id}) and daily lists (key: $date). Note: Workers KV requires a paid plan.

Basic KV operations:

REPO_HUNT.put("myString", "Hello, world!"); // Setting a value
const string = await REPO_HUNT.get("myString"); // Retrieving a value

We'll create classes for managing Repo and Day data:

// store/repo.js
const uuid = require('uuid/v4');

class Repo {
  // ... (Repo class implementation)
}
module.exports = Repo;

// store/day.js
const today = () => new Date().toLocaleDateString();

module.exports = {
  add: async function(id) { // ... },
  getRepos: async function() { // ... }
};

The Repo class handles validation and persistence. Day manages daily repository lists.

Handling User Submissions

A form (GET /post) allows users to submit repositories. A POST /repo handler processes submissions:

// handlers/create.js
const qs = require('qs');
const Repo = require('../store/repo');
const Day = require('../store/day');

// ... (create handler implementation)

This uses the qs library to parse form data, creates a Repo object, saves it to KV, and adds its ID to the daily list.

Rendering Data on the Homepage

The homepage now retrieves and renders repository data:

// handlers/index.js
// ... (updated index handler)

// templates/index.js
// ... (updated template function to render repos)

The Day module's getRepos function fetches and instantiates Repo objects. The template renders each repository.

Deployment

Claim a Workers.dev subdomain:

wrangler subdomain my-subdomain

Deploy the application:

wrangler publish

Create a KV namespace in the Cloudflare dashboard and update wrangler.toml with the namespace ID:

[[kv-namespaces]]
binding = "REPO_HUNT"
id = "$yourNamespaceId"

Republish after adding the KV namespace to wrangler.toml. The application is now live!

Further Development

This tutorial provides a foundation for a serverless application. Future enhancements could include upvoting, comments, and more sophisticated features. Explore the Workers documentation and template gallery for further development ideas.

The above is the detailed content of Building a Full-Stack Serverless Application with Cloudflare Workers. For more information, please follow other related articles on the PHP Chinese website!