storehabit.com

E-commerce tutorials, Shopify alternatives, headless commerce for SMBs

Set Up a Headless Storefront on a $50/Month Budget

by Emma Rodriguez
Set Up a Headless Storefront on a $50/Month Budget

You've probably seen the word "headless" thrown around in e-commerce circles and assumed it was for companies with six-figure dev budgets and a full engineering team. That was my first assumption too, back when I was running my second store and trying to squeeze every dollar out of a $2,000 monthly operating budget.

Here's the thing: headless commerce has quietly gotten cheap. Between open-source frontends, generous free tiers, and API-first backends that charge by usage, you can run a genuinely headless storefront for roughly $50 a month — sometimes less. This tutorial walks you through exactly how to do that, with real numbers and a stack you can actually maintain yourself.

What "Headless" Actually Means (Plain English)

A traditional platform like a hosted cart bundles your storefront (what shoppers see) and your backend (inventory, orders, payments) into one package. Headless means you split those two pieces apart. Your backend lives in one place — handling products, stock levels, and checkout logic — and your frontend is a separate website that pulls data from the backend through an API.

Why bother? Speed and flexibility. A headless frontend built with a modern JavaScript framework can score 90+ on Google's Core Web Vitals almost by default, because it's serving pre-rendered HTML instead of assembling a page on every request. Faster pages convert better — one widely cited study found a one-second delay in load time can cut conversions by 7%. For a store doing $10,000 a month, that's $700 left on the table per second of lag.

You also stop being locked into one platform's theme system. Want to redesign your product page without touching a drag-and-drop editor? You just edit code.

The $50/Month Stack That Actually Works

Here's the combination I'd use if I were starting a new store today with a tight budget:

Backend / Commerce API — Medusa.js (open source, self-hosted or cloud) Medusa is an open-source Node.js commerce engine. Self-hosted on a small cloud VM it costs roughly $6–$12/month (a 1 GB RAM droplet on most providers handles light traffic fine). Medusa covers products, variants, inventory, discounts, and order management out of the box. It connects to Stripe for payments, which charges no monthly fee — only the standard 2.9% + $0.30 per transaction.

Frontend — Next.js on Vercel Vercel's free Hobby plan covers personal and small commercial projects up to generous bandwidth limits. Next.js gives you static generation for product pages, which means blazing-fast loads without a server rendering each page on demand. When you outgrow the free tier, Vercel's Pro plan is $20/month — still well inside budget.

Search — Meilisearch Cloud (free tier) Meilisearch's hosted free tier handles up to 100,000 documents and 10,000 searches per month. For most stores under $500K ARR, that's plenty. It drops into Medusa with a single plugin.

Media / CDN — Cloudinary (free tier) Cloudinary's free plan gives you 25 GB of storage and automatic image optimization. Optimized images alone can shave 30–40% off your page weight.

Total monthly cost at launch: ~$10–$32, depending on whether you use Vercel free or Pro. Budget the rest of your $50 for a domain and a transactional email service like Resend (free up to 3,000 emails/month).

Step-by-Step: Getting Your First Headless Store Live

Let's make this concrete. Here's a compressed version of the setup I'd follow over a weekend.

Step 1 — Spin up your Medusa backend (2–3 hours)

You need Node.js 18+ and a PostgreSQL database. Most cloud providers offer a managed Postgres instance for $5–$7/month, or you can use a free tier on Supabase to start.

  1. Run npx create-medusa-app@latest in your terminal.
  2. Follow the prompts — choose PostgreSQL as your database.
  3. Once it's running locally, deploy it to your cloud VM using a process manager like PM2. Point a subdomain like api.yourstore.com at it.
  4. Add your Stripe keys in the .env file and enable the Stripe payment provider.

At this point you have a working commerce API with an admin dashboard at /app. Add your products there — name, description, price, variants, images. Takes about the same time as listing on any other platform.

Step 2 — Clone a Next.js starter and connect it (3–4 hours)

