blood-pressure

• Getting Started
  • Environment Configuration
  • Running
  • Building
  • Deploying
• Testing
• Linting
• Architecture
  • Structure
  • Routing
  • State Management
  • Syntax

A Vue app build from the Vue CLI for tracking and visualizing blood pressure readings over time. The app is powered by Firebase and available at blood-pressure-prod.web.app.

Authentication is handled through Firebase Auth and is open for your own usage. There is not any obfuscation of data happening, however, so if you're worried about prying eyes, maybe use a disposable email address service like Guerrilla Mail. Or see below for configuring to your own Firebase project.

Getting Started

npm install

Environment Configuration

The project will not run without first setting certain environment variables via the CLI or a .env file. This command runs ./scripts/build-env.js via Node to set environment variables to the app using dotenv.

npm run build:env

Required Environment Variables

Note: These environment variables currently match Firebase's app config object.

• apiKey: A Firebase project's API key
• authDomain: The Firebase project's authentication domain
• databaseURL: The Firebase project's database URL
• projectId: The Firebase project ID
• appId: Firebase web-based app ID
• measurementId: Associate the Firebase app with a Google Analytics property

Running

Note: Environment configuration is built before each serve command.

npm run serve

Building

Note: Environment configuration is built before each build command.

npm run build:app

Deploying

The app is configured for deployment to Firebase; its hosting, database, and user authentication is run through the platform.

Hosting

npm run deploy:hosting

Database

Firebase's Cloud Firestore is used for the database. Security rules are located at ./firestore.rules and are set to limit user access to owned data only.

npm run deploy:database

Testing

Unit tests and mocks are created with Jest and use Vue's Test Utils library for simplification.

npm run test:unit

To run a single suite:

npm run test:unit -- SUITE_NAME

VS Code Configuration

For debugging in VS Code, use the following configuration in launch.json:

{
  "type": "chrome",
  "request": "launch",
  "name": "vuejs: chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*"
  }
}

Linting

Linting follow Vue CLI's prescribed rules as well as Prettier with a touch of personal customizations on top.

npm run lint

Architecture

Structure

Components in src/views should be associated with routes and lean towards being "smart". Data fetching and setup happens in these components, but display elements should be implemented as "dumb" components that are passed down data through props.

"Dumb" components should be defined in src/components or as children of feature modules.

The src/core directory should contain application business logic.

Routing

Routing is implemented with Vue's official Router and is configured at ./src/router/index.ts. The state's mutation and action types are located at ./src/router/types.ts.

State Management

State is managed using Vuex and is set up at ./src/store/index.ts. Vuex is a bit of overkill for this app, but it was interesting to compare to Angular's NGRX.

Syntax

The app is built with TypeScript and classes using vue-class-component and vue-property-decorator. The intent was compare against Angular's style of component architecture.

Looking back, it might make more sense to stick to the object-based format that the Vue docs lead with. This approach involved a steeper, less-documented learning curve.