次の設定.MedusaプロジェクトのためのJS Storefront

Medusa 当社のAPI第一エンジンを通してユニークでスケーラブルなデジタルコマースプロジェクトを構築するための基盤をエンジニアに与えている率直なオープンソース商業プラットフォームです.
ヘッドレスではない、我々のスターターはあなたのための良い基盤として分の問題でフロントエンドと結合する.
この記事では、すでにMedusaプロジェクトが作成され、あなたの次にリンクされる準備が整いました.jsスターター.

始める
開始するには、端末を開き、次のコマンドを使用して、ストレージのインスタンスを作成します.

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

今、私たちはMedusaサーバーで使用する準備ができているstorefront codebaseを持っています.
次に、我々のサーバーと話すために我々の新しい光る店頭を作る2つのステップを完了しなければなりませんSTORE_CORS 変数.
これらの2つにジャンプしましょう.

サーバーへのリンクの前線
この部分については、我々はclient.js Utilsフォルダで見つけるファイル.
我々はここで多くをする必要はありません、しかし、我々の倉庫正面がサーバーを走っているポートを指し示していることを確認するために

import Medusa from "@medusajs/medusa-js";

const BACKEND_URL = process.env.GATSBY_STORE_URL || "http://localhost:9000"; // <--- That is the line we are looking for

export const createClient = () => new Medusa({ baseUrl: BACKEND_URL });

デフォルトではMedusaサーバーはポート9000で動作していますので、変更しなかった場合は次のステップに進んでください.

更新STORE_CORS 変数
ここでMedusaサーバーとオープンに移動しましょうmedusa-config.js
を見つけましょうSTORE_CORS 変数と右のポート( Next . jsプロジェクトのデフォルトで3000であること)を確認します.

/* 
 * CORS to avoid issues when consuming Medusa from a client.
 * Should be pointing to the port where the storefront is running.
 */
const STORE_CORS = process.env.STORE_CORS || 'http://localhost:3000';

今、我々はMedusaサーバーと対話し、我々は、次の甘いと完全な電子商取引のセットアップを持っていると店頭があります.JSの店頭.

もっと学ぶ
あなたはMedusaの生態系の無限の可能性を発見したい場合はour docs page どのような素晴らしいコマースプロジェクトを構築することができます!
あなたが助けを必要とするか、Medusaを使う方法についての質問があるならば、我々に加わってくださいDiscord 我々のエンジニアリングチームに直接アクセスする.