Skip to main content

Development Setup

Set up your local development environment for contributing to Site Availability Monitoring.

Prerequisites​

Required Software​

  • Docker: For containerized development
  • VS Code: With Go and React extensions
  • Make: For build automation
  • curl/httpie: For API testing

Repository Setup​

Clone the Repository​

git clone https://github.com/Levy-Tal/site-availability.git
cd site-availability

Environment Setup​

# Set up Go workspace
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin

# Install Go tools
go install golang.org/x/tools/cmd/goimports@latest
go install github.com/golangci/golangci-lint/cmd/golangci-lint@latest

Backend Development​

Setup​

cd backend

# Download dependencies
go mod download

# Verify setup
go version
go mod verify

Configuration​

Create a development config file:

cp ../helpers/config/single-server.yaml config.yaml

Edit config.yaml for your environment:

scrape_interval: 10s
log_level: debug
port: 8080

locations:
  - name: Development
    latitude: 40.712776
    longitude: -74.005974

apps:
  - name: test-app
    location: Development
    metric: up{instance="localhost:9090", job="prometheus"}
    prometheus: http://localhost:9090/

Running the Backend​

# Development mode with hot reload
go run main.go

# Or build and run
go build -o site-availability main.go
./site-availability

Testing​

# Run all tests
go test ./...

# Run tests with coverage
go test -cover ./...

# Run specific package tests
go test ./handlers/...

# Generate coverage report
go test -coverprofile=coverage.out ./...
go tool cover -html=coverage.out

Frontend Development​

Setup​

cd frontend

# Install dependencies
npm install

# Verify setup
npm --version
node --version

Configuration​

Edit src/config.js for development:

const config = {
  apiUrl: "http://localhost:8080",
  map: {
    updateInterval: 10000, // 10 seconds for development
    defaultZoom: 3,
  },
  features: {
    debugMode: true,
  },
};

Running the Frontend​

# Start development server
npm start

# The app will open at http://localhost:3000

Testing​

# Run tests
npm test

# Run tests with coverage
npm test -- --coverage

# Run tests in watch mode
npm test -- --watch

Building​

# Create production build
npm run build

# Serve build locally
npx serve -s build

Development Workflow​

Making Changes​

  1. Create a feature branch:

    git checkout -b feature/your-feature-name

  2. Make your changes:

    • Backend changes in backend/
    • Frontend changes in frontend/
    • Documentation in docs/

  3. Test your changes:

    # Backend tests
    cd backend && go test ./...

    # Frontend tests
    cd frontend && npm test

  4. Commit changes:

    git add .
    git commit -m "feat: add new feature"

Using Docker for Development​

Start the complete stack:

cd helpers/docker-compose/single-server
docker-compose up -d

This provides:

API Testing​

Test the backend API:

# Health check
curl http://localhost:8080/health

# Get applications
curl http://localhost:8080/api/apps | jq

# Get locations
curl http://localhost:8080/api/locations | jq

# Metrics endpoint
curl http://localhost:8080/metrics

Code Quality​

Linting​

# Backend linting
cd backend
golangci-lint run

# Frontend linting
cd frontend
npm run lint

Formatting​

# Format Go code
gofmt -w .
goimports -w .

# Format JavaScript/React code
cd frontend
npm run format

Pre-commit Hooks​

Install pre-commit hooks:

# Install pre-commit
pip install pre-commit

# Install hooks
pre-commit install

# Run manually
pre-commit run --all-files

IDE Setup​

VS Code​

Recommended extensions:

  • Go (by Google)
  • ES7+ React/Redux/React-Native snippets
  • Prettier
  • ESLint
  • REST Client

Create .vscode/settings.json:

{
  "go.buildOnSave": "package",
  "go.lintOnSave": "package",
  "go.testOnSave": "package",
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true
}

GoLand/WebStorm​

Configure Go modules and Node.js interpreter in IDE settings.

Debugging​

Backend Debugging​

# Run with debug logging
LOG_LEVEL=debug go run main.go

# Use delve debugger
go install github.com/go-delve/delve/cmd/dlv@latest
dlv debug main.go

Frontend Debugging​

# Enable debug mode
REACT_APP_DEBUG=true npm start

# Use React Developer Tools browser extension

Common Issues​

Go Module Issues​

# Clear module cache
go clean -modcache

# Update dependencies
go mod tidy
go mod download

Node.js Issues​

# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Port Conflicts​

# Check what's using port 8080
lsof -i :8080

# Kill process if needed
kill -9 <PID>

Next Steps​