Medusa maintains an official Next.js storefront starter on GitHub. Clone it, set the NEXT_PUBLIC_MEDUSA_BACKEND_URL environment variable to your API subdomain, and run it locally. You should see your products pull through immediately.

Deploy to Vercel by connecting your GitHub repo — it's literally three clicks and a paste of that same environment variable. Vercel handles SSL, CDN distribution, and preview deployments automatically.

Step 3 — Wire in search and images (1–2 hours)

Install the Meilisearch plugin for Medusa (medusa-plugin-meilisearch), add your Meilisearch API keys, and run the sync command. Your products are now indexed and searchable on the frontend with sub-100ms response times.

For images, update your Next.js config to route image requests through Cloudinary. There's a community Next.js Cloudinary package that makes this a one-file change.

Step 4 — Test your checkout end to end (1 hour)

Stripe has a test mode with fake card numbers. Run a full order from product page → cart → checkout → confirmation. Check that the order appears in your Medusa admin. Then test a refund. You do not want to discover a broken refund flow on a real customer's order.

Do you have your transactional emails set up too? Order confirmation, shipping notification, and abandoned cart are the three you need before going live. Resend + a simple template handles all three.

A Real Example: A Candle Store in 48 Hours

A friend of mine — she runs a small candle brand out of her garage — rebuilt her store on this exact stack last spring. Her old hosted store was costing her $79/month on a mid-tier plan, and page load times averaged 4.2 seconds on mobile (she checked with Google PageSpeed Insights).

After the migration:

  • Mobile load time dropped to 1.1 seconds.
  • Her PageSpeed score went from 54 to 91.
  • Monthly platform cost fell to $18 (Vercel free, Medusa on a $6 VM, Supabase free tier, Resend free tier).
  • She saw a 12% lift in conversion rate over the following 60 days, which she attributes mostly to speed — her products and prices didn't change.

She's not a developer. She watched two YouTube tutorials on Next.js basics and leaned on Medusa's documentation, which is genuinely good. The whole migration took her one weekend and a few evenings.

What You'll Actually Need to Maintain

Fair warning: headless does shift some responsibility onto you. Here's an honest accounting.

Updates. Medusa releases updates regularly. You'll want to run npm update on your backend every month or so and check the changelog for breaking changes. Budget 30–60 minutes a month for this.

Monitoring. Set up a free uptime monitor (Better Uptime's free tier, for example) so you get a text if your API goes down. Without it, you might not notice an outage until a customer emails you.

Backups. If you're on a managed Postgres, daily backups are usually automatic. Verify this on day one. If you're self-managing the database, set up a cron job to dump it nightly to object storage — most providers charge under $1/month for a few gigabytes.

Scaling. The stack above handles roughly 50–100 concurrent visitors comfortably on a $6 VM. If you run a big sale or get featured somewhere, you may need to temporarily upgrade your VM size for a day. That's a two-minute click in your cloud dashboard and costs a few extra dollars.

Is this more overhead than a fully hosted platform? Yes, by about an hour a month. Whether that trade-off is worth it depends on how much you value the performance gains and the $30–$60/month you're saving.

Three Things You Can Do Today

You don't have to migrate your whole store this weekend. Here's how to start small and build confidence:

  1. Audit your current store speed. Run your homepage and a product page through PageSpeed Insights (pagespeed.web.dev — it's free). Write down your scores. That number is your baseline, and it'll make the improvement feel real when you compare later.

  2. Spin up Medusa locally in an afternoon. You don't need a domain or a server yet. Just install it on your laptop, add three products, and poke around the admin. Getting hands-on removes the mystery faster than any tutorial can.

  3. Clone the Next.js storefront starter and connect it to your local Medusa. Again, no deployment needed. Just see your products appear in a real frontend. Once you've seen that work, the rest is just logistics.

Headless commerce isn't magic, and it's not out of reach. The stack has matured to the point where a motivated non-developer can get it running in a weekend, maintain it in an hour a month, and come out ahead on both performance and cost.

Your next step: open PageSpeed Insights right now and run your store. Whatever number comes back, know that there's a clear, affordable path to doing significantly better — and you've got everything you need to walk it.