DEV Community

Cover image for The Golden Path for Django + React: Launching a SaaS without wiring the infra yourself
Soren Albrecht
Soren Albrecht

Posted on

The Golden Path for Django + React: Launching a SaaS without wiring the infra yourself

Disclosure: I have a business relationship with Otoshek. I'm a user of the platform and this walkthrough reflects my own experience using it.

Starting a SaaS is both easier and harder than ever. The tools are better, the cloud is better, AI coding agents are better. But the list of things you have to assemble before building the actual product has exploded: GitHub repo, CI/CD, cloud infrastructure, environment variables, secrets, database, authentication, billing, email, deployment, monitoring, and the security patterns around all of it.

What I want instead is a Golden Path: a recommended, automated, safe route from idea to production. One that ends in my own GitHub account and my own cloud, with the standard production layer already in place. The ideal start is opening Claude Code on a project that's already set up for me locally, ready to build.

That is how I think about Otoshek. It applies the platform-engineering idea behind tools like Backstage, Port, and Cortex, but instead of serving internal engineering teams inside a large company, it brings that same path to independent builders and small SaaS teams. In my case the stack is Django, React, PostgreSQL, Stripe, allauth with MFA, email, GitHub Actions, Azure or GCP, and local development ready to run in VS Code.

Diagram of the SaaS tech stack: React frontend, Django backend, PostgreSQL database, Stripe for billing, and GitHub Actions for CI/CD

The video below is Otoshek's official platform walkthrough. It covers the full flow from stack selection all the way through to local setup. (3:14)


Walkthrough of deploying a SaaS with Otoshek. (3:14)

The process itself was simpler than I expected. You go through four phases:

  • Phase 1 — pick your stack and build
  • Phase 2 — provide credentials and connect GitHub
  • Phase 3 — deploy
  • Phase 4 — run the local setup skill

Three of those phases are almost entirely clicks. The only one that asks something of you is credentials, and that's just collecting API keys from five providers:

Icons of the five required service providers: Cloud (Azure/GCP), Database (Supabase), Billing (Stripe), Auth (Google), and Email (Mailjet)

By the end I had a live URL, a GitHub repo with CI/CD wired in, and a local environment running the same app.

Phase 1 — Select your stack and build

Start by creating an account on Otoshek, then head to the deployment page. That's where you choose your stack, name your project, and build the app. For now, the real choices are where your app deploys (Azure or GCP) and which styling system your React frontend uses (Tailwind or Bootstrap). I recommend Tailwind. The backend is Django, a mature Python web framework with ORM, admin, auth, and migrations built in.

Screenshot of the Otoshek deployment interface showing options for cloud provider and CSS framework selection

Both cloud options deploy on free tiers, so there's no cost at this stage regardless of which you pick.

The project name becomes the root folder and the Python package name.

Once you've made your selections, hit Build. The platform generates your app, and when the build finishes a Setup Infrastructure button appears. Click it to move on to Phase 2.

Phase 2 — Credentials and GitHub

Now we collect the credentials the platform needs to deploy the app into our cloud (Azure or GCP), connect the database the app needs (Supabase), set up the billing infrastructure (Stripe), wire up Google OAuth for social login, and the messaging system so the app can communicate (Mailjet).

The credential collection dashboard showing status indicators for Cloud, Database, Stripe, Google Auth, and Mailjet integrations

The platform really helps here with written tutorials and short videos. Rather than walking you through how to collect these credentials myself, I'll point you to the provider and the official short video for each one. There are six videos in total, but you'll only follow five. For the cloud provider, you follow the guide for whichever cloud you chose in Phase 1. I chose Azure.

Before you start following a guide, make sure you're signed up with that provider.

Start with the cloud. If you don't have an account with your chosen provider yet, create one first. Both are free to start and both require a payment method during signup, not because you'll be charged, but because the provider needs it on file in case you choose to upgrade later. Deployments through Otoshek stay within the free tier, so your card won't be touched.

Once your account is active, follow the guide that matches the cloud you chose in Phase 1.

