At Extuitive, we're using Supabase. It works great locally, and it works great in production, but we were missing an easy way to create preview environments. Supabase has some info about this, but it feels clunky and is difficult to wire up to other parts of a stack, like Next.js or Inngest.
I'm also the lead developer of Autodock, and my team has adopted it for end-to-end preview environments powered by Supabase. The preview goes live in minutes with minimal config. This article is a quick guide on how to go from 0->Supabase on Autodock.
Initial Setup
To follow along with this tutorial, clone supabase:
git clone --depth 1 https://github.com/supabase/supabase/
And cd into examples/slack-clone/nextjs-slack-clone.
Then, in your coding agent, install Autodock MCP. I use Claude Code, so the command would be:
claude mcp add --transport http autodock https://autodock.io/api/mcp/streamable-http
When launching Claude Code, type /mcp to make sure Autodock login is complete. If you don't have a live session, you'll need to log back in or create a free account.
Starting your remote environment.
You can type "Launch an autodock dev box for this repo" to create your staging environment and it will be provisioned in ~3 seconds.
Booting up our Slack clone
Autodock asks us if we want to syncing code, start services and expose ports. Yes, yes, and yes.
It bustles about doing all of this, automatically fixing one minor error in the repo's config (sass is missing as an external dependency), and then chimes in to ask us about connecting to a remote supabase versus running it locally.
Local supabase
We opt for local. Autodock boxes ship with many of the supabase docker images pre-installed, so the initial supabase start only takes a few seconds.
Autodock has automatically taken care of updating config files so that Next.js points to Supabase and vice versa.
Testing out the app
Let's test the end-to-end flow.
Auth
We're able to sign up, and the frontend points to the correct backend endpoints.
The correct port is exposed for Mailpit, and the welcome email leads back to the remote app.
Interactions
The app works as intended 🎊
Supabase studio
The records are persisted and the db can be accessed remotely.
Note, depending on who you're sharing the environment with, you may not want to expose the port of Supabase Studio. In this case, you can ask Autodock to hide the port.
Realtime changes
My favorite part of this setup is that you can code changes in realtime and autodock keeps it synced with the environment. It takes review iterations from hours to minutes - no more waiting for a preview environment to spin up, async communication, etc.
Here, I change "New Channel" to "New Awesome Channel" and the remote updates instantly.
Conclusion
If you're building on Supabase and want to share your work as you iterate on it, try Autodock MCP! You'll have a full working staging environment in minutes and be able to ship changes that are live in seconds.
Top comments (0)