docs: Deploying our Gatsby storefront on Netlify (#443)
This commit is contained in:
@@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
title: "Deploying your Gatsby storefront on Netlify"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Deploying your Gatsby storefront on Netlify
|
||||||
|
|
||||||
|
This is a guide for deploying our [Gatsby storefront starter](https://github.com/medusajs/gatsby-starter-medusa) on Netlify. Netlify is a platform that offers hosting and backend services for applications and static websites. The steps in this guide will work for most Gatsby projects.
|
||||||
|
|
||||||
|
> At this point, you should have a local Gatsby storefront project running. If not, check out [our starter](https://github.com/medusajs/gatsby-starter-medusa) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusa-commerce.com/how-to/create-medusa-app) for a small walkthrough.
|
||||||
|
|
||||||
|
### 1. Install the Netlify CLI
|
||||||
|
|
||||||
|
Install Netlify CLI on your machine using npm:
|
||||||
|
|
||||||
|
```shell=
|
||||||
|
npm install netlify-cli -g
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Login to your Netlify account
|
||||||
|
|
||||||
|
Connect to your Netlify account from your terminal:
|
||||||
|
|
||||||
|
```shell=
|
||||||
|
netlify login
|
||||||
|
```
|
||||||
|
|
||||||
|
Follow the instructions in your terminal.
|
||||||
|
|
||||||
|
### 3. Netlify setup
|
||||||
|
|
||||||
|
In order to deploy the project to Netlify, you need to create a new site, link the storefront Git repository to the site and configure environment variables.
|
||||||
|
|
||||||
|
The Netlify CLI is used to achieve this.
|
||||||
|
|
||||||
|
#### Create a new site
|
||||||
|
|
||||||
|
```shell=
|
||||||
|
netlify init
|
||||||
|
```
|
||||||
|
|
||||||
|
Follow the instructions in your terminal to authorize and connect your Git repository.
|
||||||
|
|
||||||
|
The default build and deploy settings fit the needs of a Gatsby application, so leave these as is.
|
||||||
|
|
||||||
|
#### Add an environment variable
|
||||||
|
|
||||||
|
```shell=
|
||||||
|
netlify env:set GATSBY_STORE_URL "https://your-medusa-server.com"
|
||||||
|
```
|
||||||
|
|
||||||
|
The above environment variable should point to your Medusa server.
|
||||||
|
|
||||||
|
### 4. Push and deploy
|
||||||
|
|
||||||
|
Finally to deploy the storefront, commit and push your changes to the repository connected in step 3.
|
||||||
|
|
||||||
|
```shell=
|
||||||
|
git add .
|
||||||
|
git commit -m "Deploy Medusa Admin on Netlify"
|
||||||
|
git push origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a couple of minutes, your Gatsby storefront is up and running on Netlify.
|
||||||
|
|
||||||
|
> If you experience CORS issues in your new setup, you might need to add your storefront url as part of the STORE_CORS environment variable in your server setup.
|
||||||
|
|
||||||
|
### What's next?
|
||||||
|
|
||||||
|
If you haven't deployed your Medusa server to use with your new storefront, check out our guide [Deploying on Heroku](https://docs.medusa-commerce.com/how-to/deploying-on-heroku).
|
||||||
|
|
||||||
|
Gatsby is not your thing? Check out our [Next.js storefront starter](https://github.com/medusajs/nextjs-starter-medusa).
|
||||||
@@ -87,7 +87,9 @@ heroku config:set JWT_SECRET=your-super-secret
|
|||||||
heroku config:set COOKIE_SECRET=your-super-secret-pt2
|
heroku config:set COOKIE_SECRET=your-super-secret-pt2
|
||||||
heroku config:set NPM_CONFIG_PRODUCTION=false
|
heroku config:set NPM_CONFIG_PRODUCTION=false
|
||||||
```
|
```
|
||||||
|
|
||||||
> Make sure to use actual secrets in a production environment.
|
> Make sure to use actual secrets in a production environment.
|
||||||
|
|
||||||
Additionally, we need to set the buildpack to Node.js
|
Additionally, we need to set the buildpack to Node.js
|
||||||
|
|
||||||
```shell=
|
```shell=
|
||||||
@@ -137,7 +139,7 @@ module.exports = {
|
|||||||
database_type: "postgres",
|
database_type: "postgres",
|
||||||
store_cors: STORE_CORS,
|
store_cors: STORE_CORS,
|
||||||
admin_cors: ADMIN_CORS,
|
admin_cors: ADMIN_CORS,
|
||||||
database_extra:
|
database_extra:
|
||||||
process.env.NODE_ENV !== "development"
|
process.env.NODE_ENV !== "development"
|
||||||
? { ssl: { rejectUnauthorized: false } }
|
? { ssl: { rejectUnauthorized: false } }
|
||||||
: {},
|
: {},
|
||||||
|
|||||||
@@ -119,6 +119,10 @@ module.exports = {
|
|||||||
type: "doc",
|
type: "doc",
|
||||||
id: "how-to/deploying-on-heroku",
|
id: "how-to/deploying-on-heroku",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: "doc",
|
||||||
|
id: "how-to/deploying-on-qovery",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "doc",
|
type: "doc",
|
||||||
id: "how-to/deploying-on-digital-ocean",
|
id: "how-to/deploying-on-digital-ocean",
|
||||||
@@ -127,6 +131,10 @@ module.exports = {
|
|||||||
type: "doc",
|
type: "doc",
|
||||||
id: "how-to/deploying-admin-on-netlify",
|
id: "how-to/deploying-admin-on-netlify",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: "doc",
|
||||||
|
id: "how-to/deploying-gatsby-on-netlify",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user