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
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,12 +1,12 @@
|
||||
---
|
||||
description: 'Learn how to install the Gatsby starter storefront to use with the Medusa Server. The Gatsby storefront includes features related to customer profiles, order returns and exchanges, and more.'
|
||||
description: 'Learn how to install the Gatsby starter storefront to use with the Medusa Backend. The Gatsby storefront includes features related to customer profiles, order returns and exchanges, and more.'
|
||||
---
|
||||
|
||||
import Feedback from '@site/src/components/Feedback';
|
||||
|
||||
# Gatsby Storefront Quickstart
|
||||
|
||||
This document guides you to install and set up the Gatsby Storefront for your Medusa Server.
|
||||
This document guides you to install and set up the Gatsby Starter Storefront.
|
||||
|
||||
|
||||
|
||||
@@ -14,15 +14,15 @@ This document guides you to install and set up the Gatsby Storefront for your Me
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Gatsby Storefront, you can deploy the Gatsby Storefront to Netlify with this button:
|
||||
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" className="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" className="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This document assumes you already have a Medusa server installed. If you don’t, please follow the [Quickstart guide for the Medusa server](../quickstart/quick-start.mdx) to learn how to do it.
|
||||
This document assumes you already have a Medusa backend installed. If you don’t, please follow the [Quickstart guide for the Medusa backend](../development/backend/install.mdx) to learn how to do it.
|
||||
|
||||
You should also have the Gatsby CLI installed:
|
||||
|
||||
@@ -53,7 +53,7 @@ cd my-medusa-storefront
|
||||
mv .env.template .env.development
|
||||
```
|
||||
|
||||
3\. Make sure the Medusa server is running, then run the local Gatsby server:
|
||||
3\. Make sure the Medusa backend is running, then run the local Gatsby server:
|
||||
|
||||
```bash npm2yarn
|
||||
npm run start
|
||||
@@ -84,7 +84,7 @@ To customize the components, pages, and UI of your Gatsby storefront, just edit
|
||||
|
||||
### Data Refresh
|
||||
|
||||
The Gatsby storefront uses the [gatsby-source-medusa](https://github.com/medusajs/medusa/tree/master/packages/gatsby-source-medusa) plugin to source data from your Medusa server. This data includes products, collections, and regions, and as a result, you can query this data in the storefront starter using GraphQL queries. You can also explore the data in your store on `localhost:8000/___graphql`.
|
||||
The Gatsby storefront uses the [gatsby-source-medusa](https://github.com/medusajs/medusa/tree/master/packages/gatsby-source-medusa) plugin to source data from your Medusa backend. This data includes products, collections, and regions, and as a result, you can query this data in the storefront starter using GraphQL queries. You can also explore the data in your store on `localhost:8000/___graphql`.
|
||||
|
||||
Because of this, you must rebuild the site every time you update any of this data for it to be reflected in your storefront. The Medusa team will soon be releasing a new version of the plugin which adds incremental builds, which will improve build times.
|
||||
|
||||
@@ -103,7 +103,7 @@ To change the port, change the `develop` command in `package.json` to the follow
|
||||
|
||||
Make sure to replace `<PORT>` with the port number you want the storefront to run on. For example, `3000`.
|
||||
|
||||
Then, on your server, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
Then, on your backend, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
|
||||
```bash
|
||||
STORE_CORS=http://localhost:<PORT>
|
||||
@@ -111,7 +111,7 @@ STORE_CORS=http://localhost:<PORT>
|
||||
|
||||
:::info
|
||||
|
||||
For more details about the Store Cross-Origin Resource Sharing (CORS) configuration, check out the [Configure your Server documentation](../usage/configurations.md#storefront-cors).
|
||||
For more details about the Store Cross-Origin Resource Sharing (CORS) configuration, check out the [Configure your Backend documentation](../development/backend/configurations.md#storefront-cors).
|
||||
|
||||
:::
|
||||
|
||||
@@ -148,4 +148,4 @@ The Gatsby storefront comes with a lot of features out of the box including:
|
||||
|
||||
- [Storefront API reference](https://docs.medusajs.com/api/store)
|
||||
- [Deploy the Gatsby storefront on Netlify](../deployments/storefront/deploying-gatsby-on-netlify.md)
|
||||
- [Install Stripe as a payment provider](../add-plugins/stripe.md#add-to-gatsby-storefront)
|
||||
- [Install Stripe as a payment provider](../plugins/payment/stripe.md#add-to-gatsby-storefront)
|
||||
|
||||
@@ -6,7 +6,7 @@ import Feedback from '@site/src/components/Feedback';
|
||||
|
||||
# Next.js Storefront Quickstart
|
||||
|
||||
This document guides you to install and set up the Next.js Storefront for your Medusa Server.
|
||||
This document guides you to install and set up the Next.js Starter Storefront.
|
||||
|
||||
|
||||
|
||||
@@ -14,15 +14,15 @@ This document guides you to install and set up the Next.js Storefront for your M
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Next.js Storefront, you can deploy the Next.js Storefront to Netlify with this button:
|
||||
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/nextjs-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/nextjs-starter-medusa" className="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" className="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This document assumes you already have a Medusa server installed. If you don’t, please follow the [Quickstart guide for the Medusa server](../quickstart/quick-start.mdx) to learn how to do it.
|
||||
This document assumes you already have a Medusa backend installed. If you don’t, please follow the [Quickstart guide for the Medusa backend](../development/backend/install.mdx) to learn how to do it.
|
||||
|
||||
---
|
||||
|
||||
@@ -47,7 +47,7 @@ cd my-medusa-storefront
|
||||
mv .env.template .env.local
|
||||
```
|
||||
|
||||
3\. Make sure the Medusa server is running, then run the local Next.js server:
|
||||
3\. Make sure the Medusa backend is running, then run the local Next.js server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
@@ -86,11 +86,11 @@ To enable or disable the search engine, change the value of the feature in `stor
|
||||
}
|
||||
```
|
||||
|
||||
Then, restart your Next.js server. Depending on whether you enabled or disabled the search engine, the search bar will appear or disappear in the navigation bar accordingly.
|
||||
Then, restart your Next.js backend. Depending on whether you enabled or disabled the search engine, the search bar will appear or disappear in the navigation bar accordingly.
|
||||
|
||||
### MeiliSearch Integration
|
||||
|
||||
If you have the search engine feature enabled, it is expected that you have installed the MeiliSearch plugin on your Medusa server. If not, [follow this guide to install it](../add-plugins/meilisearch.md).
|
||||
If you have the search engine feature enabled, it is expected that you have installed the MeiliSearch plugin on your Medusa backend. If not, [follow this guide to install it](../plugins/search/meilisearch.md).
|
||||
|
||||
In your Next.js storefront, set the environment variables necessary for the MeiliSearch integration:
|
||||
|
||||
@@ -121,11 +121,11 @@ curl \
|
||||
|
||||
Make sure to replace `<MEILISEARCH_URL>` with the URL MeiliSearch is running on and `<MEILISEARCH_MASTER_KEY>` with your MeiliSearch [master key](https://docs.meilisearch.com/learn/security/master_api_keys.html#protecting-a-meilisearch-instance).
|
||||
|
||||
Then, restart the Next.js server. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
Then, restart the Next.js backend. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
|
||||
:::note
|
||||
|
||||
To make sure the Next.js storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa server at least the fields `title`, `handle`, `description`, and `thumbnail`.
|
||||
To make sure the Next.js storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa backend at least the fields `title`, `handle`, `description`, and `thumbnail`.
|
||||
|
||||
:::
|
||||
|
||||
@@ -133,7 +133,7 @@ To make sure the Next.js storefront properly displays the products in the search
|
||||
|
||||
### Algolia Integration
|
||||
|
||||
Instead of using the default MeiliSearch search engine, you can switch to using Algolia. Make sure you start by installing the Algolia plugin on your Medusa server. You can do it by [following this guide](../add-plugins/algolia.md).
|
||||
Instead of using the default MeiliSearch search engine, you can switch to using Algolia. Make sure you start by installing the Algolia plugin on your Medusa backend. You can do it by [following this guide](../plugins/search/algolia.md).
|
||||
|
||||
In your Next.js storefront, set the environment variables necessary for the Algolia integration:
|
||||
|
||||
@@ -162,13 +162,13 @@ export const SEARCH_INDEX_NAME =
|
||||
process.env.NEXT_PUBLIC_INDEX_NAME || "products"
|
||||
```
|
||||
|
||||
Then, restart the Next.js server. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
Then, restart the Next.js backend. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
|
||||
|
||||
|
||||
### Stripe Payment Integration
|
||||
|
||||
Stripe integration is supported by default. Make sure you have Stripe installed and enabled on your Medusa server first. You can [follow this guide to learn how to install it](../add-plugins/stripe.md).
|
||||
Stripe integration is supported by default. Make sure you have Stripe installed and enabled on your Medusa backend first. You can [follow this guide to learn how to install it](../plugins/payment/stripe.md).
|
||||
|
||||
Then, in your Next.js storefront, set the environment variable necessary for the Stripe integration:
|
||||
|
||||
@@ -178,13 +178,13 @@ NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
|
||||
|
||||
Make sure to replace `<YOUR_PUBLISHABLE_KEY>` with your Stripe publishable key. It can be retrieved from your [Stripe dashboard](https://dashboard.stripe.com/) by going to Developers → API Keys.
|
||||
|
||||
If you restart your Next.js server you should be able to pay with Stripe on checkout.
|
||||
If you restart your Next.js backend you should be able to pay with Stripe on checkout.
|
||||
|
||||
|
||||
|
||||
### PayPal Payment Integration
|
||||
|
||||
PayPal integration is supported by default. Make sure you have PayPal installed and enabled on your Medusa server first. You can [follow this guide to learn how to install it](../add-plugins/paypal.md).
|
||||
PayPal integration is supported by default. Make sure you have PayPal installed and enabled on your Medusa backend first. You can [follow this guide to learn how to install it](../plugins/payment/paypal.md).
|
||||
|
||||
Then, in your Next.js storefront, set the environment variable necessary for the PayPal integration:
|
||||
|
||||
@@ -194,7 +194,7 @@ NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
|
||||
|
||||
Make sure to replace `<YOUR_CLIENT_ID>` with your PayPal client ID. You can retrieve it from the [PayPal developer dashboard](https://developer.paypal.com/developer/applications/).
|
||||
|
||||
If you restart your Next.js server you should be able to pay with PayPal on checkout.
|
||||
If you restart your Next.js backend you should be able to pay with PayPal on checkout.
|
||||
|
||||
|
||||
|
||||
@@ -221,7 +221,7 @@ To change the port, change the `develop` command in `package.json` to the follow
|
||||
|
||||
Make sure to replace `<PORT>` with the port number you want the storefront to run on. For example, `3000`.
|
||||
|
||||
Then, on your server, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
Then, on your backend, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
|
||||
```bash
|
||||
STORE_CORS=http://localhost:<PORT>
|
||||
@@ -253,4 +253,4 @@ You can learn more about development with Next.js through [their documentation](
|
||||
|
||||
- [Storefront API reference](https://docs.medusajs.com/api/store)
|
||||
- [Install Medusa Admin](../admin/quickstart.mdx).
|
||||
- [Install Stripe as a payment provider](../add-plugins/stripe.md#add-to-nextjs-storefront)
|
||||
- [Install Stripe as a payment provider](../plugins/payment/stripe.md#add-to-nextjs-storefront)
|
||||
|
||||
Reference in New Issue
Block a user