Folder Structure

Understanding the project organization is crucial for efficient development and maintenance. This guide explains how the NextSaaS HTML template is structured.

Project Structure#

next-saas-html/
├── public/                # Static assets (images, icons, Font)
│   ├── images/            # Image assets organized by page
│   ├── fonts/             # Custom icons fonts
│   ├── video/             # Video assets
│   └── vendor/            # Third party packages
├── src/
│   ├── components/        # HTML components
│   │   ├── pages/         # Page-specific components
│   │   └── shared/        # Shared components (header, footer)
│   ├── js/                # JavaScript modules
│   │   ├── animation/     # Animation scripts
│   │   ├── common/        # Common utilities
│   │   └── utils/         # Utility functions
│   ├── styles/            # CSS stylesheets
│   └── main.js            # Main JavaScript entry point
├── *.html                 # HTML page files
├── package.json           # Dependencies and scripts
├── post-build.js          # Build hook for change filename after the build
├── vite.config.js         # Vite configuration
└── README.md              # Basic installation guide

Key Directories#

public

Contains all static assets including images, icons, videos, fonts ,logos and third party package. Files here are served directly without processing.

src

The main source directory containing all development files:

• components/: Reusable HTML components and page-specific elements
• js/: JavaScript modules for animations, utilities, and common functions
• styles/: CSS stylesheets for styling the application

Root Files

- HTML files: Individual page files in the root directory - Configuration files: package.json, Vite config, and documentation files

This structure promotes modularity, maintainability, and easy navigation throughout the project.