docs: documentation changes for release (#4300)
* docs: added manage reservations user guide (#4290) * docs: added manage reservations user guide * removed feature flag details * docs: added how-to for custom reservations (#4292) * docs: added how-to for custom reservations * eslint fixes * docs: added product module documentation (#4287) * docs: added product module documentation * added details about optional environment variables * small fixes * Remove reference link * added example usages * added link to sample project * address PR feedback * docs: moved product module guide + added product module tabs (#4307) * added product module tab * adjust design of badge * docs: added onboarding features (#4168) * added marketplace page * added subscription roadmap * added rating for onboarding * added learning path components * small fixes * fix build error * fix eslint errors * change roadmaps to recipes * small change in text * optimize learning path and notifications * fix tracking usage * fix eslint errors * added enter/exit animation * allow starting a path using a query parameter * fix gap between notifications * address vercel comments * fixed links issue * changed create-medusa-app docs steps * move troubleshooting section * improved tracking across docs * fix build errors * remove console * added a note about `boilerplate` option * added troubleshooting section for eagain * added invite option in cli reference * added track event for finished onboarding * update boilerplate option name * redesigned learning path component * docs: added how to create widget docs (#4318) * docs: added how to create widget docs * remove development guide * added types * docs: added details about createCustomAdminHooks (#4288) * docs: added details about createCustomAdminHooks * small improvement * added missing import * small changes * docs: added onboarding guide (#4320) * docs: added how to create widget docs * remove development guide * docs: added onboarding guide * added types * added recipes link * small adjustments * fixed eslint errors * styling fixes * change to singular product module * updated the what's new section * shorten down medusa react card * updated tailwind configurations * fix build error * fix newspaper icon * style fixes * change modal shadow * fix color of line numbers * fix code fade color * docs: updated admin documentations * eslint fixes * text changes * added a note about beta version * remove empty object argument * remove demo repo url * fix selection color for code headers * general fixes * fix eslint error * changed code theme * added preparation step * changes regarding beta version * Update docs/content/modules/products/serverless-module.md Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> * Update docs/content/modules/products/serverless-module.md Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> --------- Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,334 +0,0 @@
|
||||
---
|
||||
description: 'Learn step-by-step.'
|
||||
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:
|
||||
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url no-zoom-img">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Medusa Components
|
||||
|
||||
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).
|
||||
|
||||
### Needed Accounts
|
||||
|
||||
- A [Netlify](https://app.netlify.com/signup) account to deploy the Gatsby storefront.
|
||||
- A [GitHub](https://github.com/signup) account where you will host the repository for the Gatsby storefront.
|
||||
|
||||
:::tip
|
||||
|
||||
If you want to use another Git Provider, it’s possible to follow along with this guide but you’ll have to perform the equivalent steps in your Git Provider.
|
||||
|
||||
:::
|
||||
|
||||
### Required Tools
|
||||
|
||||
- Git’s CLI tool. You can follow [this documentation to learn how to install it for your operating system](../../development/backend/prepare-environment.mdx#git).
|
||||
|
||||
---
|
||||
|
||||
## Create GitHub Repository
|
||||
|
||||
Before you can deploy your Gatsby storefront you need to create a GitHub repository and push the code base to it.
|
||||
|
||||
On GitHub, click the plus icon at the top right, then click New Repository.
|
||||
|
||||
|
||||
|
||||
You’ll then be redirected to a new page with a form. In the form, enter the Repository Name then scroll down and click Create repository.
|
||||
|
||||
|
||||
|
||||
### Push Code to GitHub Repository
|
||||
|
||||
The next step is to push the code to the GitHub repository you just created.
|
||||
|
||||
After creating the repository, you’ll be redirected to the repository’s page. On that page, you should see a URL that you can copy to connect your repository to a local directory.
|
||||
|
||||
|
||||
|
||||
Copy the link. Then, open your terminal in the directory that holds your Gatsby storefront codebase and run the following commands:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git remote add origin <GITHUB_URL>
|
||||
```
|
||||
|
||||
Where `<GITHUB_URL>` is the URL you just copied.
|
||||
|
||||
Then, add, commit, and push the changes into the repository:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "initial commit"
|
||||
git push origin master
|
||||
```
|
||||
|
||||
After pushing the changes, you can find the files in your GitHub repository.
|
||||
|
||||
---
|
||||
|
||||
## Deploy to Netlify
|
||||
|
||||
This section covers how to deploy Netlify either through the Netlify website or using Netlify’s CLI tool.
|
||||
|
||||
### Option 1: Using Netlify’s Website
|
||||
|
||||
After logging in with Netlify, go to the [dashboard](https://app.netlify.com/). Then, at the top right of the “Sites” section, click on “Add new site”, then click on “Import an existing project” from the dropdown.
|
||||
|
||||
:::note
|
||||
|
||||
Alternatively, if you don’t have any other websites, you’ll see a big button that says “Import an existing project”.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
You’ll then be asked to connect to a Git provider.
|
||||
|
||||
|
||||
|
||||
Choose GitHub. You’ll then be redirected to GitHub’s website to give Netlify permissions if you haven’t done that before.
|
||||
|
||||
After you authorize Netlify to use GitHub, you’ll be asked to pick the repository you want to deploy. Pick the repository you just created.
|
||||
|
||||
|
||||
|
||||
In the form that shows, keep all fields the same and click on the “Show advanced” button before the “Deploy site” button.
|
||||
|
||||
|
||||
|
||||
Under the “Advanced build settings” section click on the “New variable” button. This will show two inputs for the key and value of the environment variable.
|
||||
|
||||
For the first field enter the key `GATSBY_MEDUSA_BACKEND_URL` and for the value enter the URL of your Medusa backend.
|
||||
|
||||
:::caution
|
||||
|
||||
If you haven’t deployed your Medusa backend yet, you can leave the value blank for now and add it later. However, the build process for the Gatsby storefront will fail.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
:::note
|
||||
|
||||
If you use more environment variables in your storefront be sure to add them here.
|
||||
|
||||
:::
|
||||
|
||||
Once you’re done, scroll down and click on Deploy site.
|
||||
|
||||
You’ll be then redirected to the dashboard of the new website. Netlify will build your website in the background. You should see “Site deploy in progress” on the top card.
|
||||
|
||||
|
||||
|
||||
The deployment can take a few minutes.
|
||||
|
||||
Once the deployment is done, you’ll find the URL in the place of the “Site deploy in progress” message you saw earlier.
|
||||
|
||||
:::tip
|
||||
|
||||
If you haven’t added any products to your Medusa backend, the build process might fail. It’s recommended to add some products to the backend first in that case.
|
||||
|
||||
Alternatively, you can seed the backend with demo data by running this command in the root directory of the backend:
|
||||
|
||||
```bash noReport
|
||||
npx @medusajs/medusa-cli seed -f data/seed.json
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
If you click on it, you’ll be redirected to the deployed storefront website.
|
||||
|
||||
|
||||
|
||||
:::caution
|
||||
|
||||
At this point, you will face errors related to Cross-Origin Resource Sharing (CORS) while using the storefront. Before you start using the storefront, follow along the [Configure CORS on the Medusa Backend section](#configure-cors-variable-on-the-medusa-backend).
|
||||
|
||||
:::
|
||||
|
||||
### Option 2: Using Netlify’s CLI Tool
|
||||
|
||||
In this section, you’ll deploy the Gatsby storefront using Netlify’s CLI tool.
|
||||
|
||||
#### Install the Netlify CLI tool
|
||||
|
||||
If you don’t have the tool installed, run the following command to install it:
|
||||
|
||||
```bash
|
||||
npm install netlify-cli -g
|
||||
```
|
||||
|
||||
#### Login to Netlify
|
||||
|
||||
Then, run the following command to log in to Netlify in your terminal:
|
||||
|
||||
```bash
|
||||
netlify login
|
||||
```
|
||||
|
||||
This opens a page to log in on your browser. You’ll be asked to authorize the Netlify CLI tool.
|
||||
|
||||
|
||||
|
||||
Click on Authorize. Then, you can go back to your terminal and see that you’ve successfully logged in.
|
||||
|
||||
|
||||
|
||||
#### Initialize Netlify Website
|
||||
|
||||
In your terminal, run the following command:
|
||||
|
||||
```bash
|
||||
netlify init
|
||||
```
|
||||
|
||||
You’ll have to follow five steps for the initialization:
|
||||
|
||||
##### Step 1: Create Netlify Website
|
||||
|
||||
You’ll be asked to either connect to an existing Netlify website or create a new one. Choose the second option to create a new site:
|
||||
|
||||
```bash noReport
|
||||
? What would you like to do?
|
||||
⇄ Connect this directory to an existing Netlify site
|
||||
❯ + Create & configure a new site
|
||||
```
|
||||
|
||||
##### Step 2: Choose Netlify Team
|
||||
|
||||
Choose the team you want to create the website in if you have multiple teams.
|
||||
|
||||
##### Step 3: Enter Site Name
|
||||
|
||||
You’ll be asked to optionally enter a site name.
|
||||
|
||||
##### Step 4: Configure Webhooks and Deployment Keys
|
||||
|
||||
At this point, the website is created on Netlify. However, Netlify needs to configure Webhooks and deployment keys. You’ll be asked to either authorize GitHub through Netlify’s website or through a personal access token. You’re free to choose either:
|
||||
|
||||
```bash noReport
|
||||
? Netlify CLI needs access to your GitHub account to configure Webhooks and Depl
|
||||
oy Keys. What would you like to do? (Use arrow keys)
|
||||
❯ Authorize with GitHub through app.netlify.com
|
||||
Authorize with a GitHub personal access token
|
||||
```
|
||||
|
||||
If you pick the first option, a page in your browser will open where you have to grant authorization to your Git provider.
|
||||
|
||||
If you pick the second option, you’ll need to create a personal access token on GitHub. You can follow [this guide in GitHub’s documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) to learn how to do it.
|
||||
|
||||
##### Last Step: Steps with Default Values
|
||||
|
||||
For the rest of the steps, you can keep the default values provided by Netlify and press the “Enter” key on your keyboard for each.
|
||||
|
||||
#### Set Environment Variables
|
||||
|
||||
After the previous command has finished running, your Netlify website will be created. The next step is to add an environment variable that points to your Medusa backend.
|
||||
|
||||
:::caution
|
||||
|
||||
If you haven’t deployed your Medusa backend yet, you can leave the value blank for now and add it later. However, the build process for the Gatsby storefront will fail.
|
||||
|
||||
:::
|
||||
|
||||
Run the following command to add the environment variable:
|
||||
|
||||
```bash
|
||||
netlify env:set GATSBY_MEDUSA_BACKEND_URL "<YOUR_BACKKEND_URL>"
|
||||
```
|
||||
|
||||
Where `<YOUR_BACKKEND_URL>` is the URL of your Medusa backend.
|
||||
|
||||
:::note
|
||||
|
||||
If you use more environment variables in your storefront be sure to add them here.
|
||||
|
||||
:::
|
||||
|
||||
#### Check deployment status
|
||||
|
||||
You can check the deployment status of your website by running the following command:
|
||||
|
||||
```bash
|
||||
netlify watch
|
||||
```
|
||||
|
||||
After the deployment has been completed, you should see a message saying “Deploy complete” with URLs to your website.
|
||||
|
||||
:::tip
|
||||
|
||||
If you haven’t added any products to your Medusa backend, the build process might fail. It’s recommended to add some products to the backend first in that case.
|
||||
|
||||
Alternatively, you can seed the backend with demo data by running this command in the root directory of the backend:
|
||||
|
||||
```bash noReport
|
||||
npx @medusajs/medusa-cli seed -f data/seed.json
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### Open the Gatsby storefront Website
|
||||
|
||||
To open the Gatsby storefront website, either use the URL shown to you or run the following command:
|
||||
|
||||
```bash
|
||||
netlify open:site
|
||||
```
|
||||
|
||||
The Gatsby storefront will then open in your browser.
|
||||
|
||||
|
||||
|
||||
Before you can use the Gatsby storefront, you must add the URL as an environment variable on your deployed Medusa backend.
|
||||
|
||||
---
|
||||
|
||||
## Configure CORS Variable on the Medusa Backend
|
||||
|
||||
To send requests to the Medusa backend from the Gatsby storefront, you must set the `STORE_CORS` environment variable on your backend to the Gatsby storefront’s URL.
|
||||
|
||||
:::caution
|
||||
|
||||
If you want to set a custom domain to your Gatsby storefront website on Netlify, make sure to do it before this step. You can refer to this guide on [Netlify’s documentation to learn how to add a custom domain](https://docs.netlify.com/domains-https/custom-domains/#assign-a-domain-to-a-site).
|
||||
|
||||
:::
|
||||
|
||||
On your Medusa backend, add the following environment variable:
|
||||
|
||||
```bash
|
||||
STORE_CORS=<STOREFRONT_URL>
|
||||
```
|
||||
|
||||
Where `<STOREFRONT_URL>` is the URL of your Gatsby storefront that you just deployed.
|
||||
|
||||
Then, restart your Medusa backend. Once the backend is running again, you can use your Gatsby storefront.
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [Deploy the Medusa Admin](../admin/index.mdx)
|
||||
- [Configure your Medusa backend](../../development/backend/configurations.md)
|
||||
Reference in New Issue
Block a user