The Remix K-pop Stack is an official Netlify template that scaffolds a full-stack Remix application pre-wired for Netlify deployment, Supabase authentication and database, and Tailwind CSS styling.
What is the Remix K-pop Stack?
The Remix K-pop Stack is a starter template published by Netlify that combines Remix, TypeScript, Tailwind CSS, Supabase, and Cypress into one deployable project. It takes a project name via create-remix and produces a complete app with a netlify.toml configuration for Netlify's edge network. The included example is a simple note-taking app demonstrating user signup, login, and note creation and deletion.
Key Features
- Netlify deployment — Includes a
netlify.tomlconfiguration for building on Netlify's edge nodes, plus deploy previews and CI/CD when connected via the Deploy to Netlify button ornetlify init. - Supabase integration — Uses Supabase as both the Postgres database and authentication provider; the README includes SQL queries to create
profilesandnotestables plus a trigger that inserts a profile on new user signup. - Tailwind CSS — Utility-first styling is pre-configured so you can start writing styled components without setting up a build pipeline.
- TypeScript — The entire project is typed, and
npm run typecheckruns type checking across the whole project. - Cypress end-to-end testing — Cypress tests are configured in the
cypressdirectory, using@testing-library/cypressfor semantic selectors, and thenetlify-plugin-cypressruns tests on successful builds. - ESLint and Prettier — Linting is configured via
.eslintrc.js, and Prettier formatting is available throughnpm run formator an editor plugin. - Session management — User sessions are handled in
app/session.server.ts, with aSESSION_SECRETenvironment variable generated by thecreate-remixcommand.
Who is the Remix K-pop Stack for?
- Remix developers — who want a production-ready starting point with authentication and a database already wired up, so they can focus on building their own features.
- Netlify users — who want to deploy a Remix app to Netlify's edge network with CI/CD, preview deploys, and environment variable support built in.
- Full-stack learners — who want to study a real integration of Remix with Supabase, including SQL schema, auth triggers, and server-side session verification.
What can you do with the Remix K-pop Stack?
- Create a new full-stack app quickly — Run
npx create-remix --template netlify-templates/kpop-stackto scaffold a project, then start the dev server withnpm run devornetlify dev. - Add Supabase auth and data — Use the provided SQL queries to create the
profilesandnotestables, set theSUPABASE_URLandSUPABASE_ANON_KEYenvironment variables, and your app gains user signup, login, and note creation and deletion. - Test end-to-end — Run
npm run e2e-testto start the dev server and Cypress client, and rely onnetlify-plugin-cypressto run tests against the built site during deployment.
How does the Remix K-pop Stack work?
The stack is installed as a Remix template via the create-remix command. After installation, you connect a Supabase project, add three environment variables — SUPABASE_URL, SUPABASE_ANON_KEY, and SESSION_SECRET — and run the SQL queries from the README to create the database schema. The app then runs locally with npm run dev or netlify dev; the latter also lets you test Netlify Functions and share a live session URL with netlify dev --live.
FAQ
Is the Remix K-pop Stack free?
The template itself is open source and free to use. Supabase offers a free tier for the database and authentication, and Netlify has a free tier for deployment, though you will need to check the current pricing for both services for production use.
What environment variables does the Remix K-pop Stack need?
It requires SUPABASE_URL, SUPABASE_ANON_KEY, and SESSION_SECRET. These can be set in an .env file locally or through the Netlify dashboard under Site settings/Build & deploy/Environment. The SESSION_SECRET is a random 16-character string created automatically when you run create-remix.
Does the Netlify CLI support hot module reloading for this stack?
No. When running netlify dev, file changes rebuild assets but you will not see live updates on the page without a manual browser refresh, because the Netlify CLI builds a production version of the Remix App Server and splits it into Netlify Functions. The standard npm run dev Remix dev server does rebuild assets on file changes.
