Metaplex

Metaplex Storefront Guide

This guide will walk you through creating and deploying a storefront using the Metaplex platform.

Prerequisites

Before starting, ensure you have:

• A basic understanding of React concepts such as hooks. Refer to the React documentation here.

• A wallet containing tokens to perform your transactions.

• Familiarity with the different packages and their purposes (helpful but not required).

Getting Started

Setting Up the Store ID

To create a store, you first need to derive the store ID using your public wallet address. The Metaplex developers have provided an environment variable for this purpose: REACT_APP_STORE_OWNER_ADDRESS_ADDRESS.

Steps:

1. Create a .env file in packages/web.

2. Set REACT_APP_STORE_OWNER_ADDRESS_ADDRESS to your wallet's public address.

Example:

bashCopy codeREACT_APP_STORE_OWNER_ADDRESS_ADDRESS=YOUR_PUBLIC_WALLET_ADDRESS

Creating Your Store

After setting up your store ID, you can create your store using Metaplex's helper methods.

Steps:

1. Use the saveAdmin method located at packages/web/src/actions/saveAdmin.

2. You can create a script or a button in your UI to call this method.

Example:

jsCopy codesaveAdmin(connection, wallet, false, [])

For a button in your UI:

jsCopy code// Hooks to insert at the top of the component
const { wallet } = useWallet();
const connection = useConnection();

// The button
<Button onClick={async () => {
        try {
          await saveAdmin(connection, wallet, false, [])
        } catch (e) {
          console.error(e);
        }
}}>CREATE STORE</Button>

Note: Confirm your transactions after clicking the button. Do not navigate away from the page during this process.

Adding Your Information

After creating your store, update your store's information by editing the userNames.json file located at packages/web/src/config/userNames.json. Follow the format used by other objects in this file.

Accessing the Admin Panel

Once your store is set up, you can access the admin panel at YOUR_URL/#/admin. Here, you can manage your store, add whitelisted creators, or make your store public. Ensure you save your changes after editing.

---

Deploying Your Store

Deploying to GitHub Pages

Step 1: Specify Your Repository

In the js/packages/web/package.json file, update the following lines:

jsonCopy code"deploy:gh": "yarn export && gh-pages -d ../../build/web --repo https://github.com/metaplex-foundation/metaplex -t true",
"deploy": "cross-env ASSET_PREFIX=/metaplex/ yarn build && yarn deploy:gh",

Replace https://github.com/metaplex-foundation/metaplex with your repository URL, and set ASSET_PREFIX to your repository name.

Example:

jsonCopy code"deploy:gh": "yarn export && gh-pages -d ../../build/web --repo https://github.com/my-name/my-metaplex -t true",
"deploy": "cross-env ASSET_PREFIX=/my-metaplex/ yarn build && yarn deploy:gh",

Step 2: Deploy

Navigate to the js/packages/web directory and run the following command:

bashCopy codeyarn deploy

Note: If you have 2FA enabled, you'll need to use a personal access token as your password. Follow this guide for more details.

Deploying with a Custom Domain

If using a custom domain, remove the ASSET_PREFIX from the deploy script:

jsonCopy code"deploy:gh": "yarn export -d ../../build/web --repo https://github.com/my-name/my-metaplex -t true"
"deploy": "yarn build && yarn deploy:gh",

Deploy using the same commands as above.

Deploying to Vercel

To deploy your store to Vercel:

1. Visit Vercel and create a new project linked to your GitHub repo.

2. Create a pages/ directory under js.

3. Configure the project with the following settings:

   • Framework: Next.js

   • Root directory: js

   • Output directory: packages/web/.next

4. Add REACT_APP_STORE_OWNER_ADDRESS_ADDRESS in the Environment Variables section.

Deploying to Google Cloud Run

To deploy through Google Cloud Run:

Step 1: Prepare Your Docker Container

1. In the Dockerfile, set ENV REACT_APP_STORE_OWNER_ADDRESS_ADDRESS="" to your wallet address.

2. In js/packages/web/.env.production, set REACT_APP_STORE_OWNER_ADDRESS_ADDRESS to your wallet address.

3. Build your Docker image using:

   bashCopy codedocker build . -t your-image-name

4. Upload your image using gcloud cli. Refer to this guide.

Step 2: Create Cloud Run Services

1. Visit Cloud Run and create a new service.

2. Set up your service name (e.g., my nft store) and choose your uploaded image.

3. In the advanced settings, add the following environment variable:

   • Name: NODE_ENV

   • Value: production

Step 3: Set Up Your Domain

1. Visit the "Manage Custom Domain" section in Cloud Run.

2. Set up your domain and bind it to the service.

---