Files
medusa-store/docs/content/create-medusa-app.mdx
Shahed Nasser 1decaa27c7 docs: publish restructure (#3496)
* docs: added features and guides overview page

* added image

* added version 2

* added version 3

* added version 4

* docs: implemented new color scheme

* docs: redesigned sidebar (#3193)

* docs: redesigned navbar for restructure (#3199)

* docs: redesigned footer (#3209)

* docs: redesigned cards (#3230)

* docs: redesigned admonitions (#3231)

* docs: redesign announcement bar (#3236)

* docs: redesigned large cards (#3239)

* docs: redesigned code blocks (#3253)

* docs: redesigned search modal and page (#3264)

* docs: redesigned doc footer (#3268)

* docs: added new sidebars + refactored css and assets (#3279)

* docs: redesigned api reference sidebar

* docs: refactored css

* docs: added code tabs transition

* docs: added new sidebars

* removed unused assets

* remove unusued assets

* Fix deploy errors

* fix incorrect link

* docs: fixed code responsivity + missing icons (#3283)

* docs: changed icons (#3296)

* docs: design fixes to the sidebar (#3297)

* redesign fixes

* docs: small design fixes

* docs: several design fixes after restructure (#3299)

* docs: bordered icon fixes

* docs: desgin fixes

* fixes to code blocks and sidebar scroll

* design adjustments

* docs: restructured homepage (#3305)

* docs: restructured homepage

* design fixes

* fixed core concepts icon

* docs: added core concepts page (#3318)

* docs: restructured homepage

* design fixes

* docs: added core concepts page

* changed text of different components

* docs: added architecture link

* added missing prop for user guide

* docs: added regions overview page (#3327)

* docs: added regions overview

* moved region pages to new structure

* docs: fixed description of regions architecture page

* small changes

* small fix

* docs: added customers overview page (#3331)

* docs: added regions overview

* moved region pages to new structure

* docs: fixed description of regions architecture page

* small changes

* small fix

* docs: added customers overview page

* fix link

* resolve link issues

* docs: updated regions architecture image

* docs: second-iteration fixes (#3347)

* docs: redesigned document

* design fixes

* docs: added products overview page (#3354)

* docs: added carts overview page (#3363)

* docs: added orders overview (#3364)

* docs: added orders overview

* added links in overview

* docs: added vercel redirects

* docs: added soon badge for cards (#3389)

* docs: resolved feedback changes + organized troubleshooting pages (#3409)

* docs: resolved feedback changes

* added extra line

* docs: changed icons for restructure (#3421)

* docs: added taxes overview page (#3422)

* docs: added taxes overview page

* docs: fix sidebar label

* added link to taxes overview page

* fixed link

* docs: fixed sidebar scroll (#3429)

* docs: added discounts overview (#3432)

* docs: added discounts overview

* fixed links

* docs: added gift cards overview (#3433)

* docs: added price lists overview page (#3440)

* docs: added price lists overview page

* fixed links

* docs: added sales channels overview page (#3441)

* docs: added sales overview page

* fixed links

* docs: added users overview (#3443)

* docs: fixed sidebar border height (#3444)

* docs: fixed sidebar border height

* fixed svg markup

* docs: added possible solutions to feedback component (#3449)

* docs: added several overview pages + restructured files (#3463)

* docs: added several overview pages

* fixed links

* docs: added feature flags + PAK overview pages (#3464)

* docs: added feature flags + PAK overview pages

* fixed links

* fix link

* fix link

* fixed links colors

* docs: added strategies overview page (#3468)

* docs: automated upgrade guide (#3470)

* docs: automated upgrade guide

* fixed vercel redirect

* docs: restructured files in docs codebase (#3475)

* docs: restructured files

* docs: fixed eslint exception

* docs: finished restructure loose-ends (#3493)

* fixed uses of backend

* docs: finished loose ends

* eslint fixes

* fixed links

* merged master

* added update instructions for v1.7.12
2023-03-16 17:03:10 +02:00

164 lines
5.0 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, admin, and storefront all at once.'
addHowToData: true
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Feedback from '@site/src/components/Feedback';
# Install Medusa with create-medusa-app
In this document, youll learn how to use `create-medusa-app` to create a Medusa project with the three main components of Medusa.
## Overview
Medusa is composed of three different components: the headless backend, the storefront, and the admin dashboard.
Medusa provides the necessary tools and resources to set up the three components separately. This ensures that developers have full freedom to choose their tech stack, as they can choose any framework for the storefront and admin dashboard.
However, if youre interested in using Medusas starters for the three components, you can make use of the `create-medusa-app` command instead of creating each separately.
When you run the `create-medusa-app` command, youll install a Medusa backend, a Medusa admin, and optionally a storefront at the same time.
:::note
If you instead want to quickly install and setup only a Medusa backend, follow [this quickstart guide](./development/backend/install.mdx).
:::
---
## Prerequisites
### Node.js
Medusa supports Node versions 14 and 16. You can check which version of Node you have by running the following command:
```bash noReport
node -v
```
You can install Node from the [official website](https://nodejs.org/en/).
### Git
Git is required for this setup. You can find instructions on how to install it from the [Set up your dev environment documentation](./development/backend/prepare-environment.mdx#git).
---
## How to Create a Medusa Project
A Medusa project is composed of the backend, storefront, and admin.
In your terminal, run the following command:
<Tabs groupId="npxyarn" wrapperClassName='code-tabs'>
<TabItem value="npx" label="NPX" default>
```bash
npx create-medusa-app
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn create medusa-app
```
</TabItem>
</Tabs>
### 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.
### 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. An SQLite database will be created inside that directory as well with demo data seeded into it.
### 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?
Gatsby Starter
Next.js Starter
medusa.express (Next.js)
medusa.express (Gatsby)
Gatsby Starter (Simple)
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](./starters/nextjs-medusa-starter.mdx) and [Gatsby](./starters/gatsby-medusa-starter.mdx) starter storefronts.
:::
### 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
Admin
cd my-medusa-store/admin
yarn start
Storefront
cd my-medusa-store/storefront
yarn develop # for Gatsby storefront
yarn dev # for Next.js storefront
```
The commands will differ based on your choices in previous prompts.
<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."
/>
---
## 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
/storefront // Medusa storefront starter
/backend // Medusa backend
/admin // Medusa admin
```
---
## Whats Next
- [Check out Medusa's features](./modules/overview.mdx)
- [Learn about backend configurations](./development/backend/configurations.md)
- [Set up your environment for advanced development](./development/backend/prepare-environment.mdx)