N4-cli NPM | npm.io

N4 Stack

Quick Start Guide

Prerequisites

Locate your Supabase Project URL & Anon Key in your Supabase project's Settings --> API section.

You will need to sign up for a Cloudflare account to use the N4 Stack. You can sign up for a free account here.

R2, which is Cloudflare's equivalent to AWS S3, is used to store your static assets. You can create an R2 bucket here.
Note: We have found setting up an R2 bucket with a public URL before hand is the fastest way to get started. Cloudflare's api lack an easy way to get a bucket's public URL or adding one to a created bucket.

Attach a domain to your R2 bucket to make it public

Public Bucket is a feature that allows users to expose the contents of their R2 buckets directly to the Internet. By default, buckets are never publicly accessible and will always require explicit user permission to enable.

Documentation on how to attach a domain to your R2 bucket.

Example: assets.nicholasoxford.com is my R2 bucket's custom domain

Create a Cloudflare API key

You will pass this into the n4-cli to authorize the creation of your project.

You can create a Cloudflare API key here.
Click the "Create Token" button
Choose Edit Cloudflare Workers template

For the best experience, we recommend adding DNS and D1 permissions

Under Permissions select + Add More and chose Account > D1 > Edit
Under Permissions select + Add More and chose Zone > DNS > Edit
Account Resources: Include > All Accounts
Zone Resources: Include > All Zones
Click Continue to Summary

Make sure to save your API key somewhere safe. You will not be able to see it again without rollibng a new one.

How to run the N4 Stack

npx n4-cli [options]

Options

-D, --destination : 📂 Choose the destination path for cloning the repository.
-N, --project-name value: 🏷️ Specify a custom name for your project.
--api_key value: 🔐 Enter the API Key for your Cloudflare account.
--SUPABASE_URL value: 🌐 Provide your Supabase Project URL.
--SUPABASE_ANON_KEY value: 🔑 Input your Supabase Project Anon Key.
--R2_PUBLIC_URL value: 🔗 Specify your R2 Public URL.
--R2_BUCKET_NAME value: 🔗 Enter the name of your R2 bucket.
--D1_DATABASE_ID value: 🆔 Input the ID of your D1 Database.
--D1_DATABASE_NAME value: ⑆ Name your D1 Database.

The N4 Stack

Writing zero-user weekend apps is apart of software engineers journey. The N4 Stack gets you passed so many of the annoying parts of setting up a site, with Auth, so you can focus on the fun parts. Even if you app scales beyond a weekend project, the N4 stack is ready to handle it.

I have clocked deploys at 36 seconds 🏎️

Features

Remix App: Start with a Remix app, a React framework for building production-grade apps.
Cloudflare Pages: Deploy your app to Cloudflare Pages with a single command.
R2 CDN: Leverage the power of Cloudflare's network with their R2 CDN, zero egress fee object storage.
D1 Database: Cloudflare's database offering, D1, is a serverless sqlite database with features and perfomance that rivals other leading vendors.
Supabase Authentication: Supabase is an open source Firebase alternative. We are using them for authentication.
Note: I know Supabase gives you a Postres database with tons of features, I have found the perfomance of D1 + Workers/Pages to be unbeatable. TODO: Add a flag to roll your own auth in D1 and skip the Supabase setup. This wont be the default because I think Supabase as a platform is great.
Shadcn: "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source." - Shadcn