diff --git a/docs/content/admin/quickstart.mdx b/docs/content/admin/quickstart.mdx index 42a5709982..0bf2507023 100644 --- a/docs/content/admin/quickstart.mdx +++ b/docs/content/admin/quickstart.mdx @@ -174,5 +174,5 @@ You can learn more about Medusa admin and its features in the [User Guide](../us ## See Also - [Customize Medusa Admin](./development.md) -- Install the [Next.js](../starters/nextjs-medusa-starter.mdx) or [Gatsby](../starters/gatsby-medusa-starter.mdx) storefront starters. +- Install the [Next.js](../starters/nextjs-medusa-starter.mdx) storefront starter. - [Use `create-medusa-app` to install all of Medusa’s 3 components.](../create-medusa-app.mdx) diff --git a/docs/content/create-medusa-app.mdx b/docs/content/create-medusa-app.mdx index 45d250506f..716d0df120 100644 --- a/docs/content/create-medusa-app.mdx +++ b/docs/content/create-medusa-app.mdx @@ -107,7 +107,7 @@ If you choose an option other than `None`, a storefront will be installed under :::tip -Learn more about the [Next.js](./starters/nextjs-medusa-starter.mdx) and [Gatsby](./starters/gatsby-medusa-starter.mdx) starter storefronts. +Learn more about the [Next.js starter storefront](./starters/nextjs-medusa-starter.mdx). ::: diff --git a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md index 9fdd07829e..58f6556cd3 100644 --- a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md +++ b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md @@ -5,6 +5,12 @@ addHowToData: true # Deploy Gatsby Storefront on Netlify +:::note + +The Gatsby storefront has been deprecated and it's not recommended to use it moving forward. You can use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) instead or build your own. + +::: + In this document, you’ll learn how to deploy the Gatsby Storefront on [Netlify](https://www.netlify.com/). Alternatively, you can use this button to deploy the Gatsby Storefront to Netlify directly: @@ -19,7 +25,7 @@ Alternatively, you can use this button to deploy the Gatsby Storefront to Netlif ### Medusa Components -Before proceeding with this documentation, it is assumed you already have the Gatsby storefront installed locally. If not, please go through the [quickstart guide](../../starters/gatsby-medusa-starter.mdx) first. +Before proceeding with this documentation, it is assumed you already have the Gatsby storefront installed locally. Additionally, this documentation does not cover how to deploy the Medusa backend. If you want to deploy the Medusa backend, [check out one of the deployment documentation related to the Medusa backend](../server/index.mdx). diff --git a/docs/content/development/notification/create-notification-provider.md b/docs/content/development/notification/create-notification-provider.md index 8b38586149..c072f30c47 100644 --- a/docs/content/development/notification/create-notification-provider.md +++ b/docs/content/development/notification/create-notification-provider.md @@ -309,7 +309,7 @@ Then, place an order either using the [REST APIs](/api/store) or using the store :::tip -If you don’t have a storefront installed you can get started with either the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) starter storefronts in minutes. +If you don’t have a storefront installed you can get started with the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront in minutes. ::: diff --git a/docs/content/homepage.mdx b/docs/content/homepage.mdx index b7e4fe4664..a77b8a6d9f 100644 --- a/docs/content/homepage.mdx +++ b/docs/content/homepage.mdx @@ -113,7 +113,7 @@ Medusa provides the essential building blocks that developers can put together t }, ]} /> - ` is the name of the S3 bucket you’re using. - Check out [more plugins](../overview.mdx) you can add to your store. - [Deploy the Medusa backend](../../deployments/server/index.mdx) -- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts. +- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront. diff --git a/docs/content/plugins/file-service/spaces.md b/docs/content/plugins/file-service/spaces.md index 3f4f7e2d9a..923265c149 100644 --- a/docs/content/plugins/file-service/spaces.md +++ b/docs/content/plugins/file-service/spaces.md @@ -184,4 +184,4 @@ Where `` is the domain name for your Space which can be retri - Check out [more plugins](../overview.mdx) you can add to your store. - [Deploy the Medusa backend on DigitalOcean](../../deployments/server/deploying-on-digital-ocean.md). -- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefront. +- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront. diff --git a/docs/content/plugins/notifications/sendgrid.mdx b/docs/content/plugins/notifications/sendgrid.mdx index 387fc886b3..cfba92c4bc 100644 --- a/docs/content/plugins/notifications/sendgrid.mdx +++ b/docs/content/plugins/notifications/sendgrid.mdx @@ -3971,7 +3971,7 @@ To test it out, perform an action that would trigger one of the emails being sen :::tip -If you don’t have a storefront installed, check out the [Gatsby](../../starters/gatsby-medusa-starter.mdx) or [Next.js](../../starters/nextjs-medusa-starter.mdx) starters to create a storefront in minutes. +If you don’t have a storefront installed, check out the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront. ::: diff --git a/docs/content/plugins/notifications/slack.md b/docs/content/plugins/notifications/slack.md index 89b2b862d3..dd490be1a1 100644 --- a/docs/content/plugins/notifications/slack.md +++ b/docs/content/plugins/notifications/slack.md @@ -111,4 +111,4 @@ That’s all you need to do to integrate Slack into Medusa! ## See Also - Install [Medusa's Admin](../../admin/quickstart.mdx) for the full order-management experience. -- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) starter storefronts. +- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront. diff --git a/docs/content/plugins/notifications/twilio-sms.md b/docs/content/plugins/notifications/twilio-sms.md index 1d78aa283c..fd91fa3607 100644 --- a/docs/content/plugins/notifications/twilio-sms.md +++ b/docs/content/plugins/notifications/twilio-sms.md @@ -127,7 +127,7 @@ If you create an order now on your storefront, you should receive a message from :::tip -If you don’t have a storefront set up yet, you can install one of the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts. +If you don’t have a storefront set up yet, you can install the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx). ::: diff --git a/docs/content/plugins/payment/paypal.md b/docs/content/plugins/payment/paypal.md index 6b661f6894..084ba51c02 100644 --- a/docs/content/plugins/payment/paypal.md +++ b/docs/content/plugins/payment/paypal.md @@ -146,7 +146,11 @@ You can test out the payment with PayPal using your sandbox account. ### Add to Gatsby Storefront -Medusa also has a Gatsby storefront that you can use as your ecommerce storefront. If you don’t have the storefront installed, you can follow [this quickstart guide](../../starters/gatsby-medusa-starter.mdx). +:::note + +Medusa's Gatsby storefront is deprecated and it is recommended to use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) or build your own storefront instead. + +::: In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with its value set to the Client ID: diff --git a/docs/content/plugins/payment/stripe.md b/docs/content/plugins/payment/stripe.md index 617c296601..48338f4102 100644 --- a/docs/content/plugins/payment/stripe.md +++ b/docs/content/plugins/payment/stripe.md @@ -148,7 +148,11 @@ Now, if you run your Medusa backend and your storefront, on checkout you’ll be ### Add to Gatsby Storefront -Medusa also has a Gatsby storefront that you can use as your ecommerce store. If you don’t have the storefront installed, you can follow [this quickstart guide](../../starters/gatsby-medusa-starter). +:::note + +Medusa's Gatsby storefront is deprecated and it is recommended to use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) or build your own storefront instead. + +::: In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with the value set to the Publishable Key: diff --git a/docs/content/plugins/search/algolia.md b/docs/content/plugins/search/algolia.md index 1ae4db3db7..9ac63a3ea5 100644 --- a/docs/content/plugins/search/algolia.md +++ b/docs/content/plugins/search/algolia.md @@ -171,7 +171,7 @@ This feature is only available if you have Redis installed and configured with y ## Add Search to your Storefront -In this section, you’ll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks such as the [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefront. +In this section, you’ll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks. ### Storefront Prerequisites @@ -179,7 +179,7 @@ It is assumed you already have a storefront set up and working with the Medusa b :::tip -If you don’t have a storefront set up, you can use the [Gatsby](../../starters/gatsby-medusa-starter.mdx) or [Next.js](../../starters/nextjs-medusa-starter.mdx) storefronts Medusa provides. +If you don’t have a storefront set up, you can use the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx) that Medusa provides. ::: diff --git a/docs/content/plugins/search/meilisearch.md b/docs/content/plugins/search/meilisearch.md index 4e93e21a51..1362ee4d2d 100644 --- a/docs/content/plugins/search/meilisearch.md +++ b/docs/content/plugins/search/meilisearch.md @@ -132,7 +132,7 @@ This feature is only available if you have Redis installed and configured with y ## Add Search to your Storefront -In this section, you’ll learn how to add the UI on your storefront to allow searching with MeiliSearch. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks such as the [Gatsby storefront](../../starters/gatsby-medusa-starter.mdx). +In this section, you’ll learn how to add the UI on your storefront to allow searching with MeiliSearch. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks. ### Storefront Prerequisites @@ -140,7 +140,7 @@ It is assumed you already have a storefront set up and working with the Medusa b :::tip -If you don’t have a storefront set up, you can use the [Gatsby](../../starters/gatsby-medusa-starter.mdx) or [Next.js](../../starters/nextjs-medusa-starter.mdx) storefronts Medusa provides. +If you don’t have a storefront set up, you can use the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx) that Medusa provides. ::: diff --git a/docs/content/starters/gatsby-medusa-starter.mdx b/docs/content/starters/gatsby-medusa-starter.mdx deleted file mode 100644 index 2f3e6c7a0c..0000000000 --- a/docs/content/starters/gatsby-medusa-starter.mdx +++ /dev/null @@ -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. - -![Gatsby Storefront Quick Look](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003111/Medusa%20Docs/Screenshots/LcAsi8r_yivcro.gif) - -## 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: - - - Deploy to Netlify - - ---- - -## 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`! - - - -:::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=" -} -``` - -Make sure to replace `` 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: -``` - -:::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. - - ![Products Page](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003126/Medusa%20Docs/Screenshots/P0Mpvxh_qznct6.png) -- Customer authentication. - - ![Sign In Page](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003139/Medusa%20Docs/Screenshots/0sVcZeS_z6cftp.png) -- Full checkout workflow. - - ![One-Page Checkout](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003152/Medusa%20Docs/Screenshots/5wSs3yZ_iivxrh.png) -- Request swaps and returns using a customer’s order ID and Email. - - ![Request Return for Order](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003162/Medusa%20Docs/Screenshots/mAChp3f_ubd89n.png) - ---- - -## 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) diff --git a/docs/content/starters/nextjs-medusa-starter.mdx b/docs/content/starters/nextjs-medusa-starter.mdx index 54ecb16f31..5aa9f57273 100644 --- a/docs/content/starters/nextjs-medusa-starter.mdx +++ b/docs/content/starters/nextjs-medusa-starter.mdx @@ -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. + + + + We've deprecated the Gatsby starter storefront and instead recommend using the Next.js storefront or building your own custom storefront. + + + + ![Next.js Storefront Demo](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003177/Medusa%20Docs/Screenshots/koJl8uR_n3gvii.gif) ## Instant Deployment to Netlify diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index bde70d438a..8002c6990f 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -97,15 +97,6 @@ module.exports = { }, className: 'homepage-sidebar-item' }, - { - type: 'doc', - id: 'starters/gatsby-medusa-starter', - label: 'Gatsby Storefront', - customProps: { - sidebar_icon: 'gatsby' - }, - className: 'homepage-sidebar-item' - }, { type: 'html', value: 'SDKs', diff --git a/www/docs/src/components/QueryNote/index.js b/www/docs/src/components/QueryNote/index.js new file mode 100644 index 0000000000..9f160fec5d --- /dev/null +++ b/www/docs/src/components/QueryNote/index.js @@ -0,0 +1,25 @@ +import React from "react"; +import { useQueryStringValue } from "@docusaurus/theme-common/internal" +import Admonition from "@theme/Admonition" + +export default function QueryNote ({ + query: { + key, + value = '' + }, + //admonition props + admonition, + children +}) { + const queryValue = useQueryStringValue(key) + + return ( + <> + {queryValue === value && ( + + {children} + + )} + + ) +} \ No newline at end of file diff --git a/www/docs/vercel.json b/www/docs/vercel.json index 29256aa043..80b3d2a77c 100644 --- a/www/docs/vercel.json +++ b/www/docs/vercel.json @@ -464,6 +464,10 @@ { "source": "/introduction", "destination": "/development/fundamentals/architecture-overview" + }, + { + "source": "/starters/gatsby-medusa-starter", + "destination": "/starters/nextjs-medusa-starter?ref=gatsby-medusa-starter" } ] } \ No newline at end of file