Skip to content

Commit

Permalink
docs: improve getting started chapters
Browse files Browse the repository at this point in the history
  • Loading branch information
shahednasser committed Nov 11, 2024
1 parent fc01ae6 commit 825dfa1
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 38 deletions.
118 changes: 118 additions & 0 deletions www/apps/book/app/learn/installation/page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { Prerequisites } from "docs-ui"

export const metadata = {
title: `${pageNumber} Install Medusa`,
}

# {metadata.title}

In this documentation, you'll learn how to install and run a Medusa application.

## Create Medusa Application

<Prerequisites items={[
{
text: "Node.js v20+",
link: "https://nodejs.org/en/download"
},
{
text: "Git CLI tool",
link: "https://git-scm.com/downloads"
},
{
text: "PostgreSQL",
link: "https://www.postgresql.org/download/"
}
]} />

To create a Medusa application, use the `create-medusa-app` command:

```bash
npx create-medusa-app@latest
```

When you run the command, you'll be asked for the project's name and whether you want to install the Next.js storefront.

After answering the prompts, the command installs the Medusa application in a directory with your project name, and prepares a PostgreSQL database that the application connects to.

<Note>

Since the Medusa server is headless, the storefront is optional to install and you can install it later by following [this guide](../storefront-development/nextjs-starter/page.mdx). If you choose to install it with the Medusa application, the storefront is installed in a separate directory named `{project-name}-storefront`.

</Note>

### Successful Installation Result

Once the Medusa application installation finishes successfully, the Medusa application will run at `http://localhost:9000`.

The Medusa Admin dashboard also runs at `http://localhost:9000/app`. The installation process opens the Medusa Admin dashboard in your default browser to create a user. You can later log in with that user.

If you also installed the Next.js storefront, it'll be running at `http://localhost:8000`.

### Troubleshooting Installation Errors

If you ran into an error during your installation, refer to the following troubleshooting guides for help:

1. [create-medusa-app troubleshooting guides](!resources!/troubleshooting/create-medusa-app-errors).
2. [CORS errors](!resources!/troubleshooting/cors-errors).
3. [All troubleshooting guides](!resources!/troubleshooting).

If you can't find your error reported anywhere, please open a [GitHub issue](https://github.com/medusajs/medusa/issues/new/choose).

<Feedback
question="Did you install Medusa successfully?"
negativeQuestion="What errors or issues did you run into?"
showDottedSeparator={false}
positiveBtn="Yes"
negativeBtn="No"
/>

---

## Run Medusa Application in Development

To run the Medusa application in development, change to your application's directory and run the following command:

```bash npm2yarn
npm run dev
```

This runs your Medusa application at `http://localhost:9000`, and the Medusa Admin dashboard `http://localhost:9000/app`.

<Note title="Tip">

For details on starting and configuring the Next.js storefront, refer to [this documentation](../storefront-development/nextjs-starter/page.mdx).

</Note>

The application will restart if you make any changes to code under the `src` directory, except for admin customizations which are hot reloaded, providing you with a seamless developer experience without having to refresh your browser to see the changes.

---

## Create Medusa Admin User

Aside from creating an admin user in the admin dashboard, you can create a user with Medusa's CLI tool.

Run the following command in your Medusa application's directory to create a new admin user:

```bash
npx medusa user -e [email protected] -p supersecret
```

Replace `[email protected]` and `supersecret` with the user's email and password respectively.

You can then use the user's credentials to log into the Medusa Admin application.

---

## Configure Medusa Application

By default, your Medusa application is equipped with the basic configuration to start your development.

If you run into issues with configurations, such as CORS configurations, or need to make changes to the default configuration, refer to [this guide on all available configurations](!resources!/medusa-config).

---

## Next Steps

In the next documentation pages, you'll start customizing your Medusa application, learn about the project's directory structure, and learn about different basic concepts.
26 changes: 0 additions & 26 deletions www/apps/book/app/learn/page.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { CheckCircleSolid, BuildingStorefront, BuildingsSolid, ComputerDesktop, FlyingBox } from "@medusajs/icons"
import { config } from "@/config"
import { Prerequisites } from "docs-ui"

export const metadata = {
title: `${pageNumber} Introduction - ${config.titleSuffix}`,
Expand All @@ -22,31 +21,6 @@ However, unlike other platforms, Medusa is built with customization in mind. You

---

## Get started

<Prerequisites items={[
{
text: "Node.js v20+",
link: "https://nodejs.org/en/download"
},
{
text: "Git CLI tool",
link: "https://git-scm.com/downloads"
},
{
text: "PostgreSQL",
link: "https://www.postgresql.org/download/"
}
]} />

Create your first Medusa store by running the following command:

```bash
npx create-medusa-app@latest
```

---

## Who should use Medusa

Medusa is for businesses with unique requirements that other digital commerce platforms can't easily support. Businesses of any size can use Medusa, from small startups to large enterprises - all it takes is a developer to manage and deploy your project.
Expand Down
2 changes: 1 addition & 1 deletion www/apps/book/components/Feedback/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Feedback = (props: FeedbackProps) => {
event="survey"
pathName={feedbackPathname}
reportLink={reportLink}
question="Was this chapter helpful?"
question={props.question || "Was this chapter helpful?"}
{...props}
/>
)
Expand Down
2 changes: 2 additions & 0 deletions www/apps/book/components/MDXComponents/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import type { MDXComponents as MDXComponentsType } from "mdx/types"
import { Link, MDXComponents as UiMdxComponents } from "docs-ui"
import Feedback from "../Feedback"

const MDXComponents: MDXComponentsType = {
...UiMdxComponents,
a: Link,
Feedback
}

export default MDXComponents
19 changes: 13 additions & 6 deletions www/apps/book/sidebar.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,19 @@ export const sidebar = numberSidebarItems(
type: "link",
path: "/learn",
title: "Introduction",
},
{
type: "link",
path: "/learn/first-customizations",
title: "Your First Customizations",
chapterTitle: "First Customization",
children: [
{
type: "link",
path: "/learn/installation",
title: "Installation",
},
{
type: "link",
path: "/learn/first-customizations",
title: "Your First Customizations",
chapterTitle: "First Customization",
},
],
},
{
type: "link",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ You might see a log in your browser console, that looks like this:

![CORS error log](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003322/Medusa%20Docs/Other/jnHK115_udgf2n.png)

In your `medusa-config.ts` , you should ensure that you've configured your CORS settings correctly:
In your `medusa-config.ts`, ensure that you've configured your CORS settings correctly:

```ts title="medusa-config.ts"
module.exports = defineConfig({
projectConfig: {
http: {
storeCors: process.env.STORE_CORS,
adminCors: process.env.ADMIN_CORS,
authCors: process.env.AUTH_CORS,
storeCors: process.env.STORE_CORS || "http://localhost:8000",
adminCors: process.env.ADMIN_CORS || "http://localhost:9000",
authCors: process.env.AUTH_CORS || "http://localhost:8000,http://localhost:9000",
},
// ...
},
})
```

Learn more about these configurations in [this documentation](/references/medusa-config#http)
Learn more about these configurations in [this documentation](/references/medusa-config#http).

0 comments on commit 825dfa1

Please sign in to comment.