Start Page

Create Project or App from browser.

biuld on node 18.18.2

Banana.js Overview

Banana.js is a modern frontend framework designed for fast development and optimized builds. It leverages native ES modules for development and provides a plugin-based architecture for extensibility. Key features include:

Instant Server Start: Uses native ES modules for lightning-fast development server startup.

Hot Module Replacement (HMR): Updates modules in real-time without a full reload.

Plugin System: Extensible via plugins for handling various file types and optimizations.

Optimized Production Build: Bundles and minifies code for production.

Core Architecture

Development Server: A lightweight server that serves ES modules directly to the browser.

Build System: A production build tool that bundles and optimizes assets.

Plugin System: A modular system for handling different file types (e.g., JS, CSS, images).

HMR: A mechanism to update modules in the browser without a full reload.

1-Create a new project:

Use template Vue

banana create my-app --vue

User template react

banana create my-app --react

2-Install dependencies:

cd my-app npm install or yarn

Start the development server:

yarn dev yarn build

Create Project or App from CLI.

banana-docs

bananaJS/
├── Banana/ # Core framework implementation
│ ├── public/ # Static assets served directly to clients
│ │ ├── serve.json # Server configuration for static hosting
│ │ ├── assets/ # Static asset files
│ │ │ ├── logo.svg # Brand logo in SVG format
│ │ │ └── favicon.icon # Browser tab icon
│ │ ├── index.html # Main HTML entry point with root DOM element
│ │ ├── styles/ # Global CSS styles (not component-scoped)
│ │ │ └── main.css # Framework-wide styles and CSS variables
│ │ ├── github-icon.svg # GitHub logo for integrations
│ ├── src/ # Framework source code (pre-compilation)
│ │ ├── components/ # Reusable UI components (JSX)
│ │ │ ├── Navbar.jsx # Top navigation bar component
│ │ │ ├── Sidebar.jsx # Collapsible side navigation
│ │ │ └── Footer.jsx # Page footer with copyright/links
│ │ ├── pages/ # Route-based page components
│ │ │ ├── Home.jsx # Marketing landing page
│ │ │ ├── GettingStarted.jsx # Installation docs
│ │ │ ├── Features.jsx # Framework feature highlights
│ │ │ ├── Plugins.jsx # Plugin system documentation
│ │ │ ├── ApiReference.jsx # Auto-generated API docs
│ │ │ ├── Examples.jsx # Interactive code examples
│ │ │ ├── Blog.jsx # Blog post listings
│ │ │ ├── Changelog.jsx # Version release notes
│ │ │ └── News.jsx # Project announcements
│ │ ├── router/ # Client-side routing logic
│ │ │ └── index.js # Route definitions and history config
│ │ ├── styles/ # Component-scoped styles
│ │ │ └── main.css # CSS for framework components
│ │ ├── App.jsx # Root application layout component
│ │ └── main.jsx # React DOM render entry point
│ ├── dist/ # Production build output (auto-generated)
│ ├── node_modules/ # NPM dependencies (auto-generated)
│ ├── .env.example # Environment variable template
│ ├── .env.production # Production-specific configs
│ └── .env.development # Development environment vars
├── bin/ # Command-line interface tools
│ ├── banana.config.json # CLI configuration defaults
│ ├── build.cjs # Production build script (CommonJS)
│ ├── cli.cjs # Main CLI entry point (commands)
│ ├── server.cjs # Development server implementation
│ └── websocket.cjs # WebSocket server implementation
├── lib/ # Shared JavaScript libraries
│ ├── cli-version.cjs # Version checking/management
│ ├── create-app.cjs # Scaffolds new applications
│ ├── create-project.cjs # Creates full project structure
│ └── detect-framework.cjs # Detects framework in existing projects
├── public/ # Global static assets
│ ├── scripts/ # Shared JavaScript utilities
│ ├── styles/ # Shared CSS resources
│ │ ├── banana.css # Core framework styles
│ │ └── main.css # Base normalization/reset styles
│ ├── dashboard.html # Admin dashboard entry point
│ ├── favicon.ico # Browser tab icon
│ ├── github-icon # GitHub integration assets
│ ├── index.html # Fallback HTML for SPA
│ ├── logo.svg # Brand logo variants
│ ├── main.ts # TypeScript entry point
│ └── site.webmanifest # PWA configuration
├── src/ # Application source code
│ ├── pages/ # View components
│ │ ├── Dashboard.jsx # Admin interface
│ │ ├── Home.jsx # Main landing page
│ │ └── NotFound.jsx # 404 error page
│ │ ├── hooks/ # Custom React hooks
│ │ │ └── useWebSocket.js # WebSocket connection hook
│ ├── router/ # Application routing
│ │ └── index.js # Route configuration
│ ├── services/ # Business logic/services
│ │ ├── api.js # REST API client
│ │ └── websocket.js # Real-time communication
│ ├── styles/ # Application styles
│ │ └── main.css # Global style rules
│ ├── utils/ # Helper functions
│ │ └── security.js # Authentication utilities
│ ├── App.jsx # Root component
│ ├── App.module.css # CSS Modules styles
│ ├── index.js # Legacy entry point
│ ├── main.jsx # Modern React entry
│ ├── main.ts # TypeScript entry
│ ├── server.js # Express server config
│ └── styles.scss # Sass stylesheet
├── Projects/ # Example implementations
│ └── templates/ # Blueprint projects
│ └── default/ # Default starter template
│ ├── public/ # Static assets served directly to clients
│ │ ├── index.html # Main HTML entry point
│ │ ├── styles/
│ │ │ └── main.css
│ │ ├── main.js
│ │ ├── logo.svg
│ │ ├── github-icon.svg
│ │ └── dashboard.html
│ ├── src/ # Framework source code
│ │ ├── components/
│ │ │ ├── Navbar.jsx
│ │ │ ├── Sidebar.jsx
│ │ │ └── Footer.jsx
│ │ ├── pages/
│ │ │ ├── Home.jsx
│ │ │ ├── GettingStarted.jsx
│ │ │ ├── Features.jsx
│ │ │ ├── Plugins.jsx
│ │ │ ├── ApiReference.jsx
│ │ │ ├── Examples.jsx
│ │ │ ├── Blog.jsx
│ │ │ ├── Changelog.jsx
│ │ │ └── News.jsx
│ │ ├── router/
│ │ │ └── index.js
│ │ ├── styles/
│ │ │ └── main.css
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── dist/
│ ├── node_modules/
│ ├── .env.example
│ ├── .env.production
│ └── .env.development
├── templates/ # Framework-agnostic starters
│ ├── docs/ # Documentation site template
│ │ ├── dist/ # Built assets directory
│ │ │ ├── bundle.js
│ │ │ └── bundle.js.map
│ │ ├── public/ # Static documentation assets
│ │ │ └── styles/
│ │ │ └── main.css
│ │ ├── src/ # Documentation source
│ │ │ ├── pages/ # Documentation views
│ │ │ │ ├── ApiReference.vue
│ │ │ │ ├── Blog.vue
│ │ │ │ ├── Examples.vue
│ │ │ │ ├── Features.vue
│ │ │ │ ├── Home.vue
│ │ │ │ └── Plugins.vue
│ │ │ ├── router/ # Vue router config
│ │ │ │ └── index.js
│ │ │ ├── styles/ # Component styles
│ │ │ │ └── main.css
│ │ │ └── main.js # Vue initialization
│ │ ├── App.vue # Root Vue component
│ │ └── [config files] # Build tool configs
│ ├── react/ # React starter kit
│ │ ├── src/ # React source
│ │ │ ├── components/ # Presentational components
│ │ │ ├── styles/ # React styling
│ │ │ │ └── App.scss # Sass stylesheet
│ │ │ ├── App.jsx # Root component
│ │ │ └── main.js # ReactDOM render
│ │ └── [config files] # React-specific configs
│ └── vue/ # Vue starter kit
│ ├── public/ # Vue static assets
│ │ └── index.html # Mount point
│ ├── src/ # Vue source
│ │ ├── components/ # Vue components
│ │ │ └── HelloWorld.vue # Example component
│ │ ├── App.vue # Root Vue instance
│ │ └── main.js # Vue initialization
│ └── [config files] # Vue build configs
├── plugins/ # Framework extensions
│ ├── css-modules.js # CSS Modules support
│ ├── css.js # CSS processing
│ ├── scss.js # Sass compilation
│ ├── typescript.js # TypeScript transpilation
│ ├── react.js # React specific transforms
│ └── vue.js # Vue single-file components
├── dist/ # Final build artifacts
│ ├── bundle.js # Minified production bundle
│ ├── main.css # Optimized CSS output
│ └── assets/ # Processed static assets
│ ├── logo.svg # Optimized vector logo
│ ├── github-icon.svg # Minified SVG
│ └── images/ # Compressed images
├── [Root Config Files] # Project configuration
│ ├── banana.config.js # Framework-specific settings
│ ├── package.json # NPM package manifest
│ ├── tailwind.config.js # Tailwind CSS config
│ ├── postcss.config.js # PostCSS plugins
│ ├── vite.config.js # Vite build config
│ └── README.md # Project documentation
├── [Supporting Files] # Auxiliary project files
│ ├── .env # Local environment variables
│ ├── .gitignore # Version control exclusions
│ ├── yarn.lock # Yarn dependency tree
│ ├── registry.js # Plugin registry API
│ └── marketplace.js # Plugin discovery system

