> For the complete documentation index, see [llms.txt](https://8bit-1.gitbook.io/solibrary/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://8bit-1.gitbook.io/solibrary/metaplex.md).

# 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.

***