Osmosis Web Interface

Development

Our frontend (opens new window) is built with the following tools:

• TypeScript (opens new window): type checking
• React (opens new window): ui
• Tailwind CSS (opens new window): styling, theming
• Next.js (opens new window): scaffolding/SSR/CDN/SEO
  • We deploy on Vercel (opens new window) for optimization (CDN, regions)
• lerna (opens new window): code organization; mono-repo management and libs release

Deployment

Start web server

yarn && yarn build && yarn start

Contributing

We welcome and encourage contributions! We recommend looking for issues labeled with "good-first-issue" (opens new window).

Make sure node (opens new window) >= 16 and yarn (opens new window) is installed.

1. Install deps

yarn

2. Build app

yarn build

3. Run local server at localhost:3000

yarn dev

Frontier

To reduce duplicated effort, master branch is used to deploy the frontier app as well. The frontier deployment has NEXT_PUBLIC_IS_FRONTIER env var set to true. If making updates to frontier, please target the master branch. Frontier assets are configured in packages/web/config/ibc-assets.ts.

Develop

To develop with frontier configuration, use:

yarn build:frontier && yarn dev:frontier

Deploy

To deploy frontier (the env var will be set for you):

yarn build:frontier && yarn start:frontier

Otherwise the non-frontier commands can be used with the env var set to true.