Skip to content

Commit

Permalink
chore: update readme with npx command
Browse files Browse the repository at this point in the history
  • Loading branch information
VariableVic committed May 15, 2023
1 parent 9d82379 commit 16512c0
Showing 1 changed file with 22 additions and 52 deletions.
74 changes: 22 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,79 +22,49 @@ A Next.js 13 and App Router-ready ecommerce template, built with [Medusa](https:

Learn more about [Medusa’s architecture](https://docs.medusajs.com/development/fundamentals/architecture-overview) and [commerce modules](https://docs.medusajs.com/modules/overview) in Medusa's documentation.

## Running locally
## Getting started

You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended to use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
> Please refer to the [documentation](https://docs.medusajs.com/development/backend/install#prerequisites) to learn about required tools for the Medusa Backend.
> Note: You should not commit your `.env` file or it will expose secrets.
1\. Install Vercel CLI:

```bash
npm i -g vercel
```

2\. Link local instance with Vercel and GitHub accounts (which creates a `.vercel` directory):
1\. Run `create-medusa-app` with the `nextjs-commerce` starter:

```bash
vercel link
npx create-medusa-app@nextjs-commerce
```

3\. Download your environment variables:
This will create a new main folder with two subfolders for Medusa and Next.js Commerce rexpectively.

```bash
vercel env pull
```
2\. Create a Postgres database named `vercel-commerce` and make sure the Postgres server is running locally.

4\. Install dependencies and run your app:
3\. Inside your newly created `nextjs-commerce` project, change to the `medusa` folder and seed the database:

```bash
npm install
npm run dev
cd nextjs-commerce/medusa
yarn seed
```

Your app should now be running on [localhost:3000](http://localhost:3000/).

## How to configure your Medusa backend for Next.js Commerce

Next.js Commerce x Medusa requires a running [Medusa](https://github.com/medusajs/medusa) backend.

### Prerequisites
This will provide you with some demo products and the necessary product categories to fill out the homepage.

Please refer to the [documentation](https://docs.medusajs.com/development/backend/install#prerequisites) to learn about required tools for the Medusa Backend.
## Running Medusa locally

### How to Install the Medusa Backend

1\. Install the Medusa CLI tool:

```bash
npm install @medusajs/medusa-cli -g
```

2\. Run the following command to create a Medusa backend:
From the `medusa` subfolder, run:

```bash
medusa new my-medusa-store https://github.com/medusajs/medusa-starter-default/tree/nextjs-commerce --seed
yarn start
```

3\. Start the Medusa backend:

```bash
cd my-medusa-store
medusa develop
```
Your Medusa server should now be running on [localhost:9000](http://localhost:9000/).

4\. Copy the contents of .env.example to a .env file in the root of your Next.js Commerce project, and make sure the NEXT_PUBLIC_MEDUSA_BACKEND_API environment variable points to your Medusa backend domain (default: http://localhost:9000).
## Running Next.js Commerce locally

### (Optional) Install Medusa Admin plugin and add product categories
1\. You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. Copy the contents of .env.example to a .env file in the root of your Next.js Commerce project, and make sure the NEXT_PUBLIC_MEDUSA_BACKEND_API environment variable points to your Medusa backend domain (default: http://localhost:9000).

Medusa comes with a few demo products, but they won't show up in the template by default. To showcase products in the store, you need to install the Medusa Admin and add a few product categories. To do that:
> Note: You should not commit your `.env` file or it will expose secrets.
1. Install the [Medusa Admin plugin](https://docs.medusajs.com/admin/quickstart)
2. Enable the [Product Categories feature flag](https://docs.medusajs.com/modules/products/categories)
3. Log in to the admin dashboard and create the following product categories:
2\. From the `nextjs-commerce` subfolder, run:

- hidden-homepage-carousel
- hidden-homepage-featured-items
```bash
yarn dev
```

4. Assign a few products to both categories and they should now show up on the homepage!
Your app should now be running on [localhost:3000](http://localhost:3000/).

0 comments on commit 16512c0

Please sign in to comment.