Skip to content

Development Machine Setup

Jump to bottom
saibannur-cgi edited this page Dec 16, 2025 · 1 revision

Development Setup

This page explains how to set up a local development environment for CCOF.

Table of Contents

  1. Tech Stack
  2. Development Tools
  3. VS Code Setup
  4. Repository Setup
  5. Running the Application Locally

Tech Stack

Frontend

  • Vue.js – JavaScript framework for building user interfaces
  • Vite – Fast frontend build and development tool
  • Vuetify – Material Design component framework for Vue

Backend

  • Node.js – JavaScript runtime environment
  • Express – Minimal and flexible web application framework
  • Redis – In-memory data store used for caching and fast lookups

Development Tools

Browsers & Extensions

  • Google Chrome – Primary development and debugging browser
  • Vue DevTools – Browser extension for inspecting and debugging Vue applications

API & Database Tools

  • Postman – Tool for testing and debugging APIs
  • RedisInsight – GUI client for managing and inspecting Redis data

💡 Tip: Using the recommended tools will make debugging and local development significantly easier, but they are not strictly required.

VS Code Setup

This section will provide you with a quick guide about how to setup VS Code for this project. It will give you an overview of the required (and optional) extensions, VS Code settings, and repository setup.

1. Install Visual Studio Code

Install Visual Studio Code from here.

2. Required Extensions

Install the following VS Code extensions:

  • Auto Import
  • ESLint
  • Prettier – Code formatter
  • Vue Language Features (Volar)
  • sort-imports

Optional (Recommended):

  • vscode-icons
  • One Dark Pro

⚠️Important: For the sort-imports extension, ensure that the following settings are configured for both User and Workspace:

image

3. VS Code Settings

Configure the following settings:

Default Formatter

Set Prettier – Code formatter as the default formatter:

  1. Open Settings
    • Ctrl + , (Windows/Linux)
  2. Search for Default Formatter
  3. Set Editor: Default Formatter to Prettier – Code formatter

Default Formatter Setting

Format on Save

Enable automatic formatting when saving files:

  1. Open Settings
    • Ctrl + , (Windows/Linux)
  2. Search for Format On Save
  3. Enable Editor: Format On Save

Format on Save Setting

Repository Setup

This guide will help you set up the EDUC-CCOF repository and run the application locally.

1. Clone the Repository

If you haven’t already cloned the repository, run:

git clone https://github.com/bcgov/EDUC-CCOF.git

2. Local Configuration File

  • Retrieve the local.json file from another developer on the team (e.g., Wes, Viet).
  • Place the file in the following location:
backend/src/config/local.json

⚠️ Important: This file is gitignored. Do not commit renamed or relocated versions of this file.

3. Open the Project in VS Code

  • Launch VS Code.
  • Navigate to File -> Open Folder... -> EDUC-CCOF

Running the Application Locally

Frontend

  • Open a terminal in VS Code (Ctrl + Shift + `) within the project directory.
  • Run the following commands:
cd frontend
npm install
npm run serve

The frontend application will start and be accessible at:

http://localhost:8082

Backend

  • Open a second terminal in VS Code.
  • Run the following commands:
cd backend
npm install
npm run serve

The backend server will be available at:

http://localhost:8080

Clone this wiki locally