# 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](https://reactjs.org/docs/getting-started.html).
* 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:

```bash
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:

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

For a button in your UI:

```js
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:

```json
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:

```json
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:

```bash
bashCopy codeyarn deploy
```

> **Note:** If you have 2FA enabled, you'll need to use a personal access token as your password. Follow [this guide](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token) for more details.

#### Deploying with a Custom Domain

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

```json
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](https://vercel.com/) 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:

   ```bash
   bashCopy codedocker build . -t your-image-name
   ```
4. Upload your image using `gcloud cli`. Refer to [this guide](https://cloud.google.com/container-registry/docs/pushing-and-pulling).

#### Step 2: Create Cloud Run Services

1. Visit [Cloud Run](https://console.cloud.google.com/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.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://8bit-1.gitbook.io/solibrary/metaplex.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.