Whiteboard app

Frontend for our whiteboard.

Project Setup

For now we only support running this project under Linux operating system.

Environment setup

First install and run the server: https://github.com/WizzWriters/spelldraw-server.

Because we are using TensorFlow.js which requires specific version of Tensorflow and python, there are some additional steps needed first.

1. Create and activate virtual environment

virtualenv venv
. venv/bin/activate

2. Install python dependencies

pip install -r requirements.txt

3. Run script to download and build tensorflow models

./tools/build-models

4. Install node dependencies

npm ci

From now on you can run the project. For example with npm run dev.

NPM Scripts

Compile and Hot-Reload for Development

npm run dev

Sometimes it's useful to expose the project in local network (for example to test it on mobile). In that case run:

npm run dev-expose

and enter the 'Network' addres on any device.

Type-Check, Compile and Minify for Production

npm run build

To perform only type checking you can run:

npm run type-check

Lint with ESLint

To validate:

npm run lint-check

To run lint and fix:

npm run lint

Format

To format:

npm run format

To check formating:

npm run format-check

Please run format, lint and type checks before each commit.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

(WSL Users! - this is required!) If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.