Setting up

This section guides you through the steps required to set up your computer for developing CATcher.

Getting started

Prerequisites:

  • Node.js 14 -- (run node -v in your OS terminal to check the version of Node on your computer)

Recommended:

  • IDE: Visual Studio Code

Steps:

  1. Fork this repository into your Github account.
  2. Clone the forked repository into your computer.
  3. Install dependencies with npm: Run npm install
    • a list of warnings on outdated dependencies is to be expected and no action needs to be taken before proceeding.
  4. Compile and start the application in browser: Run npm run ng:serve:web.

Dev commands

Given below are different commands you can use to run the app locally.

Command Description
npm run ng:serve:web Start the app from the browser in development mode.

Debugging

If you are using Visual Studio Code to debug CATcher with Chrome, Firefox or Edge. Refer to the Debugging Angular section of this guide for a step-by-step walkthrough of the debugger setup.

In summary, the following steps are needed:

  1. Install the Debugger for Chrome extension for VS Code. You can also install debugger extensions for Firefox and Edge.
  2. Create VS Code's debugger config file (launch.json ) as shown in the guide. Particularly, set the url attribute to http://localhost:4200 (reason: CATcher app is served locally on port 4200, by default.)
  3. In the root project folder, run npm run ng:serve:web.
  4. In VS Code's Debug View, launch the debugger by clicking the green arrow (or F5). You should see the CATcher app loading within a new browser window.

Writing Documentation

CATcher documentation is hosted in a separate repo CATcher-org/catcher-org.github.io. When you need to update documentation, you'll need to fork and clone that repo to your computer as well.

We use MarkBind for documentation. Follow this tutorial to learn how to use MarkBind for updating project documentation.


Tasks To Self-Test Knowledge

These tasks assume a basic understanding of Angular and TypeScript. If you wish to know more about them, you can visit our tools page.

Backend

Task 1: Add new label


Task 2: Delete labels that are not in use


Frontend

Task 1: Make error snack bars automatically close