The Invisible Framework
raw JSON → 1.26.10 verified Sat Apr 25 auth: no javascript
The Invisible Framework (current stable v1.26.10) is an opinionated, CLI-driven web application framework designed to rapidly scaffold and manage full-stack JavaScript projects. It provides a structured approach from an empty directory to a production environment, automating common setup tasks like Git, npm initialization, and configuring essential development tools such as Babel, ESLint, Webpack, and Express. It enforces a `client/` directory for UI code and a `config.js` for environment settings, aiming to streamline development and deployment processes for Node.js (v6+) and npm (v3+) based applications. The framework emphasizes convention over configuration, abstracting away many underlying build processes.
Common errors
error Error: ENOENT: no such file or directory, stat 'client/index.js' ↓
cause The framework's build process cannot find the required client-side entry point file at `client/index.js`.
fix
Create the
client directory and the index.js file within it: mkdir client && touch client/index.js. error npm ERR! missing script: start ↓
cause The `start` script, which the Invisible Framework typically injects into `package.json` to run the development server, is either missing or has been removed.
fix
Check your
package.json to ensure the scripts.start entry is present. If it's missing, try reinstalling the framework (npm i -S invisible-framework) to regenerate the default scripts, or manually add the start script as per the framework's documentation. error Minimum Node.js version 6.3.0 required. You are running X.Y.Z. ↓
cause The current Node.js version installed on your system does not meet the minimum requirement specified by the Invisible Framework.
fix
Upgrade your Node.js installation to version 6.3.0 or newer. Consider using a Node Version Manager (NVM) like
nvm to easily switch and update Node.js versions. Warnings
gotcha The Invisible Framework has specific runtime requirements: Node.js v6.3.0 or higher and NPM v3 or higher. Running with older versions may lead to unexpected errors or installation failures. ↓
fix Ensure your Node.js installation is at least 6.3.0 and your NPM version is 3 or higher. Use `node -v` and `npm -v` to check, and upgrade if necessary.
gotcha Upon installation, the framework automatically modifies your `package.json` to include its commands and generates several configuration files (e.g., `.editorconfig`, `.eslintrc`, `.gitignore`, `config.js`). Be aware that existing files with the same names might be overwritten or patched. ↓
fix Review generated files and `package.json` changes after installation. If you have custom configurations, merge them carefully. Consider committing your project before running `npm i -S invisible-framework`.
gotcha The framework imposes a strict directory structure, expecting client-side UI code to reside within a `client/` directory and `client/index.js` to serve as the main JavaScript entry point. Deviating from this structure will prevent the build process from locating your application files. ↓
fix Always place your UI code within the `client/` directory and ensure `client/index.js` exists as your application's primary entry file. Refer to the demo application for guidance on internal client directory structure.
gotcha The Invisible Framework is primarily a CLI-driven tool. Developers typically interact with it via command-line commands (e.g., `invisible-framework create`) or npm scripts (e.g., `npm start`) rather than by importing modules directly from the `invisible-framework` package into their application code. ↓
fix Focus on using the `invisible-framework` CLI and the npm scripts it provides. Avoid attempting direct programmatic `import { ... } from 'invisible-framework'` statements in your application code unless explicitly documented.
Install
npm install invisible-framework yarn add invisible-framework pnpm add invisible-framework Quickstart
mkdir my-project && cd my-project
npm init -y
npm i -S invisible-framework
mkdir client
touch client/index.js
# Open client/index.js and add the following content:
// console.log('I am alive');
# Then, from your terminal:
npm start
# Open your browser to http://localhost:3325 and check the console.