Skip to main content

Development Setup

Get started contributing to FitFileViewer.

Prerequisites​

Required Software​

SoftwareVersionPurpose
Node.js18+Runtime
npm9+Package manager
GitLatestVersion control
  • VS Code with extensions:
    • ESLint
    • Prettier
    • JavaScript/TypeScript

Quick Start​

# Clone the repository
git clone https://github.com/Nick2bad4u/FitFileViewer.git

# Navigate to electron app
cd FitFileViewer/electron-app

# Install dependencies
npm install

# Start development
npm start

Detailed Setup​

1. Clone Repository​

# HTTPS
git clone https://github.com/Nick2bad4u/FitFileViewer.git

# SSH
git clone git@github.com:Nick2bad4u/FitFileViewer.git

# Navigate to project
cd FitFileViewer

2. Install Dependencies​

# Enter electron-app directory
cd electron-app

# Install all dependencies
npm install

3. Start Development Server​

# Start Electron in development mode
npm start

This will:

  • Launch Electron with hot reload
  • Enable DevTools
  • Show console output

4. Open DevTools​

  • Press Ctrl+Shift+I (Windows/Linux)
  • Press Cmd+Option+I (macOS)

Project Structure​

FitFileViewer/
├── electron-app/          # Main application
│   ├── main.js           # Main process
│   ├── renderer.js       # Renderer process
│   ├── preload.js        # Preload script
│   ├── main-ui.js        # UI management
│   ├── fitParser.js      # FIT parsing
│   ├── utils/            # Utility modules
│   ├── tests/            # Test files
│   └── package.json      # Dependencies
├── docs/                  # Documentation
├── fit-test-files/        # Sample FIT files
└── README.md

Development Commands​

Run Application​

# Development mode (with DevTools)
npm start

# Production mode (no DevTools)
npm run start-prod

Testing​

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run specific test file
npm test -- tests/unit/formatDistance.test.js

Linting​

# Run ESLint
npm run lint

# Fix auto-fixable issues
npm run lint:fix

Building​

# Build for current platform
npm run build

# Build for all platforms
npm run build-all

Configuration Files​

ESLint​

// eslint.config.mjs
export default [
    // Configuration
];

Prettier​

// .prettierrc
{
    "tabWidth": 4,
    "useTabs": true,
    "singleQuote": true
}

TypeScript​

// tsconfig.json
{
    "compilerOptions": {
        "checkJs": true,
        "allowJs": true
    }
}

Testing with FIT Files​

Sample FIT files are provided:

# Location
fit-test-files/
├── _Fenton_Michigan_Afternoon_Ride_*.fit
├── Virtual_Zwift_*.fit
└── ...

Environment Variables​

VariablePurpose
NODE_ENVdevelopment/production
ELECTRON_IS_DEVEnable dev features

Debugging​

VS Code Launch Config​

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}/electron-app",
            "runtimeExecutable": "${workspaceFolder}/electron-app/node_modules/.bin/electron",
            "args": ["."]
        }
    ]
}

Chrome DevTools​

  1. Start app: npm start
  2. Open DevTools: Ctrl+Shift+I
  3. Debug renderer process

Next: Code Standards →