SELFHOST-HELPER

Empower Your Projects, Simplify Your Workflow

Built with the tools and technologies:

---

Table of Contents

• Overview
• Getting Started
  • Prerequisites
  • Installation
  • Usage
  • Testing
• Features
• Project Structure
  • Project Index
• Roadmap
• Contributing
• License
• Acknowledgment

---

Overview

SelfHost-Helper is an advanced developer tool designed to simplify local project hosting, process management, and system monitoring. Built with a focus on stability, performance, and user experience, it integrates native Windows process control, real-time resource monitoring, and a modern UI to streamline development workflows.

Why SelfHost-Helper?

This project aims to provide developers with a robust, all-in-one solution for managing local projects efficiently. The core features include:

• 🛠️ Containerized Environment: Uses Docker to ensure consistent setup and dependencies across deployments.
• ⚙️ Native Process Control: Implements Windows-specific job objects for reliable process grouping and resource management.
• 🔍 Real-Time Monitoring: Offers comprehensive resource tracking, process insights, and live logs for debugging.
• 🎨 Modern UI Components: Features a responsive, customizable interface for project control, file management, and system stats.
• 📁 Project Lifecycle Management: Facilitates project startup, shutdown, editing, and automation with seamless integration.
• 🔄 Cross-Platform Utilities: Provides process tree management and system integration for Windows and Unix environments.

---

Features

	Component	Details
⚙️	Architecture	Modular Electron-based desktop app with React frontend Uses Vite for build tooling Separation of main and renderer processes
🔩	Code Quality	Consistent code style with ESLint and Prettier integrations TypeScript support via jsconfig.json Well-structured project with clear separation of concerns
📄	Documentation	Includes Dockerfile for containerization README provides setup and usage instructions In-code comments and README sections for dependencies and build steps
🔌	Integrations	Electron for desktop app shell React with Tailwind CSS for UI Vite as build tool Electron-builder for packaging Various Radix UI components, react-router-dom for routing SQLite3 and Sequelize for local database
🧩	Modularity	Component-based React architecture Electron main and renderer processes separated Custom hooks and utility modules
🧪	Testing	Testing setup not explicitly detailed, but likely uses ESLint plugins for code quality Potential use of Electron-specific testing tools
⚡️	Performance	Uses pidusage for process monitoring Optimized build with Vite, Tailwind CSS, and React Fast Refresh
🛡️	Security	Electron security best practices implied (e.g., context isolation) Use of secure dependencies and sandboxing
📦	Dependencies	Heavy reliance on React, Tailwind CSS, Electron, and SQLite3 Build and dev dependencies include Docker, ESLint, Tailwind, Vite, and Radix UI

---

Project Structure

└── SelfHost-Helper/
    ├── ChangeLog
    ├── Dockerfile
    ├── README.md
    ├── RELEASE_NOTES_v0.7.0.md
    ├── TODO.md
    ├── database
    │   └── models
    ├── electron
    │   ├── ipc
    │   ├── job
    │   ├── main.js
    │   ├── preload.js
    │   ├── services
    │   └── tray
    ├── eslint.config.js
    ├── index.html
    ├── jsconfig.json
    ├── package.json
    ├── postcss.config.js
    ├── resources
    │   ├── icon.ico
    │   └── icon.png
    ├── src
    │   ├── App.jsx
    │   ├── components
    │   ├── editors
    │   ├── index.css
    │   ├── lib
    │   ├── main.jsx
    │   ├── pages
    │   └── store
    ├── tailwind.config.js
    └── vite.config.js

---

Project Index

SELFHOST-HELPER/

__root__

⦿ __root__

