vttrpg-game-ui

vttrpg-ui

Tech Stack

• Frontend: This project uses TypeScript + Vue + Sass + Vite as main frontend technologies, and
• Firebase services for the backend. (Realtime Database, Authentication, and Hosting)
• CI is done with GitHub Actions, and
• Testing with Vitest + Vue Test Utils (unit) and Cypress (end-to-end).

Recommended IDE Setup

VSCode with extensions:

• vue (jcbuisson.vue)
• Vetur (octref.vetur)
• Auto Close Tag (formulahendry.auto-close-tag)
• ESLint (dbaeumer.vscode-eslint)
• Sass (syler.sass-indented)

Project Setup

Follow the steps below once.

• Install Node.js if not already installed

• Install dependencies

   npm install
  

• Install Java if not already installed

   sudo apt-get update
   sudo apt-get install openjdk-17-jre
  

• Create a .env file with necessary environment variables. Use .env.example as a template, filling the necessary info.

• Create a .firebaserc file

   source .env
   echo "{\"projects\": {\"default\": \"${FIREBASE_PROJECT_ID}\"}}" > .firebaserc
  

• Login into firebase

   npx firebase login
  

Build for Production

npm run build

The build will be generated at /dist.

Serve app for development

Run npm start to build and serve the app in a similar environment to production. (uses Firebase Emulator Suite to simulate firebase services)

The first time you start the project, the database will be empty, so you have to populate the /config branch of the database manually. Check the rules files to understand the structure of /config. This is the only object in the database that is expected to be filled manually. For the rest of the database, the application can populate everything else on its own while the user interacts with it.

Run POST /api/config/setup http function to populate it with default values. For example: (on local environment)

curl -X POST http://127.0.0.1:5001/vttrpg-db43b/us-central1/api/config/setup

Check firebase emulator logs for the correct base url if the example above doesn't work.

Watching for Changes

Vite. (frontend code) Start Vite with npm run serve:vite in a separate terminal to serve the app with hot-reload for a better development experience.

Firebase Functions. (backend code) Firebase functions (directory src/firebase-functions) are triggered when certain events occur in the database. The build command in the Project Setup section above should compile the ts into js, but when editing the ts it is convenient to setup a "watch" so that the files are automatically build. To do that, run cd src/firebase-functions && npm run build:watch.

Firewood. (realtime-database rules) The project uses Firewood to build the firebase rules file. To setup a watch to automatically build it while you edit, run npm run build:rules:watch.

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing

Lint with ESLint

npm run lint

Deploy

The project will be automatically deployed by GitHub Actions when a stable tag is pushed to the repository. To manually deploy a non-stable version, run:

npm run deploy