Medusa 2 Starter with Remix Storefront

This is an official Turborepo monorepo integrating a Medusa2 backend with a Remix frontend. Showcasing a Coffee Roast themed dynamic storefront, it features Stripe payment integration, scalability with unlimited products and categories, and a developer-friendly setup using TypeScript and Biome. Ideal for rapidly building dynamic, scalable e-commerce stores.

BarrioDemo.mp4

Table

• Prerequisites
• Project Overview
  • Key Features
  • Demo
• Getting Started
• Local Development Setup
• Resetting the Database
• Enabling Express Checkout
• Useful Links
• Contributors

Prerequisites

Before you begin, ensure you have the following installed:

• ✅ Node.js 20+
• ✅ Yarn 4.5.0
• ✅ Remix
• ✅ Docker and Docker Compose

Project Overview

Key Features

• Dynamic Storefront: Leverages Medusa2's robust headless commerce capabilities and Remix's fast, data-driven UI for modern e-commerce experiences.
• Advanced Payment Integration: Out-of-the-box support for Stripe enables secure and reliable transaction processing.
• Scalability: Supports unlimited products, collections, categories, and tags, accommodating businesses as they expand their inventory.
• Developer Experience: Built with TypeScript and Biome, enhancing code quality, consistency, and maintainability.

Demo

You can view a live demo of the project here.

Getting Started

1. Clone this repository
2. Install dependencies:

   yarn
   

3. Test the setup:

   yarn build
   

Local Development Setup

1. Generate .env files for both the Medusa backend and the Remix storefront.

   yarn run generate-env
   

   This will generate the apps/medusa/.env and apps/storefront/.env files.

2. Replace the following environment variables in your apps/medusa/.env file:

   • STRIPE_API_KEY # Your Stripe secret key. Required to checkout.

3. Run the following command to initialize the Medusa database:

   yarn run medusa:init
   

   This will set up the database and seed it with some initial data, including a user with the email admin@medusa-test.com and password supersecret.

4. Start the development servers:

   yarn dev
   

   This will start both the Medusa backend and the Remix storefront in development mode.

5. Create a Publishable API Key for your storefront:

   • Log in to the Medusa admin using the credentials admin@medusa-test.com / supersecret

   • Navigate to the Publishable API Keys settings and copy an exisiting API Key or create a new one with at least one Sales Channel.

6. Replace the environment variables in the apps/storefront/.env file:

   • MEDUSA_PUBLISHABLE_KEY # API key from previous step
   • STRIPE_PUBLIC_KEY # starts with pk_
   • STRIPE_SECRET_KEY # starts with sk_

7. Restart your storefront and medusa backend:

   yarn dev
   

Resetting the Database

In order to reset the database, follow the steps from 3 to 7 in the Local Development Setup section.

Enabling Express Checkout

For a more complete guide on how to enable Express Checkout, see the Stripe documentation.

To enable Express Checkout in the Medusa Storefront, follow these steps:

1. Enable the payment methods you want to use to during Express Checkout in the Stripe payment methods settings.

   • Learn more about Apple Pay integration here
   • Learn more about Google Pay integration here.

2. Create your own domain association file to verify your domain, and replace the content in the apps/storefront/app/routes/[.well-known].apple-developer-merchantid-domain-association.tsx file with your own domain association file content.

3. Register your domain for payment methods - see this stripe guide for more information.

   • for development, you may want to use a service like ngrok.
   • for production, a domain with https is required.

Useful Links

• Medusa Documentation
• Remix Documentation
• Turborepo Documentation
• Stripe Express Checkout

Contributors

Made with ❤️ by the Lambda Curry team.