File Name	Summary
Dockerfile	- Builds a containerized environment for the Electron application, ensuring consistent setup and dependencies - It prepares the app for production by installing necessary packages, executing the build process, and defining a volume for release artifacts - This setup facilitates streamlined deployment and distribution within the overall project architecture.
ChangeLog	- Provides a comprehensive change log detailing major enhancements in resource monitoring, process management, UI responsiveness, and stability - It highlights the architectures focus on reliable process control, native performance optimizations, real-time updates, and robust system integration, ensuring seamless project monitoring, control, and user experience across Windows environments.
jsconfig.json	- Defines module resolution and path aliasing configurations to streamline import statements across the project - Enhances developer experience by simplifying code navigation and maintaining consistent referencing within the source directory, thereby supporting scalable and organized project architecture.
README.md	- Provides core functionality for managing local Node.js projects within the SelfHost Helper application - It orchestrates project lifecycle operations, facilitates real-time log streaming, and integrates file editing and watching capabilities - Serving as a central component, it ensures seamless project control, system tray interactions, and startup automation, forming the backbone of the applications architecture for efficient local development and management.
TODO.md	- Provides a comprehensive roadmap for developing and enhancing the SelfHost Helper application, focusing on core features, user experience improvements, and system robustness - It guides the evolution of project management, process control, UI/UX refinements, and system stability, ensuring scalable, high-performance, and user-friendly functionalities within the overall architecture.
RELEASE_NOTES_v0.7.0.md	- Provides detailed release notes for SelfHost Helper v0.7.0, emphasizing significant enhancements in stability, process management, UI/UX, and developer tools - Highlights include native Windows process control, advanced resource monitoring, a modern interface, integrated code editing, and improved project management features, positioning the application as a robust, industrial-grade process manager for local project hosting.
tailwind.config.js	- Defines the design system and visual styling for the project by configuring Tailwind CSS - It establishes color schemes, responsive container layouts, border radii, and animations, ensuring a cohesive and customizable user interface across pages and components - This configuration supports consistent theming and responsive design within the overall application architecture.
eslint.config.js	- Defines ESLint configuration to enforce coding standards and best practices across the project - It integrates recommended rules for JavaScript, React, and development tools, while customizing environment-specific settings and ignoring non-essential directories - This setup ensures code quality, consistency, and maintainability within the overall architecture.
package.json	- Defines project metadata, scripts, and build configurations for SelfHost Helper, a Node.js-based desktop application - Facilitates development, packaging, and distribution across platforms, integrating Electron for desktop functionality and Vite for frontend bundling - Serves as the central configuration hub ensuring streamlined workflows and consistent application deployment within the overall architecture.
vite.config.js	- Configures the development and build environment for a React application using Vite, establishing project structure, server settings, and build output parameters - It ensures efficient module resolution, optimizes the development experience, and prepares the application for deployment by defining key build options and aliasing paths within the overall project architecture.
index.html	- Establishes the entry point and foundational structure for the SelfHost Helper web application, enabling the rendering of the user interface within a secure, optimized environment - Coordinates the loading of core scripts and assets, facilitating seamless initialization and interaction with the applications features - Serves as the gateway that connects the visual interface to underlying functionalities within the overall architecture.
postcss.config.js	- Configures PostCSS to integrate Tailwind CSS and autoprefixer, enabling streamlined styling workflows within the project - It ensures that utility-first CSS from Tailwind is processed correctly and that vendor prefixes are automatically added for cross-browser compatibility - This setup supports a consistent, maintainable, and efficient styling architecture across the entire codebase.

src

⦿ src

File Name	Summary
main.jsx	- Initialize and render the main React application within the DOM, setting up the core user interface for the project - It integrates global styles and conditionally loads a development tool for enhanced debugging during development - This file serves as the entry point, orchestrating the startup process and ensuring the app is properly mounted and ready for user interaction.
App.jsx	- Orchestrates the applications core structure by managing routing between the Dashboard and Settings pages, handling shutdown events, and displaying global notifications - It establishes the main user interface layout, integrates system shutdown signals, and ensures consistent user experience across different views within the SelfHost Helper project.

pages

⦿ src.pages

File Name	Summary
Settings.jsx	- Provides the user interface for managing application settings and viewing version information within the Electron-based SelfHost Helper - Facilitates toggling auto-launch on startup and displays app details, integrating with backend APIs to reflect current configurations and ensure seamless user control over startup behavior and application metadata.
Dashboard.jsx	- Orchestrates the main dashboard interface by managing project selection, status updates, and real-time log streaming - Facilitates user interactions for starting, stopping, and configuring projects while dynamically loading project data, file structures, and statistics - Integrates various components to provide a cohesive view for monitoring and controlling multiple projects within the application architecture.

store

⦿ src.store

File Name

Summary

atoms.js

- Defines and manages global application state related to projects, logs, performance metrics, file structure, editor states, and UI modals - Facilitates seamless data sharing and synchronization across components, enabling efficient rendering, user interactions, and state updates within the project management and development environment - Serves as the central hub for state management in the architecture.

