Tutorial

Create Medusa App: One command for a full-stack headless setup

Within minutes, you will have a Medusa backend, a Gatsby or Next.js storefront, and an admin dashboard up and running locally

With the new create-medusa-app tool you will get your Medusa development environment ready within a couple of minutes. After completion, you will have a Medusa backend, a Gatsby or Next.js storefront, and an admin dashboard up and running on your local machine.

Starting a new e-commerce project just got easier, now with one command.

Getting started with create-medusa-app

Use create-medusa-app with your preferred package manager:

{% c-block language="js" %}
yarn create medusa-app

npx create-medusa-app
{% c-block-end %}

Behind the scenes, create-medusa-app is populating your database with some initial set of mock data, which helps to interact with Medusa setup intuitively straight away.

Right after hitting one of those commands, the multistep installation process will be initiated, so the starter can be shaped right for the specific needs.


Destination folder

Enter the path to the directory that will become the root of your Medusa project:

{% c-block language="js" %}
? Where should your project be installed? > my-medusa-store
{% c-block-end %}


Pick the starter you prefer

{% c-block language="js" %}
? Which Medusa starter would you like to install? …
❯ medusa-starter-default
  medusa-starter-contentful
  Other
{% c-block-end %}

You will be presented with three options:

  • medusa-starter-default is the most lightweight version of a Medusa project
  • medusa-starter-contentful almost like the default starter, but with medusa-plugin-contentful preinstalled
  • Other if you have a different starter that you would wish to install from Other will give you the option of providing a URL to that starter. An additional question will be asked if you choose this option:

{% c-block language="js" %}
Where is the starter located? (URL or path) › `https://github.com/somecoolusername/my-custom-medusa-starter`
{% c-block-end %}

For the walkthrough purposes, we assume that the selected starter is medusa-starter-default and proceed to the next step.

Selecting a storefront

After selecting your Medusa starter you will be given the option to install one of our storefront starters. At the moment we have starters for Gatsby and Next.js:

{% c-block language="js" %}
Which storefront starter would you like to install? …
❯ Gatsby Starter
 Next.js Starter
 None
{% c-block-end %}

You may also select None if the choice is to craft a custom storefront for your product.

create-medusa-app now has all of the info necessary for the installation to begin.

{% c-block language="js" %}
Creating new project from git: `https://github.com/medusajs/medusa-starter-default.git`
✓ Created starter directory layout
Installing packages...
{% c-block-end %}

Once the installation has been completed you will have a Medusa backend, a demo storefront, and an admin dashboard.

What is inside

Inside the root folder which was specified at the beginning of the installation process the following structure could be found:

{% c-block language="js" %}
/my-medusa-store
 /storefront /* Medusa storefront starter */
 /backend /* Medusa starter as a backend option */
 /admin /* Medusa admin panel */
{% c-block-end %}

create-medusa-app prints out the commands that are available to you after installation. When each project is started you can visit your storefront, complete the order, and view the order in Medusa admin.

{% c-block language="js" %}
⠴ Installing packages...
✓ Packages installed
Initialising git in my-medusa-store/admin
Create initial git commit in my-medusa-store/admin

 Your project is ready 🚀. The available commands are:

   Medusa API
   cd my-medusa-store/backend
   yarn start

   Admin
   cd my-medusa-store/admin
   yarn start

   Storefront
   cd my-medusa-store/storefront
   yarn start
{% c-block-end %}

What's next?

To learn more about Medusa to go through our docs to get some inspiration and guidance for the next steps and further development:

If you have any follow-up questions or want to chat directly with our engineering team we are always happy to meet you at our Discord.

Want to know more about Medusa

Find related blog posts below

Want to know more?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thanks! We will reach out asap
Oops! Something went wrong while submitting the form.
© 2021 Medusa Commerce – All Rights Reserved