Development

Before you can start development, make sure to follow the Getting Started guide and the Deployment guide (you can skip all optional steps in the deployment guide). These prerequisite steps are necessary since you need a Firebase project to interact with while doing local development.

Web App

If all of the prerequisite steps have been completed, it's as easy as running a single command.

# in app/
npm run dev:web

This starts the snowpack dev command which includes React HMR.

Mobile App

Similar to development of the web app, if you get want to run the mobile app in a web browser, it's as simple as running the dev:mobile command.

# in app/
npm run dev:mobile

What is the difference between dev:web and dev:mobile you may ask? Simple. When running dev:mobile, we set SNOWPACK_PUBLIC_MOBILE to 1. Based on whether this flag is set, we render and change the logic of the app. Additionally, we have a custom Capacitor plugin in the native-audio folder which plays audio, shows song metadata and manages hardware buttons. This plugin supports web, iOS and Android environments. If you are new to Capacitor or are unsure how Capacitor plugins work under the hood, definitely check out the plugin documentation.

What about running the apps on iOS or Android devices or emulators? First, update app/capacitor.dev.json with the correct URL (find your private computer IP address). Next, simply open the ios or android folders in Xcode or Android Studio respectively depending on which platform you'd like to develop. Next, with the dev:mobile command running, run the app like a normal mobile app. The web portion will actually hot reload like it would in a web browser!