🎯 Create Your Open-Source Ecommerce Store using Medusa (Backend), Gatsby (Admin) and Next.js (Storefront) ⚡
🎯 Deliverables:
- 🐳 Medusa eCommerce Backend:
Node.js
- ⚡ Medusa eCommerce Admin:
Gatsby
- ⚡ Medusa eCommerce Storefront:
Next.js
🌥️ The cloud journey generally involves migrating and modernizing websites and apps, including building and hosting websites, developing web and mobile apps, and monitoring and managing them. This hands-on series illustrates how to build a production-ready Headless CMS and Headless eCommerce using Jamstack (stands for JavaScript, API, and Markup) on Cloud (Heroku, AWS ...) 🌥 .
- ✅ ⚡ Building a Production-Ready Headless CMS with Jamstack (Gatsby and Contentful) 🎁
- ✅ 🐳 Dockerizing Strapi - Open-Source NodeJS Headless CMS
- ☑️ 🐳 Medusa Headless-eCommerce - Open-Source Shopify alternative ⚡
Introduction to Headless eCommerce
Medusa is an open-source API-first headless commerce platform giving engineers the foundation for building unique and scalable digital commerce projects quickly.
The Shopify eCommerce platform simplifies the creation of e-commerce stores for merchants and businesses who don't need to learn the technical details of setting up shops and want to get started quickly. However, Medusa is built for developers and focuses on providing a great developer experience with an abstraction-based architecture, ease of setup, strong documentation, and a supportive community.
Headless eCommerce Architecture
The Headless eCommerce platform collects, maintains, and distributes content without using the Frontend layer since it has been decoupled and eliminated, leaving only the Backend layer.
Backend Developers can then provide and retrieve things like product items, blog posts, and product reviews to any device using REST/GraphQL APIs, while Frontend Developers can present that fetched data in their own beautiful format using whichever framework they prefer, such as ReactJS, VueJS, Angular, etc.
🐳 Medusa eCommerce Backend: Node.js
Like Shopify, Medusa offers a similar set of core ecommerce features, including payment and checkout, cart-functionality, fulfillment flow, shipping options, customer profiles (for customer-specific pricing), advanced promotions (such as coupons and discounts), and product and stock management.
Despite Shopify's simplicity, most of its pros and features are a result of its monolithic architecture, which is also a weakness.
Medusa's open-source and abstraction-based architecture allows you to customize and compose your store specifically to suit each individual use case. Using Medusa, you can alter the core set up to fit your needs, or you can extend Medusa's APIs to extend functionality.
echo "Install the Medusa CLI"
yarn global add @medusajs/medusa
medusa new backend
cd backend
yarn start
⚡ Medusa eCommerce Admin: Gatsby
For non-technical store managers, an out-of-the-box admin panel provides built-in flows for claims, returns, and exchanges, allowing end-users to self-serve. Shopify, however, offers integrated marketing and sales analytics. The Medusa admin panel, however, offers greater customizability due to its extensible and composable architecture.
⚡ Medusa eCommerce Storefront: Next.js
With Shopify, you can easily set up themed solutions that have a great starter package with a variety of available themes. Shopify provides Shopify Plus (starting at 2,000$/month) which allows developers to go headless through the Hydrogen setup while developing functionalities and completely customizing the storefront.
The Medusa Frontend and Backend are decoupled, so the storefront functionality and design can be customized without interfering with the Backend. Developers can then use Next.js or Gatsby or any other front-end framework of their choice.
Create Next.js Starter:
Open the terminal and use the following command to create an instance of your storefront:
npx create-next-app -e https:
cd storefront
cp .env.template .env.local
Now you have a storefront codebase that is ready to be used with your Medusa server.
Link Storefront to Your Server
By default, the storefront is linked to the server at the URL localhost:9000. If you need to change that, create the file .env in the root of your Next.js starter and add a new variable:
NEXT_PUBLIC_MEDUSA_URL=<BACKEND_URL>
Make sure to replace with the URL of your Medusa server.
Update the STORE_CORS variable
By default, the storefront runs at localhost:8000 and the backend uses that URL to avoid CORS errors. If you need to change the URL or port, in .env file in the root of your Medusa Server add the following new variable:
STORE_CORS=
Make sure you replace with the URL to your storefront.
Start your Store
To start your store, first, you need to run the Medusa server. In the directory that holds your Medusa server run the following:
yarn start
Then, in the directory that holds your Next.js storefront, run the following command:
yarn dev
Now, open the storefront at localhost:8000 (or the URL/port you specified) and you’ll see your store and the products!
🏁 Hooking up your Headless eCommerce Server with the Storefront is very easy using Medusa! You can now have your entire Server up and running with the products, cart, and checkout functionalities.
![🆓 [Open-Source] Medusa Headless-eCommerce Shopify alternative 🐳](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1665566704325%2FTxB7vXVt_.png&w=3840&q=75)
