Deploying Odyssey on your website

Congratulations! You have successfully created Odyssey and generated your config.json file. This page teaches you to deploy Odyssey on your own mint website.

Overall Steps

1. Setting up the backend

2. Implementing the /api/get-mint-txn API endpoint in the backend

3. Implementing the mint function on the frontend

🔧 Setting up the backend

We suggest using Node.js to set up the backend and run Odyssey on a private, secure server.

Option 1: Local Deployment

To set up the backend locally:

Step 1: Ensure Node.js is installed on your machine

Step 2: In your terminal:

# Clone the Odyssey UI repo
git clone https://github.com/Archetype-Co/odyssey_UI.git

# Navigate to the backend folder (or set up your own backend)
cd odyssey_UI/backend

# Install dependencies
npm install

# Run the backend server
npm start

Step 3: This will start your backend at http://localhost:5000 (or whichever port you define).

Option 2: Application Platform Providers (Vercel, Heroku, Netlify)

Step 1: Push Your Code to GitHub

Create a repository on GitHub and push your code onto GitHub.

Step 2: Import Your GitHub repository into your selected provider.

⚠️ Remember: Vercel has storage limitations. If your assets are large (over 1GB total), consider Option 2 instead.

Continue following from Set up your .env file in the below section.

Option 3: Infrastructure Cloud Providers (AWS, Google Cloud, Azure)

If you're using cloud services like AWS EC2, Google Cloud, or Render, follow these general steps:

Step 1: Launch a server (e.g., EC2 instance with Ubuntu)

Step 2: SSH into your server

Step 3: Install Node.js and Git

Step 4: Clone your backend repo, install dependencies, and run it as a service using something like PM2.

Continue following from Set up your .env file in the below section.

📖Set up your .env file

In your frontend project (usually inside the src/ root), create a .env file and add:

REACT_APP_API_BASE_URL = https://api.yourproject.com
REACT_APP_APTOS_NETWORK = mainnet

For REACT_APP_API_BASE_URL, please input in the backend server URL where your backend is hosted as shown above.

If you're using external cloud solutions (AWS / Google Cloud etc.), replace the API URL with your actual domain or public IP.

🛠️ Implement the /api/get-mint-txn API endpoint in the backend

Note: The examples shown below are referencing functions in our test mintpage https://github.com/Archetype-Co/odyssey_UI

Odyssey has a default API endpoint setup that you could utilise for the frontend mint button to interact with. This endpoint should live in your Node.js backend and be accessible by your frontend.

Here is an example:

app.get(
  "/api/get-mint-txn/:address/:mintQty",
  async ({ params: { address, mintQty } }, res) => {
    try {
      let token_uri = base_token_uri || "";
      if (reveal_required && !base_token_uri) {
        try {
          token_uri = await odysseyClient.uploadNFT(0, asset_dir, keyfilePath);
        } catch (error) {
          console.error(ERR_READING_MINT, error.message);
          return res.status(500).json({ error: ERR_INTERNAL_SERVER_ERROR });
        }
      }
      if (!base_token_uri && token_uri != "") {
        odysseyClient.writeConfigFile({ base_token_uri: token_uri });
        base_token_uri = token_uri;
      }

      const payloads = await odysseyClient.getMintToPayloads(
        address,
        resource_account,
        mintQty,
        network,
        token_uri
      );

      res.json({ payloads: payloads || "" });
    } catch (error) {
      console.error(ERR_READING_MINT, error.message);
      res.status(500).json({ error: ERR_INTERNAL_SERVER_ERROR });
    }
  }
);

💻 Implement the mint function on the frontend

To enable users to mint NFTs directly from your frontend, you'll need to set up a mint button that interacts with the /api/get-mint-txn API endpoint and allows the user to sign the transaction with their Aptos wallet.

Implement the handleMint Function

The handleMint function is responsible for:

• Requesting a prebuilt transaction payload from your backend

• Using the connected wallet to sign and submit the transaction

• Optionally, waiting for on-chain confirmation

Here is an example:

  const handleMint = async () => {
    if (!odyssey || loading) return; // Check if odyssey is null or if already loading, return
    try {
      setLoading(true); // Set loading to true when minting starts
      const response = await fetch(
        `${baseUrl}/api/get-mint-txn/${account?.address}/${mintQty}`
      );
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await response.json();
      const response2 = await signAndSubmitTransaction(data.payloads);
      //Wait for transaction
      const mintedTransactions = await aptos.waitForTransaction({
        transactionHash: response2.hash,
      });

Add a Mint Button Component

Include a button in your UI that triggers the function.

Below is an example using a simple button from a UI library (e.g., Ant Design)

<Button onClick={handleMint} disabled={loading}>
  {loading ? <Spin /> : "Mint"}
</Button>

End of page

---