Files
medusa-store/docs/content/create-medusa-app.mdx
Mattèo Gauthier 1b748d435c docs: Fix code example with pnpm in the create-medusa-app page (#4284)
* Update create-medusa-app.mdx

* Change the command to start the dev command on the storefront
2023-06-12 10:43:27 +03:00

272 lines
7.8 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
description: 'Learn how to create a composable commerce platform using Medusa. This quickstart guide will help you set up your Medusa backend and the storefront all at once.'
addHowToData: true
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Feedback from '@site/src/components/Feedback'
import Troubleshooting from '@site/src/components/Troubleshooting'
import TypeErrorSection from "./troubleshooting/create-medusa-app-errors/_typeerror.md"
import OtherErrorsSection from "./troubleshooting/create-medusa-app-errors/_other-errors.md"
import ConnectionErrorSection from './troubleshooting/database-errors/_connection-error.md'
import FreshInstallationSection from './troubleshooting/awilix-resolution-error/_fresh-installation.md'
# Install Medusa with create-medusa-app
In this document, youll learn how to use create-medusa-app to set up a Medusa backend and an optional storefront.
## Overview
Medusa is a toolkit for developers to create digital commerce applications. In its simplest form, Medusa is a Node.js backend with the core API, plugins, and modules installed through npm.
`create-medusa-app` is a command that facilitates creating a Medusa ecosystem. It installs the Medusa backend and allows you to optionally install a Medusa storefront.
:::note
If you only want to set up a Medusa backend, follow [this quickstart guide](./development/backend/install.mdx) instead.
:::
---
## Prerequisites
Before you can install and use Medusa, you need the following tools installed on your machine:
- [Node.js v16+](./development/backend/prepare-environment.mdx#nodejs)
- [Git](./development/backend/prepare-environment.mdx#git)
- [PostgreSQL](./development/backend/prepare-environment.mdx#postgresql)
---
## How to Create a Medusa Project
A Medusa project is composed of the backend and the storefront.
In your terminal, run the following command:
<Tabs groupId="npxyarn" isCodeTabs={true}>
<TabItem value="npx" label="NPX" default>
```bash
npx create-medusa-app
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn create medusa-app
```
</TabItem>
<TabItem value="pnpm" label="pnpm">
```bash
pnpm dlx create-medusa-app
```
</TabItem>
</Tabs>
### Step 1: Specify Project Directory Name
Youll then be asked to enter the name of the directory you want the project to be installed in. You can either leave the default value `my-medusa-store` or enter a new name.
### Step 2: Choose Medusa Backend Starter
Next, youll be asked to choose the Medusa backend starter. The Medusa Backend is created from a starter template. By default, it is created from the `medusa-starter-default` template.
You can either pick the default Medusa backend starter, the Contentful starter or enter a starter URL by choosing `Other`:
```bash noReport
? Which Medusa starter would you like to install? …
medusa-starter-default
medusa-starter-contentful
Other
```
The backend will be installed under the `backend` directory under the project directory.
### Step 3: Choose Storefront Starter
After choosing the Medusa starter, youll be asked to choose the storefront starter. You can choose one of the starters in the list included or choose `None` to skip installing a storefront:
```bash noReport
? Which storefront starter would you like to install?
Next.js Starter
medusa.express (Next.js)
None
```
If you choose an option other than `None`, a storefront will be installed under the `storefront` directory.
:::tip
Learn more about the [Next.js starter storefront](./starters/nextjs-medusa-starter.mdx).
:::
### Step 4: Wait for Dependency Installation
After choosing the above starters, the installation of each component will begin along with its dependencies. Once the installation is done, youll see instructions related to how to start each component.
```bash noReport
Your project is ready. The available commands are:
Medusa API
cd my-medusa-store/backend
yarn start
Storefront
cd my-medusa-store/storefront
yarn dev
```
The commands will differ based on your choices in previous prompts.
### Step 5: Configuring your Backend Database
Before you can start your backend, you must configure your PostgreSQL database and run migrations.
:::note
Make sure your PostgreSQL service is running.
:::
To configure your backend database, change to the `backend` directory under your project directory and edit the `.env` file to include the following:
```bash
DATABASE_TYPE=postgres
DATABASE_URL=<YOUR_DATABASE_URL>
```
Where `<YOUR_DATABASE_URL>` is the connection URL to your PostgreSQL database. For example, `postgres://localhost/medusa-store`. You can learn about its format and other configurations [here](./development/backend/configurations.md).
:::note
Make sure to create your PostgreSQL database that you refer to in the connection URL before proceeding further. For example, if you use `postgres://localhost/medusa-store` make sure to create a `medusa-store` database.
:::
Then, run the following command to migrate the Medusa schema to your database:
<Tabs groupId="npxyarn" isCodeTabs={true}>
<TabItem value="npx" label="NPX" default>
```bash
npx @medusajs/medusa-cli@latest migrations run
```
</TabItem>
<TabItem value="pnpm" label="pnpm">
```bash
pnpm dlx @medusajs/medusa-cli@latest migrations run
```
</TabItem>
</Tabs>
You can optionally seed your database with demo data by running the following command:
<Tabs groupId="npxyarn" isCodeTabs={true}>
<TabItem value="npx" label="NPX" default>
```bash
npx @medusajs/medusa-cli@latest seed -f ./data/seed.json
```
</TabItem>
<TabItem value="pnpm" label="pnpm">
```bash
pnpm dlx @medusajs/medusa-cli@latest seed -f ./data/seed.json
```
</TabItem>
</Tabs>
### Step 6: Run the Medusa backend
While in your `backend` directory, run the following command to start your Medusa backend:
<Tabs groupId="npxyarn" isCodeTabs={true}>
<TabItem value="npx" label="NPX" default>
```bash
npx @medusajs/medusa-cli@latest develop
```
</TabItem>
<TabItem value="pnpm" label="pnpm">
```bash
pnpm dlx @medusajs/medusa-cli@latest develop
```
</TabItem>
</Tabs>
This will start your backend on `localhost:9000`. While your backend is running, you can also go to the `storefront` directory of your project and start the storefront. If you're using the Medusa Next.js storefront the following command starts it:
```bash npm2yarn
npm run dev
```
If you open your storefront now in your browser on `localhost:8000`, everything should be working as expected. If you're not seeing any products, you can run the `seed` command as instructed earlier or install the [Medusa admin plugin](./admin/quickstart.mdx) to start adding products.
<Feedback
event="survey_create-medusa-app"
question="Did you set up Medusa successfully?"
positiveQuestion="Is there anything that should improved?"
negativeQuestion="Please describe the issue you faced."
/>
---
## Troubleshooting
<Troubleshooting
sections={[
{
title: "TypeError: cmd is not a function",
content: <TypeErrorSection />
},
{
title: "Error: connect ECONNREFUSED ::1:5432",
content: <ConnectionErrorSection />
},
{
title: 'AwilixResolutionError: Could Not Resolve X',
content: <FreshInstallationSection />
},
{
title: "Other Errors",
content: <OtherErrorsSection />
},
]}
/>
---
## Project Directory Structure
Inside the root project directory which was specified at the beginning of the installation process youll find the following directory structure:
```bash noReport
/my-medusa-store
/backend // Medusa backend
/storefront // Medusa storefront starter
```
---
## Whats Next
- [Check out Medusa's features](./modules/overview.mdx)
- [Learn about backend configurations](./development/backend/configurations.md)
- [Prepare environment for advanced development](./development/backend/prepare-environment.mdx)