docs: removed the gatsby storefront guide (#3527)
* docs: removed the gatsby storefront guide * docs: fixed query value
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,151 +0,0 @@
|
||||
---
|
||||
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 Starter Storefront.
|
||||
|
||||
|
||||
|
||||
## Instant Deployment to Netlify
|
||||
|
||||
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" 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 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:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install gatsby-cli -g
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
:::tip
|
||||
|
||||
It is recommended to use [Yarn](https://yarnpkg.com/getting-started/install) for the installation process as it's much faster than using NPM.
|
||||
|
||||
:::
|
||||
|
||||
1\. Create a new Gatsby project using the [Medusa starter template](https://github.com/medusajs/gatsby-starter-medusa):
|
||||
|
||||
```bash
|
||||
gatsby new my-medusa-storefront https://github.com/medusajs/gatsby-starter-medusa
|
||||
```
|
||||
|
||||
2\. Change to the newly created directory `my-medusa-storefront` and rename the template environment variable file to use environment variables in development:
|
||||
|
||||
```bash
|
||||
cd my-medusa-storefront
|
||||
mv .env.template .env.development
|
||||
```
|
||||
|
||||
3\. Make sure the Medusa backend is running, then run the local Gatsby server:
|
||||
|
||||
```bash npm2yarn
|
||||
npm run start
|
||||
```
|
||||
|
||||
Your Gatsby storefront is now running at `localhost:8000`!
|
||||
|
||||
<Feedback
|
||||
event="survey_gatsby_quickstart"
|
||||
question="Did you set up the storefront successfully?"
|
||||
positiveQuestion="Is there anything that should improved?"
|
||||
negativeQuestion="Please describe the issue you faced."
|
||||
/>
|
||||
|
||||
:::tip
|
||||
|
||||
If you run into errors during the installation, check out [this troubleshooting guide](../troubleshooting/common-installation-errors.mdx).
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Development Notes
|
||||
|
||||
### Customization
|
||||
|
||||
To customize the components, pages, and UI of your Gatsby storefront, just edit files under the `src` directory.
|
||||
|
||||
### 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 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.
|
||||
|
||||
### Change Port
|
||||
|
||||
By default, the Gatsby storefront runs on port `8000`.
|
||||
|
||||
To change the port, change the `develop` command in `package.json` to the following:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
//other scripts
|
||||
"develop": "gatsby develop --port=<PORT>"
|
||||
}
|
||||
```
|
||||
|
||||
Make sure to replace `<PORT>` with the port number you want the storefront to run on. For example, `3000`.
|
||||
|
||||
Then, on your backend, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
|
||||
```bash
|
||||
STORE_CORS=http://localhost:<PORT>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
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).
|
||||
|
||||
:::
|
||||
|
||||
### Development Resources
|
||||
|
||||
If you’re not familiar with Gatsby, you can learn more about it through the following resources:
|
||||
|
||||
- [Documentation](https://www.gatsbyjs.com/docs)
|
||||
- [Plugin Library](https://www.gatsbyjs.com/plugins/)
|
||||
- [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/)
|
||||
|
||||
---
|
||||
|
||||
## Storefront Features
|
||||
|
||||
The Gatsby storefront comes with a lot of features out of the box including:
|
||||
|
||||
- View all products and manage your cart.
|
||||
|
||||
|
||||
- Customer authentication.
|
||||
|
||||
|
||||
- Full checkout workflow.
|
||||
|
||||
|
||||
- Request swaps and returns using a customer’s order ID and Email.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [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](../plugins/payment/stripe.md#add-to-gatsby-storefront)
|
||||
@@ -3,11 +3,28 @@ description: 'Learn how to install the Next.js starter storefront to use with Me
|
||||
---
|
||||
|
||||
import Feedback from '@site/src/components/Feedback';
|
||||
import QueryNote from '@site/src/components/QueryNote';
|
||||
|
||||
# Next.js Storefront Quickstart
|
||||
|
||||
This document guides you to install and set up the Next.js Starter Storefront.
|
||||
|
||||
<!-- vale docs.We = NO -->
|
||||
|
||||
<QueryNote
|
||||
query={{
|
||||
key: 'ref',
|
||||
value: 'gatsby-medusa-starter'
|
||||
}}
|
||||
admonition={{
|
||||
type: 'note'
|
||||
}}
|
||||
>
|
||||
We've deprecated the Gatsby starter storefront and instead recommend using the Next.js storefront or building your own custom storefront.
|
||||
</QueryNote>
|
||||
|
||||
<!-- vale docs.We = YES -->
|
||||
|
||||
|
||||
|
||||
## Instant Deployment to Netlify
|
||||
|
||||
Reference in New Issue
Block a user