Explanation of Files and Folders

1. public/ index.html: The main HTML file for the website.

styles/main.css: The global CSS file (processed by Tailwind CSS).

main.js: The entry point for the application (used in development).

logo.svg: The logo for the website.

github-icon.svg: The GitHub icon for the navbar.

dashboard.html: The dashboard page for monitoring performance.

2. src/ components/: Reusable React components.

Navbar.jsx: The navigation bar component.

Sidebar.jsx: The sidebar menu component.

Footer.jsx: The footer component.

pages/: React pages for the website.

Home.jsx: The homepage.

GettingStarted.jsx: The "Getting Started" page.

Features.jsx: The "Features" page.

Plugins.jsx: The "Plugins" page.

ApiReference.jsx: The "API Reference" page.

Examples.jsx: The "Examples" page.

Blog.jsx: The "Blog" page.

Changelog.jsx: The "Changelog" page.

News.jsx: The "News" page.

router/: React Router configuration.

index.js: The router configuration file.

styles/: Global styles.

main.css: The Tailwind CSS file.

App.jsx: The root React component.

main.jsx: The entry point for the React application.

3. plugins/ css.js: Plugin for handling CSS files.

typescript.js: Plugin for handling TypeScript files.

react.js: Plugin for handling React JSX files.

vue.js: Plugin for handling Vue files.

4. dist/ bundle.js: The bundled JavaScript file for production.

main.css: The bundled CSS file for production.

assets/: Static assets (e.g., images, fonts).

logo.svg: The logo for the website.

github-icon.svg: The GitHub icon for the navbar.

images/: Additional images used in the website.

5. Root Files server.js: The development server script.

build.js: The production build script.

banana.config.js: Configuration file for banana.js.

package.json: Project dependencies and scripts.

tailwind.config.js: Tailwind CSS configuration.

postcss.config.js: PostCSS configuration (used with Tailwind CSS).

README.md: Project documentation.

Basic React Project Template for BananaJS

banana-react-template/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── manifest.json
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── Footer.jsx
│ ├── pages/
│ │ ├── Home.jsx
│ │ ├── About.jsx
│ ├── App.jsx
│ ├── main.jsx
│ ├── styles/
│ │ ├── main.css
├── .gitignore
├── package.json
├── README.md
├── banana.config.js
└── tailwind.config.js\