Webaudio Spectrum Analyser

Requirements

In order to run own copy of the project one must fulfill the following requirements.

Mandatory

• Node.js
• NPM
• Yarn
• Emscripten
• Git

Optional

Android

• Android SDK

Tools

• GCC
• Make
• libavcodec, libavformat, libavfilter, libavutil
• pthreads

Preferred package manager

• Yarn is a preferred package manager for dependencies installation in the project root.
• npm is a preferred package manager for dependencies installation in the functions folder if any.

Package scripts reference

The project has lots of package scripts, check it in the package.json located in the project root, or use the following command (see terminal output for usage tips)

yarn workspace:help

Committing changes to repo

Using commitizen cli is mandatory, reference.

Provided all dependencies are installed, and this requirements are fulfilled cz-cli#conventional-commit-messages-as-a-global-utility the following command must be used when doing a commit

git cz

Installation

yarn install

Updating

yarn workspace:update:check

yarn workspace:update:migrate

Building

Web

ng build

ng build --prod

Android

cat >tools/shell/vars.sh <<EOF
export JAVA_HOME=[PATH_TO_JAVA]
export ANDROID_HOME=[PATH_TO_ANDROID_SDK]
export ANDROID_BUILD_TOOLS=[PATH_TO_ANDROID_BUILD_TOOLS]

ANDROID_KEYSTORE=[PATH_TO_KEYSTORE]
ANDROID_KEYSTORE_ALIAS=[KEY_ALIAS]
ANDROID_KEYSTORE_PASSWORD=[KEYSTORE_PASSWORD]
EOF

./tools/shell/build-android

adb install -r android/build/release-signed.apk

Tools

First of all init submodules if you haven't yet

git submodule update --init --recursive

TODO: update instruction on working with submodules

make -C tools/audio

Testing

Unit

yarn test
yarn test:coverage

yarn e2e

Server

yarn start

Linting

This will check ts sources, html templates, and scss stylesheets.

yarn lint
yarn lint:fix

Only TS

yarn nx:lint
yarn nx:lint:fix

Only HTML

yarn prettier:all:html
yarn prettier:all:html:fix

Only SCSS

yarn stylelint:all
yarn stylelint:all:fix

Analyze bundle

Webpack bundle analyzer is used for application bundles analysis.

yarn analyze:webaudio-spectrum-analyser

General Tooling

This project was generated using Nx.

🔎 Nx is a set of Angular CLI power-ups for modern development.

Quick Start & Documentation

• Nx Documentation
• 30-minute video showing all Nx features
• Interactive Tutorial

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, .etc as well as the devtools to test, and build projects as well.

Below are some plugins which you can add to your workspace:

Application type	Command
Angular	ng add @nrwl/angular
React	ng add @nrwl/react
Web (no framework frontends)	ng add @nrwl/web
Nest	ng add @nrwl/nest
Express	ng add @nrwl/express
Node	ng add @nrwl/node
Storybook	ng add @nrwl/storybook

Generating an application

To generate an application run:

ng g @nrwl/angular:app my-app

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generating a library

To generate a library run:

ng g @nrwl/angular:lib my-lib

You can also use any of the plugins above to generate libraries as well.

Libraries are sharable across libraries and applications.

It can be imported from @nx-ng-starter/mylib.

Running a development server

To start a dev server run:

ng serve my-app

Navigate to http://localhost:4200/.

The app will automatically reload if you change any of the source files.

Code scaffolding

To generate a new component run:

ng g component my-component --project=my-app

Building applications

To build the project run:

ng build my-app

The build artifacts will be stored in the dist/ directory.

Use the --prod flag for a production build.

Unit testing with Jest

To execute the unit tests run:

ng test my-app

To execute the unit tests affected by a change run:

npm run affected:test

End-to-end testing with Cypress

To execute the end-to-end tests run:

ng e2e my-app

To execute the end-to-end tests affected by a change run:

npm run affected:e2e

Understanding your workspace

To see a diagram of the dependencies of your projects run:

npm run dep-graph

Generating a storybook for a feature or ui library

npx nx g @nrwl/angular:storybook-configuration project-name

Further help

Visit the Nx Documentation to learn more.

Licenses

• webaudio-spectrum-analyser