Setting up development environment

Initial setup

We'll assume that you use Visual Studio Code. If you don't, then please make sure your editor is configured to format code in the same way as the setup below. Then, we'll initialize Firebase emulators to be used for our development environment.

Setting up VS Code

To maintain standard formatting, please install a few extensions and configure a few settings:

1. Install eslint globally from the command line npm install -g eslint
2. In VS Code, install these extensions: ESLint, Prettier, Vetur. Other optional but helpful extensions are: Auto Close Tag, Bracket Pair Colorizer, Debugger for Chrome, Firebase, GitLens, Sorting HTML and Jade attributes, TODO Highlight, Vue Peek.
3. Open VS Code settings: press ctrl+shift+p then select Preferences: Open Settings (JSON).
4. Add the following properties if they're missing in your settings.json file:

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {"source.fixAll.eslint": true},
  "eslint.validate": ["javascript"],

  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",

  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

Initialize Firebase emulators

Prerequisite: Please go through Setting up your instance first, because a Firebase project is needed before we can initialize emulators.

Before running in development mode (and for running tests) on localhost, we'll need to initialize Firebase emulators first:

firebase init emulators

You'll be asked for:

• You are initializing in an existing Firebase project directory. Are you ready to proceed: Yes
• Emulators to set up: Authentication, Firestore, Hosting
• Ports: Use default ports
• Emulator UI: Enable and use any available port
• Download the emulators now: Yes

Getting ready to develop

Start the app in development mode (hot-code reloading, error reporting, etc.)

For development, it's easier to serve from localhost rather than deploying to firebase.

On one terminal:

firebase emulators:start --import=initial-firestore-emulator-data --export-on-exit=my-firestore-emulator-data

The above command will import initial data into Firestore emulator, and export it to a different directory when the emulator exits, preserving your changed data in the new directory. So if you wish to import your changed data, use this command to start the emulaters next time:

firebase emulators:start --import=my-firestore-emulator-data --export-on-exit

When the emulator exits, it will export data back to the my-firestore-emulator-data directory.

With the Firebase emulators started, we can start (1) a unit test watcher, and (2) a development instance.

On a second terminal:

quasar dev -m pwa

Your browser should open a new page pointing to https://localhost:8080/. But since the SSL certificate on dev is auto-generated, you should see a privacy warning in your browser. If you're using Chrome, just click on Advanced then Proceed to localhost (unsafe) or go to chrome://flags/#allow-insecure-localhost to enable the option.

On a third terminal:

yarn test:unit:watch

That's it! When you modify source code, the localhost website will automatically update with the changes you make, and relevant unit tests will automatically run.