components

⦿ src.components

File Name	Summary
ShutdownOverlay.jsx	- Provides a full-screen overlay indicating a graceful shutdown process, visually communicating to users that projects are being stopped and data is being saved - Integrates animated elements to enhance user experience during system transitions, ensuring clear feedback and reducing uncertainty during shutdown sequences within the applications architecture.
ProjectHeader.jsx	- Provides an interactive header component for project management, displaying project status, name, and real-time uptime - Facilitates user actions such as starting, stopping, restarting, editing settings, and deleting projects, while maintaining a responsive and visually engaging interface within the overall application architecture - Enhances user experience by integrating status indicators and control buttons seamlessly.
AddProjectDialog.jsx	- Facilitates adding new projects through a user-friendly dialog interface, enabling users to specify project details such as path, name, type, start script, and icon - Integrates with backend APIs to save project configurations and updates the project list dynamically, supporting efficient project management within the applications architecture.
ViewTabs.jsx	- Provides a tabbed interface for switching between console logs and code editor views within the application - It also displays real-time system statistics such as CPU and memory usage, enhancing user awareness of resource consumption during development or debugging sessions - This component integrates seamlessly into the overall architecture to facilitate interactive view management and system monitoring.
ProjectSettingsDialog.jsx	- Provides a user interface for configuring and managing project settings within the application - Facilitates editing project details, selecting project paths and icons, and adjusting startup behaviors - Supports project deletion and ensures seamless user interactions through animations and validation, integrating with the broader architecture to enable dynamic project customization and management.
FileTree.jsx	- Provides an interactive, hierarchical file explorer component that displays project files and directories with dynamic icons and expand/collapse functionality - It enables users to navigate and select files within the applications architecture, supporting seamless integration into interfaces that require visual file structure representation and user interaction with project assets.
Sidebar.jsx	- Src/components/Sidebar.jsx`This component serves as the primary navigation and project management interface within the application - It provides users with a sidebar that displays a list of projects, allowing for easy selection, reordering via drag-and-drop, and access to project-specific actions - The Sidebar also integrates controls for adding new projects and navigating between different views, thereby facilitating seamless project organization and user interaction across the app - Overall, it acts as the central hub for project navigation, contributing to the applications modular and user-friendly architecture.
LogViewer.jsx	- Provides an interactive terminal interface for real-time log viewing and command input within a project environment - Integrates with global state management to display logs, supports user commands with history navigation, and offers functionalities like clearing logs - Facilitates seamless communication between the user and project processes, enhancing debugging and operational workflows.
EmptyState.jsx	- Provides a user-friendly placeholder interface indicating no project is currently selected, guiding users to manage existing projects or create new ones - It enhances the overall user experience by offering clear visual cues and an actionable button, supporting seamless navigation within the applications project management architecture.
EditorView.jsx	- Provides a comprehensive code editing interface within a project workspace, integrating a file explorer, syntax-aware editor, and file management functionalities - Facilitates seamless file navigation, real-time content loading, and saving capabilities, supporting an efficient development workflow - Ensures user-friendly interactions with dynamic resizing, error handling, and keyboard shortcuts, contributing to an intuitive and productive coding environment.

ui

⦿ src.components.ui

File Name	Summary
input.jsx	- Defines a reusable, styled input component integrated into the applications UI library, facilitating consistent user input handling across various forms and interfaces - It enhances the overall architecture by providing a flexible, accessible, and visually cohesive element that can be easily customized and extended within the component ecosystem.
card.jsx	- Provides a set of reusable, styled UI components for building consistent card layouts within the application - These components facilitate the creation of visually cohesive cards with distinct sections such as headers, titles, descriptions, content, and footers, supporting a modular and maintainable approach to UI design across the codebase.
label.jsx	- Defines a reusable label component that standardizes text styling and accessibility within the user interface - It integrates Radix UI primitives with custom styling, ensuring consistent appearance and behavior across form elements - This component enhances the overall architecture by promoting modularity, accessibility, and design consistency in form-related UI elements.
switch.jsx	- Provides a reusable toggle switch component designed for user interface interactions, enabling users to easily switch between binary states such as on and off - Integrates accessibility features and visual feedback to enhance user experience, serving as a fundamental UI element within the broader component library to ensure consistency and accessibility across the application.
select.jsx	- Provides a customizable, accessible dropdown select component built with Radix UI primitives and React - Facilitates consistent styling, keyboard navigation, and smooth animations for select menus across the application, enhancing user experience and interface cohesion within the overall architecture.
button.jsx	- Defines a versatile, styled button component for the UI library, supporting multiple visual variants and sizes - Facilitates consistent button appearance and behavior across the application, enabling easy customization and accessibility - Serves as a foundational element within the component architecture, promoting reusable and maintainable UI patterns.
textarea.jsx	- Provides a reusable, styled textarea component integral to the user interface, enabling consistent and accessible multi-line text input across the application - It enhances the overall architecture by encapsulating styling and behavior, promoting maintainability and a cohesive user experience within the component-based design system.
titleBar.jsx	- Provides a custom title bar component for the applications user interface, enabling window management actions such as minimize, maximize, and close - It dynamically reflects window state changes and integrates with the underlying window API to facilitate seamless window control within the desktop environment, contributing to a cohesive and user-friendly application architecture.
dialog.jsx	- Defines a reusable, accessible dialog component suite for the user interface, enabling consistent modal interactions across the application - It encapsulates dialog structure, overlay effects, and close functionality, facilitating seamless integration of modal dialogs that enhance user experience and maintain visual consistency within the overall architecture.

editors

⦿ src.editors

File Name

Summary

MonacoEditor.jsx

- Provides a React component integrating the Monaco Editor to enable rich, customizable code editing within the application - It supports syntax highlighting, theme customization, and language-specific compiler options, facilitating an interactive development environment - This component plays a central role in the code editing architecture, ensuring a seamless and flexible user experience for editing code snippets across different languages.

lib

⦿ src.lib

File Name	Summary
utils.js	- Provides a utility function that consolidates class name management by combining conditional class names with Tailwind CSS merging capabilities - It streamlines styling logic across the codebase, ensuring consistent and conflict-free application of styles within the project’s component architecture - This enhances maintainability and visual consistency throughout the user interface.
materialIcons.js	- This code file, materialIcons.js, serves as a mapping utility within the project’s architecture, categorizing various file extensions and filenames into their corresponding material icon types - Its primary purpose is to facilitate consistent and intuitive visual representation of files across the application, enhancing user experience by enabling the interface to display appropriate icons based on file types - This contributes to the overall design system by ensuring that files are easily recognizable, supporting the projects goal of providing a clear, organized, and user-friendly environment for managing diverse code and document formats.

electron

⦿ electron

File Name	Summary
main.js	- Orchestrates the Electron applications main process by initializing the user interface, managing system tray interactions, handling media protocol requests, and coordinating startup and shutdown procedures - Ensures seamless integration between the UI, background services, and project management, facilitating efficient operation, resource cleanup, and user interaction within the overall architecture.
preload.js	- Facilitates secure communication between the Electron renderer process and main process by exposing a comprehensive API for managing projects, files, logs, application settings, and window controls - Enables seamless integration of user interactions with core functionalities, ensuring smooth operation and real-time updates within the applications architecture.

tray

⦿ electron.tray

File Name	Summary
tray.js	- Provides system tray integration for managing application visibility and server processes - Facilitates user interaction through a context menu to start, stop, and restart individual or all projects, while also enabling quick access to show or hide the main window and quit the application - Enhances user experience by offering streamlined control within the desktop environment.

ipc

⦿ electron.ipc

File Name

Summary

handlers.js

- Defines IPC handlers to facilitate communication between the Electron renderer process and main process, managing project lifecycle, file operations, application settings, window controls, and external integrations - Serves as the central interface for orchestrating core functionalities, ensuring seamless interaction within the applications architecture and enabling features like project management, file handling, auto-launch, and external URL access.

job

⦿ electron.job

File Name	Summary
job.cpp	- Defines a Windows-specific Job Object interface for process management within the application - Facilitates creating, assigning processes, retrieving resource usage statistics, terminating, and closing job handles, enabling efficient group control and monitoring of processes in the overall architecture - This component ensures robust process isolation, resource accounting, and cleanup in the systems process lifecycle management.
job.h	- Defines a native module for managing Windows job objects within the Electron environment, enabling process grouping, resource control, and lifecycle management - Facilitates interaction between Node.js and Windows APIs to assign processes, retrieve status, terminate, and close job handles, supporting robust process supervision and resource isolation in the applications architecture.
package.json	- Defines the package configuration for the job-addon module, enabling seamless integration of native C++ functionalities into the Electron applications architecture - Facilitates building and installing native extensions through node-gyp, ensuring efficient communication between Electrons JavaScript environment and underlying native code components within the overall project ecosystem.
index.js	- Provides an interface for managing native job objects within the Electron application, enabling creation, process assignment, and cleanup of background tasks - Facilitates seamless integration of native modules for job handling, ensuring proper resource management and error handling in the applications architecture - Acts as a bridge between JavaScript and native code to support robust job lifecycle operations.
binding.gyp	- Defines the build configuration for the native job processing module within the Electron application, enabling seamless integration of C++ code with Node.js - It orchestrates compilation, dependencies, and platform-specific settings to facilitate efficient execution of background job tasks, contributing to the overall architecture by extending Electron’s capabilities with high-performance native functionalities.

services

⦿ electron.services

File Name	Summary
filesWatcher.js	- Facilitates real-time monitoring of specified directories for file changes, additions, and deletions within the Electron application - It ensures the application remains synchronized with filesystem updates by detecting modifications and notifying the main process to trigger appropriate responses - This component is essential for maintaining dynamic, responsive interactions based on filesystem activity across the project architecture.
database.js	- Provides database initialization and management for the application, establishing a persistent SQLite storage tailored to development or production environments - Ensures seamless connection, schema synchronization, and data integrity by setting up the Project model with unique identifiers and order attributes - Facilitates reliable data operations within the overall architecture, supporting project data persistence and consistency across sessions.
projectsManager.js	- The electron/services/projectsManager.js file serves as the central orchestrator for managing project processes within the application - Its primary purpose is to oversee the lifecycle of project instances—initiating, monitoring, and terminating them—while maintaining real-time status updates and process information - This module facilitates seamless coordination between project execution and the applications user interface, ensuring users receive accurate, up-to-date insights into project states - Overall, it acts as the backbone for project process management, enabling robust control and observability within the applications architecture.
processTree.js	- Provides cross-platform utilities to identify, analyze, and manage process trees related to specific project roots - Facilitates retrieving process details, constructing process hierarchies, and terminating entire process groups reliably on Windows and Unix systems, supporting robust project lifecycle management and cleanup within the applications architecture.
logger.js	- Provides centralized logging functionality for the Electron application, capturing runtime events, errors, and system messages - Ensures persistent log storage in the user data directory, supports real-time console output with color-coded severity levels, and handles global error events to facilitate debugging and application monitoring within the overall architecture.

database

⦿ database

models

⦿ database.models

File Name	Summary
Project.js	- Defines the Project data model within the database schema, encapsulating core attributes such as project identification, configuration, environment variables, and metadata - Serves as the foundational structure for managing project entities, enabling consistent storage, retrieval, and manipulation of project-related information across the application architecture.

---

Getting Started

Prerequisites

This project requires the following dependencies:

• Programming Language: JavaScript
• Package Manager: Npm
• Container Runtime: Docker

Installation

Build SelfHost-Helper from the source and install dependencies:

1. Clone the repository:

   ❯ git clone https://github.com/DevRoots-Studio/SelfHost-Helper

2. Navigate to the project directory:

   ❯ cd SelfHost-Helper

3. Install the dependencies:

Using docker:

❯ docker build -t DevRoots-Studio/SelfHost-Helper .

Using npm:

❯ npm install

Usage

Run the project with:

Using docker:

docker run -it {image_name}

Using npm:

npm start

Testing

Selfhost-helper uses the {test_framework} test framework. Run the test suite with:

Using docker:

echo 'INSERT-TEST-COMMAND-HERE'

Using npm:

npm test

---

Roadmap

• Task 1: Implement feature one.
• Task 2: Implement feature two.
• Task 3: Implement feature three.

---

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the SelfHost-Helper project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/DevRoots-Studio/SelfHost-Helper

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

---

License

Selfhost-helper is protected under the LICENSE License. For more details, refer to the LICENSE file.

---

Acknowledgments

• Credit contributors, inspiration, references, etc.

⬆ Return

---