Environment Setup

This guide provides step-by-step instructions for setting up the development environment for the Digibit ERP system.

Prerequisites

Before you begin, ensure you have the following installed on your system:

Required Software

  • Node.js (v18 or higher)
  • npm (v8 or higher) or yarn
  • Angular CLI (v18 or higher)
  • Git
  • IDE/Text Editor (VS Code recommended)

Optional Software

  • Docker (for containerized development)
  • PostgreSQL Client (for direct database access)
  • Supabase CLI (for local Supabase development)

Installation Steps

1. Clone the Repository

git clone <repository-url>
cd digibit

2. Install Dependencies

npm install

This will install all the necessary packages listed in package.json.

3. Environment Configuration

Create a .env file in the root directory with the following variables:

SUPABASE_URL=your_supabase_project_url
SUPABASE_ANON_KEY=your_supabase_anon_key
BACKEND_URL=your_backend_api_url

Alternatively, you can configure these in the environment.ts file located at src/environments/environment.ts.

4. IDE Configuration

VS Code Settings

Install the following extensions for optimal development experience: - Angular Language Service - TypeScript Importer - Prettier - Code formatter - ESLint - GitLens - Path Intellisense

Create a .vscode/settings.json file with recommended settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "files.exclude": {
    "**/node_modules": true
  }
}

Development Server

Starting the Development Server

ng serve

The application will be accessible at http://localhost:4200/.

Development Server Options

  • ng serve --port 4201: Use a different port
  • ng serve --open: Automatically open the browser
  • ng serve --host 0.0.0.0: Listen on all interfaces
  • ng serve --ssl: Serve using HTTPS

Building the Application

Development Build

ng build

Production Build

ng build --configuration production

Watch Mode

ng build --watch

Database Setup

Supabase Configuration

The application uses Supabase as the backend service. To set up your local development environment:

  1. Create a Supabase account at supabase.io
  2. Create a new project
  3. Note your Project URL and Anonymous Key
  4. Configure the database schema according to the project documentation

Local Database (Optional)

If you prefer to use a local PostgreSQL instance:

  1. Install PostgreSQL locally
  2. Create a database for the project
  3. Update connection settings in your environment configuration

Testing Environment

Running Tests

Execute unit tests:

ng test

Run tests once (without watch mode):

ng test --watch=false

Run tests with coverage:

ng test --code-coverage

Run end-to-end tests:

ng e2e

Linting

Check code for linting errors:

ng lint

Fix auto-fixable linting errors:

ng lint --fix

Docker Setup (Optional)

Using Docker for Development

If you prefer to use Docker for development:

  1. Ensure Docker and Docker Compose are installed
  2. Create a docker-compose.yml file:
version: '3.8'
services:
  app:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
  1. Build and run the container:
docker-compose up --build

Troubleshooting

Common Issues

Module not found errors

Run npm install to ensure all dependencies are installed.

Port already in use

Use ng serve --port 4201 to use a different port.

Build errors

Clear cache with ng cache clean and rebuild.

SSL Certificate Errors

Set NODE_TLS_REJECT_UNAUTHORIZED=0 in your environment (only for development).

Verifying Installation

To verify your environment is set up correctly:

  1. Run node --version to check Node.js version
  2. Run npm --version to check npm version
  3. Run ng version to check Angular CLI version
  4. Run ng serve and navigate to http://localhost:4200/ to confirm the app loads

Daily Development Routine

  1. Pull latest changes: git pull origin main
  2. Install dependencies if needed: npm install
  3. Start development server: ng serve
  4. Create a new branch for your work: git checkout -b feature/my-feature
  5. Make your changes
  6. Run tests: ng test --watch=false
  7. Commit your changes with descriptive messages
  8. Push your branch and create a pull request

Useful npm Scripts

Check package.json for available scripts: - npm start: Alias for ng serve - npm run build: Build the application - npm test: Run unit tests - npm run lint: Run linting - npm run e2e: Run end-to-end tests