One handy detail: the platform gives you a downloadable template for all the credentials you'll collect, so you can fill it in as you go. Later, when you submit your credentials in this phase, you can paste the whole filled template into the platform in one shot. It parses, validates, and saves everything at once. It saves time. There are two versions of the template (Azure and GCP). You'll see the download link on every official guide page, but grab it once for the cloud you chose in Phase 1 and reuse it as you go.

Here are the six videos. Total length is under 11 minutes.

Azure

Full guide on otoshek.com

There are three ways to get your Azure credentials: the Portal, Cloud Shell, or the CLI. Cloud Shell is the recommended path: four commands to copy and paste, and the last one prints your credentials directly to the screen. The video below shows you this method in under four minutes. (3:15)


Supabase — database

Full guide on otoshek.com

You'll create a free Supabase project, set a database password, and collect the connection credentials. The video below walks you through the whole process. (1:44)


Stripe — billing

Full guide on otoshek.com

You'll collect your Stripe API keys from the dashboard, the credentials that wire up subscription billing and the customer portal to your app. The video below walks you through it in under a minute. (0:43) (Note: the credentials collected here are test mode keys. Switching to live mode when you're ready to take real payments is straightforward from the Stripe dashboard.)


Google OAuth — social login

Full guide on otoshek.com

You'll set up Google OAuth in the Google Cloud Console: creating a consent screen, generating a client ID and secret, and configuring the redirect URIs that allow your users to sign in with their Google account. The video below walks you through it. (2:54)


Mailjet — transactional email

Full guide on otoshek.com

You'll create a Mailjet account, generate your API keys, and choose your sender address, the email your app uses to send password resets, confirmations, and notifications. The video below walks you through it. (1:26)


Once all five sets of credentials are filled into the template, the next step is connecting our GitHub account.

The GitHub integration screen showing the OAuth connection status and a field to name the new repository

We connect via OAuth and name the repository where our app will be pushed. The platform validates the name before letting us move on.

From there, we submit our credentials. Copy the completed template, drop it into the credentials textarea, and the platform parses, validates, and saves everything in one shot.

A text area in the Otoshek platform where the completed credentials template is pasted for bulk validation and saving

On security, the platform claims our credentials never touch its database; they go directly into Azure Key Vault, and we can rotate them at any time after setup. That matters because it means the platform never has standing access to the keys that run our cloud, our billing, and our email; if anything on their side were ever compromised, there's nothing there to steal.

Once validation passes, there's a paywall. The part worth noting is that it only charges after it's confirmed it can deliver: no valid credentials, no charge. There's a launch promo running: code LAUNCH65 brings it to $69.65 instead of $199.

Phase 3 — Deploy

Once the paywall clears, one button starts the deployment.

The final deployment confirmation screen featuring a large button to start the infrastructure provisioning process

The platform takes over from here. It provisions the cloud infrastructure, creates the GitHub repository, injects the CI/CD pipeline, pushes the app, and verifies that everything came up correctly. We watch it happen in real time.

A real-time progress tracker showing the successful completion of infrastructure, repository creation, and CI/CD injection

When the last stage passes, the app is live. The deployed URL shows up on screen — that's our SaaS foundation running in the cloud. See it live.

Phase 4 — Local setup

Full guide on otoshek.com

If you've been using Claude Code to build, this phase will feel familiar. It's a skill. We install it once, run it in the folder where we want the project to live, and it handles the rest.

The skill is built for Claude Code, but if you work with Codex, Gemini CLI, or another AI coding agent, point it at the skill repository. It reads the instructions and does the same work.

GitHub logo otoshek / otoshek-local-setup

Claude Code skill to set up a local development environment for Otoshek-deployed SaaS projects

otoshek-local-setup

A Claude Code skill that sets up a complete local development environment for your Otoshek-deployed SaaS project.

Quick Start

Assumes Homebrew, mkcert, and Claude Code are already installed. If not, see Prerequisites below.

1. Open Claude Code in the folder where you want your project cloned

