Skip to content

setup.md

Latest commit

 

History

History
135 lines (108 loc) · 3.5 KB

setup.md

File metadata and controls

135 lines (108 loc) · 3.5 KB

SectoolBox Project Setup Guide

Project Overview

SectoolBox is a privacy-first security analysis toolbox that runs entirely in your browser. This is a React-based client-side application with PWA capabilities.

Prerequisites

  • Node.js >= 16.0.0
  • npm >= 8.0.0

Project Structure

SectoolBox/
├── frontend/           # React application
│   ├── build/         # Production build output
│   ├── public/        # Static assets
│   ├── src/           # Source code
│   ├── scripts/       # Build scripts
│   └── package.json   # Dependencies and scripts
└── setup.md           # This file

Setup Steps

1. Navigate to Frontend Directory

cd frontend

2. Install Dependencies

npm install

Expected Output:

  • Installs ~3507 packages
  • May show some peer dependency warnings (safe to ignore)
  • May show vulnerability warnings (can be addressed with npm audit fix)

3. Build the Project

npm run build

This command:

  • Creates an optimized production build
  • Runs post-build optimization scripts
  • Copies service worker and manifest files
  • Generates sitemap
  • Creates build artifacts in frontend/build/

Expected Output:

File sizes after gzip:
  97.99 kB  build\static\js\main.a10a5522.js
  23.79 kB  build\static\js\111.983b008b.chunk.js
  10.24 kB  build\static\css\main.fec9e860.css
  [additional chunks...]

4. Launch Development Server

npm start

Expected Output:

You can now view sectoolbox in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Available Scripts

Development

  • npm start - Start development server
  • npm test - Run tests
  • npm run analyze - Analyze bundle size

Building

  • npm run build - Production build
  • npm run build:client - Client-only build
  • npm run build:pwa - PWA optimized build

Serving

  • npm run serve - Serve production build locally

Deployment

  • npm run deploy:netlify - Deploy to Netlify
  • npm run deploy:vercel - Deploy to Vercel
  • npm run deploy:github - Deploy to GitHub Pages
  • npm run deploy:surge - Deploy to Surge
  • npm run deploy:firebase - Deploy to Firebase

Analysis

  • npm run lighthouse - Run Lighthouse audit

Accessing the Application

Once the development server is running:

The development server supports hot reloading - changes to source files will automatically refresh the browser.

Features

This security toolbox includes:

  • Privacy-first design (runs entirely client-side)
  • PWA capabilities for offline use
  • Security analysis tools
  • File analysis capabilities
  • Cryptography utilities
  • CTF analysis tools

Troubleshooting

Common Issues

  1. Port 3000 in use: The server will automatically try the next available port
  2. Build failures: Ensure all dependencies are installed with npm install
  3. Peer dependency warnings: Generally safe to ignore unless functionality is affected

Dependencies

The project uses:

  • React 18.3.1
  • React Router 6.26.1
  • Crypto-js for cryptography
  • Lucide React for icons
  • Tailwind CSS for styling
  • Various security analysis libraries

Development Notes

  • The application is designed to work entirely offline after initial load
  • No server-side processing - all analysis happens in the browser
  • Supports modern browsers with Web Crypto API
  • Built with security and privacy as primary concerns