Remix K-pop Stack

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.toml configuration for building on Netlify's edge nodes, plus deploy previews and CI/CD when connected via the Deploy to Netlify button or netlify init.
• Supabase integration — Uses Supabase as both the Postgres database and authentication provider; the README includes SQL queries to create profiles and notes tables 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 typecheck runs type checking across the whole project.
• Cypress end-to-end testing — Cypress tests are configured in the cypress directory, using @testing-library/cypress for semantic selectors, and the netlify-plugin-cypress runs tests on successful builds.
• ESLint and Prettier — Linting is configured via .eslintrc.js, and Prettier formatting is available through npm run format or an editor plugin.
• Session management — User sessions are handled in app/session.server.ts, with a SESSION_SECRET environment variable generated by the create-remix command.

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-stack to scaffold a project, then start the dev server with npm run dev or netlify dev.
• Add Supabase auth and data — Use the provided SQL queries to create the profiles and notes tables, set the SUPABASE_URL and SUPABASE_ANON_KEY environment variables, and your app gains user signup, login, and note creation and deletion.
• Test end-to-end — Run npm run e2e-test to start the dev server and Cypress client, and rely on netlify-plugin-cypress to 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.