DEV Community

Cover image for Wasp on Zerops: from recipe to a real challenge dashboard
Zerops Devs
Zerops Devs

Posted on

Wasp on Zerops: from recipe to a real challenge dashboard

How we shipped a full-stack Wasp app on Zerops in minutes — and used the same path to publish Octoverse-style stats for 270+ WeMakeDevs × Zerops Challenge submissions.

Wasp already gives you the full stack in one repo: React client, Node.js API, Prisma, and auth. Zerops already gives you managed PostgreSQL, static hosting, Node runtimes, and a deploy model that treats “client + API + DB” as ordinary services.

Put them together and you stop fighting glue. You write the app. A single zerops.yaml tells the platform how to build the SPA, bundle the API, wire DATABASE_URL, and run migrations on deploy. That pattern lives in the official Wasp Hello World recipe — and it is exactly what we used to ship zerops-zcp-challenge-summary.

Live showcase: https://appstage-290f.prg1.zerops.app

One-click recipe: Deploy Wasp on Zerops

Deploy on Zerops

Why Wasp and Zerops fit

Wasp concern Zerops answer
React SPA static service (Nginx) from wasp build + Vite output
Node API nodejs@24 service serving the Wasp server bundle
PostgreSQL + Prisma Managed postgresql@16 with ${db_*} → DATABASE_URL
Auth / cookies / CORS Project-level APP_URL + API_URL mapped into Wasp env keys
Migrations zsc execOnce on deploy so schema lands once per version

Wasp wants two public URLs (web + API) and a Postgres connection string. Zerops speaks that language natively: two services, one database, cross-service references in YAML — no hand-rolled Docker Compose, no “how do I expose port 3001?” side quest.

Start from the recipe (really)

The recipe is not a toy dump. It is a production-shaped topology:

  1. Import — import.yaml creates app (static), api (Node), and db (PostgreSQL), plus project env for public URLs.
  2. Build — zerops.yaml defines three setups from one repo: prod-client, prod-api, and dev.
  3. Run — Client is static files; API starts the Wasp bundle on port 3001; init commands migrate (and optionally seed).

You can click Deploy on Zerops, get a running hello-world with demo login, then replace pages and entities with your product. That is the path we took.

What we built on top of it

zerops-zcp-challenge-summary is a public field report for the WeMakeDevs × Zerops Challenge — Octoverse-style, not a private admin tool. Build with ZCP.

It answers questions like:

  • How many teams submitted? How many shipped a live Zerops URL, a repo, a social post?
  • Which frameworks showed up most?
  • Which official Zerops recipes did teams map to?
  • Which Zerops services carried the load?
  • Who won — and can the community browse and rank projects?

Product surface

Route Purpose
/ Overview KPIs, completeness, rankings, timeline
/projects Browse and filter 270+ submissions
/projects/:slug Project detail (repo, live, social, tags)
/ranked Community ranking via email-gated likes
/winners Headline, social, and credit winners

Stack stayed the recipe stack: Wasp ^0.25, React, Prisma, PostgreSQL on Zerops, client on static, API on Node 24 (Ubuntu) so Prisma’s native engine has OpenSSL without Alpine workarounds.

From hello-world to challenge summary

Roughly the loop we ran:

  1. Adopt / deploy the Wasp recipe topology — static app, Node API, Postgres.
  2. Keep zerops.yaml structure — build commands, Ubuntu for API, readiness check, URL mapping.
  3. Replace the domain model — Submission + Vote, seed from challenge export JSON.
  4. Ship product pages — overview charts, filters, detail, ranking, winners.
  5. Promote through stages — appdev / apidev for iteration, appstage / apistage for the public link above.

We did not rewrite how Wasp deploys. We reused the recipe contract and spent the time on the product.

Try it yourself

  1. Open the Wasp Hello World recipe.
  2. Deploy the small-production environment (or start from the recipe app repo).
  3. Confirm client + API + DB come up with the demo user.
  4. Swap in your entities, pages, and seeds — leave the Zerops wiring alone until you need a second database or cache.

When you want a concrete example of “recipe → real app,” open the challenge summary:

zerops-zcp-challenge-summary on Zerops

270+ submissions, live rankings, winners — full-stack Wasp, managed Postgres, static + API on Zerops, no custom PaaS fairy dust.

Useful Links

Top comments (0)