Getting Started

Quick Start

npx create-audius-app
cd my-app
npm run dev

---

Creating an App

The easiest way to start building a new application on top of the Audius Protocol is by using create-audius-app. This CLI tool enables you to quickly start building a new Audius application, with everything set up for you. You can create a new app using the default Audius react template, or by using one of the examples.

Minimum Node Version

You’ll need to have Node >= 18 on your local development machine. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app run the following command:

npx create-react-app

You will be asked for the name of your project, and all the necessary dependencies will be installed.

Non Interactive Mode

To bypass the prompt for an app name, append it to the create command like this:

npx create-react-app my-first-audius-app

Explore other command line options by running npx create-audius-app --help

Output

Running create-audius-app will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── gitignore
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   ├── emotion.d.ts
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder:

cd my-app

Launch Your App

Once inside the my-app directory run the following command and take note of the local host port:

npm run dev

This example uses port 5173 on localhost.

---

Design

Applications started from create-audius-app leverage the Harmony design system.

Harmony is all about collaboration, reusability, and scalability. It aims to harmonize code and Figma, provides a shared language for designers and developers, and provide consistent, reusable components for use across platforms.

Read more about Harmony and using it across your other projects at https://harmony.audius.co/.