HTML
Folder Structure
Understand how the Nexsas HTML project is organized.
Understanding the project organization is key for efficient development and maintenance.
Nexsas HTML includes two folder structures:
- Production-ready package (ready to upload/use directly)
- Development source package (used for editing and rebuilding)
Production-ready structure
Example: ai-application
ai-application/
├── *.html # Final compiled HTML pages
├── assets/ # Compiled CSS/JS and related assets
├── images/ # Production image files
├── fonts/ # Font files
├── vendor/ # Third-party libraries
├── favicon.ico
├── favicon.svg
├── favicon-96x96.png
├── apple-touch-icon.png
└── site.webmanifest
Use this package when you only need to deploy or edit final output files.
Development structure
Example: ai-application
ai-application/
├── src/
│ ├── components/ # Reusable and page components
│ │ ├── pages/
│ │ └── shared/
│ ├── js/ # JavaScript modules
│ │ ├── animation/
│ │ ├── common/
│ │ └── utils/
│ └── styles/ # CSS source files
├── public/ # Static assets used during build
│ ├── fonts/
│ ├── images/
│ └── vendor/
├── *.html # Entry page templates
├── dist/ # Build output generated by the dev/build process
├── package.json # Scripts and dependencies
├── vite.config.js # Vite configuration
├── post-build.js # Post-build processing script
└── yarn.lock
Use this package when you want to customize source code and rebuild the project.
Key differences
- Production package: only final output files, no source editing workflow
- Development package: includes
src/, tooling, and build scripts dist/folder: appears in development projects after/build process, not in production-ready package