cd ~/Projects
claude
Enter fullscreen mode Exit fullscreen mode

2. Add the Otoshek plugin marketplace

/plugin marketplace add otoshek/otoshek-local-setup

3. Install the skill

/plugin install otoshek-local-setup@otoshek-otoshek-local-setup

4. Relaunch Claude Code

claude
Enter fullscreen mode Exit fullscreen mode

5. Run the setup

/otoshek-local-setup git@github.com:YOUR_USERNAME/YOUR_REPO.git

Claude will guide you through the rest.

What it does

After Otoshek deploys your SaaS app, you'll receive a GitHub repository. This skill automates cloning and configuring everything you need to start building locally:

  • Verifies system prerequisites are installed (see below) and stops with install commands if any are missing
  • Installs and configures PostgreSQL and VS Code (if not already installed)
  • Configures HTTPS SSL certificates for local development (if not already…

Two prerequisites before we start: Homebrew and mkcert need to be installed on our machine. Homebrew is the package manager the skill uses to install everything else. mkcert registers a local certificate authority so our browser trusts the development HTTPS certificates. Both require a password to set up — that's why the skill can't do them for us.

macOS / Linux Setup

1. Check if Homebrew is already installed

command -v brew &>/dev/null && echo "Homebrew already installed"
Enter fullscreen mode Exit fullscreen mode

2. Install Homebrew (skip if already installed)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Enter fullscreen mode Exit fullscreen mode

3. Install mkcert

brew install mkcert && mkcert -install
Enter fullscreen mode Exit fullscreen mode

Windows Setup

Install the following tools manually (no Homebrew on Windows):

  1. Git — accept default settings
  2. Node.js — LTS version
  3. Python 3.13 — enable "Add Python to PATH"
  4. mkcert — download mkcert-*.exe, rename to mkcert.exe, add to PATH, then run:
   mkcert -install
Enter fullscreen mode Exit fullscreen mode

Or install via Chocolatey:

choco install git nodejs python mkcert
mkcert -install
Enter fullscreen mode Exit fullscreen mode

Once those are in place, open Claude Code in the folder where you want your project cloned. First add the Otoshek marketplace:

/plugin marketplace add otoshek/otoshek-local-setup
Enter fullscreen mode Exit fullscreen mode

Then install the skill:

/plugin install otoshek-local-setup@otoshek-otoshek-local-setup
Enter fullscreen mode Exit fullscreen mode

Relaunch Claude Code, then run:

/otoshek-local-setup git@github.com:YOUR_USERNAME/YOUR_REPO.git
Enter fullscreen mode Exit fullscreen mode

You can also provide the HTTPS URL, which the skill will convert automatically:

/otoshek-local-setup https://github.com/YOUR_USERNAME/YOUR_REPO
Enter fullscreen mode Exit fullscreen mode

The skill takes over from there. It checks what's already installed and skips it, and installs whatever's missing — PostgreSQL, certificates, Python environment, migrations, Stripe sync, VS Code launch config. It pauses once to ask for our local credentials: Google OAuth, Mailjet, and the Stripe test key.

When it's done, open the Run and Debug pane in VS Code and select Backend + Frontend from the dropdown. Hit the play button or press F5, and both the backend and frontend start simultaneously. Open https://localhost:5173 and the app is running locally.

Closing thoughts

The stack is mature: Django on the backend and React on the frontend. What mattered to me is that I can keep building on it normally. Adding features feels like working on a regular Django + React project, not fighting around the edges of a generated one. That's the thing I was most worried about going in, and it held up.
The codebase is well-structured and documented, so Claude Code picks up the architecture and logic quickly.

On cost, the free tier covers development, and once launched it scales with your traffic. The one thing to watch: on the free tier the app sleeps after a period of no traffic, and waking it can take close to 2 minutes, so it's not something you'd put in front of real users. On Azure, always-on starts with the Basic B1 plan at $13.14 a month, which handles low traffic and is often where a new app sits for a while. For detailed plans, see Azure App Service pricing or GCP Cloud Run pricing.

Top comments (0)