Folder Structure
When you open your project in your favourite code editor ( Let's say VSCode ), the might see that the folder structure looks something like this:
⚠️
You might notice that certain folders or files, such as .vscode, may or may not be present in your project.
.docker // Used in the context of a Docker setup with NGINX.husky // Configures pre-commit hook using Husky for Git lifecycle events.vscode // Configurations for Visual Studio Code editor settings and preferencesapps // We will check it latercapistrano // Automates deployment tasks for web applicationscapistrano-pm2 // Automates deployment tasks for web applicationsnode_modules // Contains dependencies & 3rd party packages installed for a the projectpackages // Contains configurations for the console and core packagepatches // Provides modifications or fixes for existing code or dependenciesscripts // Contains files that handles operations for services.dockerignore // Specifies files and directories to exclude during Docker builds.drone.yml // Defines CI/CD pipeline configuration for the Drone CI tool.editorconfig // Provides consistent coding styles across different editors and IDEs.eslintignore // Lists files and directories to exclude from ESLint linting.eslintrc.json // Configures ESLint rules and settings for code linting.gitignore // Lists files and directories to exclude from Git.hygen.js // Configuration file for Hygen, a code generator tool.prettierignore // Specifies files and directories to exclude from Prettier formatting.prettierrc.json // Configures Prettier code formatting rules and settingsbabel.config.js // Configuration file for Babel, a JavaScript compilerdocker-compose.yml // Defines the services, networks, and volumes for Docker ComposeDockerfile // Contains instructions for building a Docker imageDockerfile.staging // Dockerfile variant for staging environment imagelerna.json // Configuration file for Lerna, a tool for managing JavaScript projects with multiple packagespackage.json // Manifest file that defines dependencies, scripts, and metadata for the projectpm2.production.config.js // Configuration file for PM2, a process manager for Node.js applications in productionREADME.md // Documentation file providing an overview and instructions for the projecttsconfig.json // Configuration file for TypeScript, a typed superset of JavaScriptturbo.json // Configuration file for Turbo, a tool for high-performance development workflowsyarn.lock // Lock file generated by Yarn, specifying exact versions of dependencies for reproducible builds
Now, let's examine the folder structure within the apps directory. We will use starter
as an example since it serves as the starting point for creating/cloning new projects:
apps // this folder contains multiple projects/workspaces|------ documentation // a workspace responsible for documentations ( the one you are reading now )|------ starter // a workspace responsible for Vactory Main project|------|------ .next // Generated build output folder for Next.js project|------|------ .runtime // Internal folder for Next.js runtime files|------|------ .storybook // Configuration files for Storybook, a UI development environment|------|------ .webpack // Custom Webpack configurations for Next.js project|------|------ components // Reusable UI components folder|------|------ context // Folder for managing React context providers|------|------ hooks // Custom React hooks folder|------|------ icons // Folder for storing icon assets|------|------ lib // Utility functions and modules folder|------|------ pages // Folder containing Next.js page components|------|------ public // Static assets folder accessible from the browser|------|------ styles // Folder for global styles and CSS modules|------|------ themes // Multi-Themes configuration folder|------|------ .env // Local Environment variables file|------|------ .env.example // Example file for environment variables|------|------ middleware.js // Custom middleware configurations for Next.js|------|------ next.config.js // Custom configuration file for Next.js|------|------ package.json // Manifest file defining project dependencies and scripts|------|------ postcss.config.js // Configuration file for PostCSS, a CSS preprocessor|------|------ project.redirects.csv // CSV file for managing redirects in the project|------|------ project.redirects.js // JavaScript file for managing redirects in the project|------|------ tailwind.config.js // Configuration file for Tailwind CSS, a utility-first CSS framework|------|------ tsconfig.json // TypeScript configuration file for Next.js project