--- title: "How to Deploy a Remix App with Supabase" description: "Learn how to deploy a Remix app with Supabase functionality for free on Netlify in this step-by-step tutorial." source: "https://www.netlify.com/blog/deploy-your-remix-supabase-app-today/" last_updated: "2026-07-10T19:13:07.000Z" --- Have you heard about [k-pop](https://youtu.be/umiV8Zs2EJA), wait, I mean our new [Remix Stacks](https://remix.run/docs/en/v1/pages/stacks) template [the K-pop Stack](https://github.com/netlify-templates/kpop-stack). It combines [Remix](https://remix.run/), [Supabase](https://supabase.com/), [Tailwind](https://tailwindcss.com/), and more to give you a note creation app with auth to help jump start your own Remix creation. Like what you see? You can check out the code and clone the project here: [https://github.com/netlify-templates/kpop-stack](https://github.com/netlify-templates/kpop-stack) or click the button below to step through the process of creating a new repo, new Netlify project, and deploy it (you will need to add Supabase env vars to get full functionality). [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/kpop-stack) ## Deploy the Remix App with Netlify With this setup I’ll guide you through deploying this Remix Stack with Netlify, no credit card needed for any of the steps! We’re going to start from the point of clicking the ‘Deploy to Netlify’ button above, but you could also - clone [the repo listed above](https://github.com/netlify-templates/kpop-stack) then create a new Netlify project, or - run `npx create-remix --template netlify-templates/kpop-stack` in your terminal, make a new repo, and new Netlify project. ### [DNA](https://youtu.be/MBdVXkSdhwU) Using the Deploy to Netlify button you will now have - a repo with all the project files and - a deployed Netlify project linked to the new repo. ![deploy to Netlify processes](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1651036742/CleanShot_2022-04-27_at_01.18.44_2x_h1d7d2.jpg) To get the project running you’ll need to add three environment variables to your Netlify project via [your dashboard](https://app.netlify.com/) ‘Site settings/Build & deploy/Environment/Environment variables’ - `SUPABASE_URL`: found in Supabase Settings/API/Configuration/URL - `SUPABASE_ANON_KEY`: found in Supabase ‘Settings/API/Project API keys’ - `SESSION_SECRET`: when setting manually you can add a random 16-character string, when you run the `create-remix` command it gets set [here in the project code](https://github.com/netlify-templates/kpop-stack/blob/fd68e4de2f4034328481c9b26fa67e298ef20204/remix.init/index.js#L47) > You can find more detailed information on how to [set environment variables](https://github.com/netlify-templates/kpop-stack/blob/main/README.md#development) and the [database (Supabase) information](https://github.com/netlify-templates/kpop-stack/blob/main/README.md#development) in the [project repo](https://github.com/netlify-templates/kpop-stack). ### Just Right With those variables set, your app should be [just right](https://youtu.be/vrdk3IGcau8). To deploy you can head to your project dashboard again, go to Deploys, and click the ‘Trigger deploy’ button. ![trigger deploy button](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1651036990/CleanShot_2022-04-27_at_01.22.00_2x_bg9cnu.jpg) To work on the project locally, you’ll want to have the [Netlify CLI](https://docs.netlify.com/cli/get-started/) installed. `npm install netlify-cli -g` Then you can 1. clone your new repo locally `git clone [your awesome new k-pop repo]` 2. change to the project directory and run `npm i` to install dependencies 3. run the `netlify link` command to find and connect your Netlify project based on the GitHub repo 4. run `npm run dev` (which also runs `netlify dev`) When `netlify dev` runs it grabs the project environment variables and feeds them to the local development environment so your app has all the information it needs. Swoon 😍! > Check out the repo for more details on [development](https://github.com/netlify-templates/kpop-stack/blob/main/README.md#development) and [deploying](https://github.com/netlify-templates/kpop-stack/blob/main/README.md#deployment). ## [How You Like That](https://youtu.be/ioNng23DkIM) Look at you! Deploying your lovely Remix app all smart and fancy. Now you’re all set to start your new K-pop fan page where you can post notes about your favorite songs, choreo, and outfits. Maybe you have a different idea for an app, either way [ping us on Twitter](https://twitter.com/netlify) to show us what you make. Happy coding 👩🏻‍💻! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Deploy Your Remix + Supabase App Today!&url=https://www.netlify.com/blog/deploy-your-remix-supabase-app-today/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fdeploy-your-remix-supabase-app-today%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/deploy-your-remix-supabase-app-today/) - [Bluesky](https://bsky.app/intent/compose?text=Deploy Your Remix + Supabase App Today!+https://www.netlify.com/blog/deploy-your-remix-supabase-app-today/) * * * ### Tags - [remix](/blog/tags/remix/) - [Supabase](/blog/tags/supabase/) - [Tailwind](/blog/tags/tailwind/) - [templates](/blog/tags/templates/) ## Keep reading ![](/_astro/a2d40abb651bc7dcb608b25ac182104920a62c52-2400x1260_1PmTjt.webp) Guides & Tutorials February 18, 2022 [ ### A Beautiful Bejamas Blog Template with Next.js on Netlify ](/blog/a-beautiful-bejamas-blog-template-with-next.js-on-netlify) - ![Profile picture of Tara Z. Manicsic](/_astro/2ac74d0595066130d59f8c97e61332017cdbcb94-1000x921_ZyTafG.webp) Tara Z. Manicsic ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials March 10, 2022 [ ### How to Deploy Remix Apps on Netlify ](/blog/how-to-deploy-remix-apps-on-netlify) - ![Profile picture of Ekene Eze](/_astro/c97b196f1227b05d92404625ecc4779ce8a60661-1000x1000_Z1bjliB.webp) Ekene Eze ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)