philipp-spiess / jumpstart

🔋 Jumpstart is batteries-included Remix starter kit

Welcome to 🔋 Jumpstart

🔋 Jumpstart is batteries-included Remix starter kit by Philipp Spiess.

Getting started

npx create-remix@latest --template philipp-spiess/jumpstart

What's included

• 🧱 App framework: Remix, Vite and React
• 🪲 Linting and Typechecking: TypeScript and Biome
• 🔬 Testing: Vitest and React Testing Library
• 🗄️ ORM: Drizzle on Cloudflare D1
• 🎨 UI and Styling: Tailwind, shadecn/ui, and Taxonomy.
• 🔒 Authentication: remix-auth and remix-auth-github
• 🌩️ Deployment: Cloudflare Pages
• 🔄 CI/CD: Github Actions

What's coming?

Here are some features that I want to add in the future. Create an issue if you want to see something else.

• Analytics, error logging, logs, and tracing via Logkit
• Dark/light mode support
• Feature flags
• Authorization
• Mutli-tenancy and teams
• Self service via Stripe
• Emails and background/scheduled workers
• Admin panel
• Marketing tools (Blog, Docs)

Learn more

📖 See the Remix docs and the Remix Vite docs for details on supported features.

First steps

Before you start development, you'll need to install the dependencies and configure the local development environment. For managing the node and pnpm versions, we recommend using mise.

pnpm install
cp .dev.vars.sample .dev.vars
pnpm db:migrate

If you wish to use GitHub authentication, you'll need to [create a new GitHub application[https://github.com/settings/developers]. Steps for this can be found in the example .dev.vars config.

Development

pnpm run dev

Deployment

This project is set up continuously to deploy to Cloudflare Pages. For your first deployment, you'll need to set up a new project in Cloudflare Pages.

1. Create a new project via Wrangler

   pnpm wrangler pages project create <PROJECT_NAME>

2. Create a new DB via Cloudflare D1

   pnpm wrangler d1 create <PROJECT_NAME>

3. Change the name of the project from jumpstart to your <PROJECT_NAME> in the following files:

   • wrangler.toml (the name and d1_databases bindings)
   • .github/workflows/ci.yml (in the migration step)
   • package.json (in the deploy and db:migrate scripts)

4. Change the production URL of the project in app/.server.auth.

5. Configure environment variables in Cloudflare Pages (check the .dev.vars file for the required variables). This can be done from the Cloudflare UI.

Setting up GitHub Actions

1. Create a Cloudflare access token with the Edit Cloudflare Workers preset.

   ⚠️ Important: Make sure to additionally add D1 edit permissions, otherwise automated database migrations will fail.

2. In GitHub, go to Settings > Secrets and variables > Actions and add a new environment secret with the CLOUDFLARE_API_TOKEN name and the token created in the previous step.