Merge branch 'master' into develop

This commit is contained in:
olivermrbl
2022-05-30 09:49:05 +02:00
13 changed files with 6505 additions and 3131 deletions
+3819 -585
View File
File diff suppressed because it is too large Load Diff
+1126 -1047
View File
File diff suppressed because it is too large Load Diff
+677 -667
View File
File diff suppressed because it is too large Load Diff
+707 -699
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -7,7 +7,7 @@ routes:
path: /products/:id
route: /products
description: >
A product represents the object, that is to be sold on the website. A product can have variants, that differ by e.g. size and color.
A product represents the object, that are to be sold on the website. A product can have variants, that differ by e.g. size and color.
endpoints:
- path: /:id
method: GET
+108 -27
View File
@@ -1,57 +1,138 @@
# MinIO
In order to work with images in Medusa, you need a file service plugin responsible for hosting. Following this guide will allow you to upload images to MinIO bucket.
This document will guide you through installing the MinIO file service plugin on your Medusa server.
### Before you start
## Overview
At this point, you should have an instance of our store engine running. If not, we have a [full guide](https://docs.medusajs.com/tutorial/set-up-your-development-environment) for setting up your local environment.
To manage images in Medusa, you need a file service plugin responsible for hosting. Without a file service plugin, you will face issues while working with Medusa, such as when uploading images for products.
### Set up MinIO
Medusa provides three different options to handle your file storage. This document will focus on setting up [MinIO](https://min.io) on your local machine and connecting Medusa to it.
#### Create an MinIO bucket
## Prerequisites
In the MinIO console create a new bucket, then click into that bucket and change the `Access Policy` to `public`.
A Medusa server is required to be set up before following along with this document. You can follow the [quickstart guide](../quickstart/quick-start.md) to get started in minutes.
Be aware, that this will allow for anyone to acces your bucket. Avoid storing sensitive data.
## Set up MinIO
#### Generate access keys
You can follow [MinIOs guide to install it](https://docs.min.io/minio/baremetal/quickstart/quickstart.html) on your machine based on your operating system.
Navigate to users and perform the following steps:
After installing it, make sure MinIO is always running when your Medusa server is running. Its recommended that you set up an alias to quickly start the MinIO server as instructed at the end of the installation guides in MinIO.
- Enter new `Access Key` and `Secret Key`
- Select readwrite policy
- Submit the details
:::warning
### Installation
In MinIOs documentation, port `9000` is used for the address of the MinIO server. However, this collides with the port for the Medusa server. You must change the port for MinIO to another one (for example, port `9001`).
First, install the plugin using your preferred package manager:
:::
```bash npm2yarn
### Create a MinIO bucket
After installing MinIO and logging into the Console, click on “Create Bucket” to create a new bucket that will store the files of your Medusa server.
![Create Bucket](https://i.imgur.com/PwLldKt.png)
Then, in the form, enter a name for the bucket and click on Create Bucket. By MinIOs requirement, the name can only consist of lower case characters, numbers, dots (`.`), and hyphens (`-`).
![Bucket Info](https://i.imgur.com/UB477rl.png)
After creating the bucket, click on the cog icon at the top right to configure the bucket.
![Configure Bucket](https://i.imgur.com/0pB8RIM.png)
Then, click on the edit icon next to Access Policy. This will open a pop-up.
![Access Policy](https://i.imgur.com/qo3QQz4.png)
In the pop-up, change the selected value to “public” and click Set.
:::warning
Changing the Access Policy to public will allow anyone to access your bucket. Avoid storing sensitive data in the bucket.
:::
### Generate Access Keys
From the sidebar of your MinIO console, click on Identity then Service Accounts.
![Service Accounts Sidebar](https://i.imgur.com/CkTbrEc.png)
Then, click on Create Service Account.
![Create Service Account](https://i.imgur.com/a000HQf.png)
This will generate a random Access Key and Secret Key for you.
![Generated Keys](https://i.imgur.com/my4c7zU.png)
Click on Create. A pop-up will then show the value for your Access Key and Secret Key. Copy them to use in the next section.
:::caution
You will not be able to access the Secret Key after closing the pop-up. So, make sure to store it somewhere to use later when configuring the plugin.
:::
## Plugin Installation
In the directory of your Medusa server, run the following command to install the MinIO plugin:
```bash
npm install medusa-file-minio
```
Then configure your `medusa-config.js` to include the plugin alongside the required options:
Then, add the following environment variables in `.env`:
```=javascript
```bash
MINIO_ENDPOINT=<ENDPOINT>
MINIO_BUCKET=<BUCKET>
MINIO_ACCESS_KEY=<ACCESS_KEY>
MINIO_SECRET_KEY=<SECRET_KEY>
```
Where `<ENDPOINT>` is the URL of your MinIO server, `<BUCKET>` is the name of the bucket you created earlier, and `<ACCESS_KEY>` and `<SECRET_KEY>` are the keys you generated in the previous section.
Finally, configure your `medusa-config.js` to include the plugin with the required options:
```bash
{
resolve: `medusa-file-minio`,
options: {
endpoint: "minio.server.com",
bucket: "test",
access_key_id: "YOUR-ACCESS-KEY",
secret_access_key: "YOUR-SECRET-KEY",
endpoint: process.env.MINIO_ENDPOINT,
bucket: process.env.MINIO_BUCKET,
access_key_id: process.env.MINIO_ACCESS_KEY,
secret_access_key: process.env.MINIO_SECRET_KEY,
},
},
```
The two access keys in the options are the ones created in the previous section.
## Test it Out
:::tip
Run your Medusa server alongside the [Medusa Admin](../admin/quickstart.md) to try out your new file service. Upon editing or creating products, you can now upload thumbnails and images, that are stored in a MinIO server.
Make sure to use an environment variable for the secret key in a live environment.
![Image Uploaded on Admin](https://i.imgur.com/alabX2i.png)
:::
## Next.js Storefront Configuration
### Try it out
If youre using a [Next.js](../starters/nextjs-medusa-starter.md) storefront, you need to add an additional configuration that adds the MinIO domain name into the configured images domain names. This is because all URLs of product images will be from the MinIO server.
Finally, run your Medusa server alongside our admin system to try out your new file service. Upon editing or creating products, you can now upload thumbnails and images, that are stored in an MinIO server.
If this configuration is not added, youll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).
In `next.config.js` add the following option in the exported object:
```jsx
module.exports = {
//other options
images: {
domains: [
"127.0.0.1",
//any other domains...
],
},
}
```
Where `127.0.0.1` is the domain of your local MinIO server.
## Whats Next 🚀
- Check out [more plugins](https://github.com/medusajs/medusa/tree/master/packages) you can add to your store.
@@ -1,96 +0,0 @@
---
title: Creating your Medusa server
---
# Creating your Medusa server
## Introduction
With the required software installed on your computer, you are ready to start working on your first Medusa project.
In this part of the tutorial, we will setup the skeleton for a Medusa store and will be making the first requests to your Medusa server.
Once you have completed this part of the tutorial, you will have a powerful backend for digital commerce experiences. The server will be capable of handling orders, ensuring payments are going through, keeping basic product and customer data in sync, etc. You can use one of the frontend starters to quickly hook up your server to a presentation layer ([Gatsby](https://github.com/medusajs/gatsby-starter-medusa) or [Next](https://github.com/medusajs/nextjs-starter-medusa)).
## Setup a Medusa project
With Medusa CLI installed, it is very easy to setup a new Medusa project, with the `new` command. In your command line run:
```shell
medusa new my-medusa-server --seed
```
The command will do a number of things:
- build a new project in a folder called my-medusa-server
- install the dependencies through yarn or npm
- setup a new git environment for version controlling your project
- create a database in postgres with the name my-medusa-server
- the `--seed` flag indicates that the database should be populated with some test data after the project has been set up
If you navigate to the root folder of your new project, you will see the following files in your directory:
```
.
├── node_modules
├── src
│ ├── api
│ └── services
├── .babelrc
├── .gitignore
├── medusa-config.js
├── README.md
└── package.json
```
There is not a lot of files needed to get your Medusa store setup and this is all due to the fact that the main Medusa core (`@medusajs/medusa`) is installed as a dependency in your project, giving you all the fundamental needs for a digital commerce experience.
Much of Medusa's power lies in the `medusa-config.js` which is the file that configures your store and orchestrates the plugins that you wish to use together with your store. There are some different types of plugin categories such as payment plugins, notification plugins and fulfillment plugins, but plugins can contain any form of extension that enhances your store.
For customizations that are more particular to your project, you can extend your Medusa server by adding files in the `api` and `services` directories. More about customizing your server will follow in the following parts.
## Starting your Medusa server
:::note
For your server to run correctly you should configure your `COOKIE_SECRET` and `JWT_SECRET` environment variables by adding a `.env` file to the root of your Medusa project.
:::
After your project has been set up with `medusa new`, you can run the following commands to start your server:
```shell
cd my-medusa-server
medusa develop
```
If you ran the new command with the `--seed` flag, you will already have products available in your store. To view these, you can run the following command in your command line:
```shell
curl -X GET localhost:9000/store/products | python -m json.tool
```
## What's next?
At this point you are all set to start creating amazing digital commerce experiences. You can take a number of different routes from here and the next part of this tutorial will revolve around creating custom functionality within your Medusa project.
Other options you could take are:
### Add a frontend to your server
We have created two starters for you that can help you lay a foundation for your storefront. The starters work with your new server with minimal configuration, simply clone the starters from here:
- [Nextjs Starter](https://github.com/medusajs/nextjs-starter-medusa)
- [Gatsby Starter](https://github.com/medusajs/gatsby-starter-medusa)
### Browse the API reference
In the API reference docs, you can find all the available requests that are exposed by your new Medusa server. Interacting with the API is the first step to creating truly unique experiences.
### Setup Stripe as a payment provider (Guide coming soon)
One of the first things you may want to do when building out your store would be to add a payment provider. Your starter project comes with a dummy payment provider that simply fakes payments being processed. In the real world, you want a payment provider that can handle credit card information securely and make sure that funds are being transferred to your account. Stripe is one of the most popular payment providers and Medusa has an official plugin that you can easily install in your project.
## Summary
In this part of the tutorial, we have setup your first Medusa project using the `medusa new` command. You have now reached a key milestone as you are ready to start building your Medusa store; from here there are no limits to how you can use Medusa, as you can customize and extend the functionality of the core. In the next part of the tutorial, we will be exploring how you can add custom services and endpoints to fit your exact needs.
-5
View File
@@ -36,11 +36,6 @@ module.exports = {
id: "tutorial/set-up-your-development-environment",
label: "Set Up your Development Environment"
},
{
type: "doc",
id: "tutorial/creating-your-medusa-server",
label: "Create your Medusa Server"
},
{
type: "category",
collapsed: true,
+8 -1
View File
@@ -3,6 +3,7 @@ module.exports = {
title: "Medusa",
description: "Open-source headless commerce engine",
author: "Medusa core team",
siteUrl: "https://docs.medusajs.com/api"
},
plugins: [
`gatsby-plugin-react-helmet`,
@@ -65,6 +66,12 @@ module.exports = {
allowList: ["ALGOLIA_API_KEY"],
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: '/api/sitemap'
}
}
// `gatsby-plugin-preact`,
// {
// resolve: `gatsby-source-openapi-aggregate`,
@@ -73,7 +80,7 @@ module.exports = {
// {
// name: "admin-spec",
// resolve: () =>
// fromJson(
// fromJson(``
// path.resolve(__dirname, "../../docs/api/admin-spec3.json")
// ),
// },
+3 -2
View File
@@ -20,8 +20,9 @@ const createCustomNode = ({ name, node, createNode }) => {
let requestBodyValues = undefined
if (values.requestBody && values.requestBody.content) {
requestBodyValues =
values.requestBody.content["application/json"].schema
requestBodyValues = values.requestBody.content.hasOwnProperty("application/json") ?
values.requestBody.content["application/json"].schema :
values.requestBody.content["multipart/form-data"].schema
}
return {
+1
View File
@@ -28,6 +28,7 @@
"gatsby-plugin-env-variables": "^2.1.0",
"gatsby-plugin-preact": "^5.9.0",
"gatsby-plugin-react-helmet": "^3.3.12",
"gatsby-plugin-sitemap": "^5.15.0",
"gatsby-plugin-theme-ui": "^0.10.1",
"gatsby-remark-autolink-headers": "^4.6.0",
"gatsby-source-filesystem": "^3.9.0",
@@ -6,11 +6,16 @@ import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'
import { useColorMode } from 'theme-ui'
const isBrowser = typeof window !== "undefined"
export default function ColorModeToggler () {
const [, setColorMode] = useColorMode()
function checkLocalStorage (currentTheme, toggleTheme) {
//check that theme local storage values are set correctly
if (!isBrowser) {
return currentTheme;
}
let themeUiColorMode = window.localStorage.getItem('theme-ui-color-mode');
let theme = window.localStorage.getItem('theme')
if (!themeUiColorMode) {
+50 -1
View File
@@ -2225,6 +2225,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.34.tgz#fe4b38b3f07617c0fa31ae923fca9249641038f0"
integrity sha512-USUftMYpmuMzeWobskoPfzDi+vkpe0dvcOBRNOscFrGxVp4jomnRxWuVohgqBow2xyIPC0S3gjxV/5079jhmDg==
"@types/node@^17.0.5":
version "17.0.35"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.35.tgz#635b7586086d51fb40de0a2ec9d1014a5283ba4a"
integrity sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg==
"@types/node@^8.5.7":
version "8.10.66"
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.66.tgz#dd035d409df322acc83dff62a602f12a5783bbb3"
@@ -2276,6 +2281,13 @@
"@types/glob" "*"
"@types/node" "*"
"@types/sax@^1.2.1":
version "1.2.4"
resolved "https://registry.yarnpkg.com/@types/sax/-/sax-1.2.4.tgz#8221affa7f4f3cb21abd22f244cfabfa63e6a69e"
integrity sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==
dependencies:
"@types/node" "*"
"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -2717,6 +2729,11 @@ arg@^4.1.0:
resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
arg@^5.0.0:
version "5.0.1"
resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -3572,7 +3589,7 @@ commander@^7.2.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
common-tags@^1.8.0:
common-tags@^1.8.0, common-tags@^1.8.2:
version "1.8.2"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
@@ -5425,6 +5442,16 @@ gatsby-plugin-react-helmet@^3.3.12:
dependencies:
"@babel/runtime" "^7.12.5"
gatsby-plugin-sitemap@^5.15.0:
version "5.15.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-5.15.0.tgz#6035eb3a80de90dda3356deea083653e483fef5f"
integrity sha512-2G7ooRqwOHe3zItd2WoOVEbqnFBXaQSQ2whxug3LAJr7PbZa33kukRQQcjK6v5IO5HidWAFpP9t1a5LOIeDpCw==
dependencies:
"@babel/runtime" "^7.15.4"
common-tags "^1.8.2"
minimatch "^3.1.2"
sitemap "^7.0.0"
gatsby-plugin-theme-ui@^0.10.1:
version "0.10.1"
resolved "https://registry.yarnpkg.com/gatsby-plugin-theme-ui/-/gatsby-plugin-theme-ui-0.10.1.tgz#d1ac7f4f1c4bf187694110a8670f0bb3ff470ad2"
@@ -8250,6 +8277,13 @@ minimatch@3.0.4, minimatch@^3.0.4:
dependencies:
brace-expansion "^1.1.7"
minimatch@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
dependencies:
brace-expansion "^1.1.7"
minimist@^1.1.0, minimist@^1.2.0, minimist@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -10154,6 +10188,11 @@ sanitize-html@^1.27.5:
parse-srcset "^1.0.2"
postcss "^7.0.27"
sax@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
scheduler@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -10359,6 +10398,16 @@ sisteransi@^1.0.5:
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
sitemap@^7.0.0:
version "7.1.1"
resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-7.1.1.tgz#eeed9ad6d95499161a3eadc60f8c6dce4bea2bef"
integrity sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==
dependencies:
"@types/node" "^17.0.5"
"@types/sax" "^1.2.1"
arg "^5.0.0"
sax "^1.2.4"
slash@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"