Creating a Mint Page for Testing

This page teaches you to set up a test mint page by running your backend and frontend locally.

🖥 Mint UI Page

[CLI] Preparation step

Run the following commands in the Minting Folder on the CLI page. You are creating a ‘mintpage’ folder within the Minting Folder.

mkdir mintpage

cd mintpage

git clone https://github.com/Archetype-Co/odyssey_UI

[CLI] Setting up back end

1. While in the mintpage folder on the CLI, input in the following commands. The following folders have been automatically created and cloned for you using the github link above.

cd odyssey_UI

cd backend

npm install

1. [IMPORTANT] Copy the assets folder, arweave json and config.json into this folder (From CLI folder). Your backend folder should look like this.

1. [CLI] Run the following command.

node server.js

[CLI] Setting up front end

1. Open up a new Terminal / Command Prompt window.

Navigate to Minting Folder using the CLI. Input in the following commands.

cd mintpage

cd odyssey_UI

cd frontend

npm install

1. Create .env file in the frontend folder.

For Windows users, you can copy from .env.testnet in the same folder and rename it to .env

For Mac users, input in the following code.

nano .env

An empty .env file will appear in the CLI interface. Input in the following:

REACT_APP_API_BASE_URL = <server URL> (eg. http://localhost:3001)
REACT_APP_APTOS_NETWORK = mainnet/testnet/randomnet

For REACT_APP_API_BASE_URL, please input in your server URL.

For REACT_APP_APTOS_NETWORK, please input in the environment you are working on (eg. testnet if you are on testnet).

Your CLI interface should look something like this.

1. Once the .env file is setup correctly, save and exit the .env file.

1. Run the following command.

npm start

1. Web browser will open up on http://localhost:3000/

Setup Completed

---