- Node.js version 18 and
pnpm
installed on your system
For deploying with Vercel, create an account with Vercel if you don't have one already.
For deploying to IPFS, choose one of the following:
- Option 1: A free web3.storage account
- Option 2: An IPFS client such as IPFS Kubo
For web3.storage, sign up for an account and generate an API token on the API tokens page. web3.storage offers an easy-to-use interface for storing and retrieving content on IPFS.
Alternatively, follow the IPFS Kubo installation guide to download the IPFS command-line tool.
Clone the repository and navigate to its directory:
git clone https://github.com/dydxprotocol/v4-web.git
cd v4-web
Install pnpm and the project dependencies:
npm i -g pnpm
pnpm i
Run the following command in the project directory to start the development server:
pnpm dev
The development server will be running at http://localhost:5173
(or the port number displayed in the terminal). Visit this URL to interact with the web app and see your changes in real-time.
To view component stories:
pnpm ladle
This will automatically open your default browser at http://localhost:61000
.
Select "Import Git Repository" from your dashboard, and provide the URL of this repository or your forked repository.
For the "Build & Development Settings", we recommend the following:
- Framework Preset:
Vite
- Build Command (override):
pnpm run build
If you wish to incorporate analytics via Amplitude and Bugsnag, you can use our scripts:
pnpm run build:inject-amplitude
and pnpm run build:inject-bugsnag
. You will need to provide your own API keys for these services. In the Environment Variables section, name the variables as AMPLITUDE_API_KEY
and BUGSNAG_API_KEY
and provide the respective keys as their values.
For more details, check out Vercel's official documentation.
Export the API token as an environment variable (replace your_token
with the generated token), and run the script to build and deploy to IPFS:
export WEB3_STORAGE_TOKEN=your_token
pnpm run deploy:ipfs
Save the URL provided in the output, as it is the link to your deployed content on IPFS.
To use the IPFS command-line tool, run:
ipfs add -r dist
Save the CID provided in the output.
To access your content on IPFS:
-
Native IPFS support in a browser: Use a browser with native IPFS support, such as Brave or Opera. Enable a local IPFS node and visit the URL directly using the IPNS protocol, like
ipfs://your_cid
. -
Public IPFS gateway: Access your content via a public IPFS gateway, such as https://dweb.link or https://w3s.link/. Use the gateway URL with your CID appended, like
https://dweb.link/ipfs/your_cid
.
Replace your_cid
with the actual CID.