Directory Structure
Overview
Supercharge gives you a default directory structure that should work well for small and large applications. The Supercharge framework tightly integrates with the given application structure by loading files from directories in your app folder.
Of course, you’re free to modify the application structure. Make sure to update the corresponding Node.js imports when renaming folders or moving files.
Supercharge’s directory structure is inspired by the Laravel PHP framework. We find this directory structure provides a predictable and extensible architecture that is a joy to work with.
New Supercharge applications contain only the needed folders by default. Not adding all folders reduce the project’s noise. Required folders and files are created when extending your application by scaffolding files with the Craft CLI.
Application Directories
The app Directory
The app directory is the core of your application. It contains all application-related files, like the HTTP kernel and controllers, CLI commands, database models, events and event listeners. This directory contains subdirectories that you’ll explore later on this page.
The bootstrap Directory
This directory contains all files related to Supercharge’s application bootstrapping. The providers.ts file ist required by the Supercharge framework and imported during application bootstrapping. All other files are usually part of the application start or bootstrapping.
The config Directory
The config directory contains all your application configuration files. Have a look at the individual configuration files to become familiar with the available options to customize Supercharge’s behavior.
The public Directory
This directory includes all your asset files that are available publicly from the Internet, like JavaScript, CSS, or image files.
The resources Directory
This directory contains the web views and raw asset files. You should put your JavaScript or CSS files in the resources directory when creating a build pipeline.
For example, when using TailwindCSS put your source CSS files into a resources/css directory. The build output of the these files should point to the public folder, because Supercharge serves assets in your web views from there.
The storage Directory
All files generated by the framework should go into the storage directory. For example, logging to a file would store the log file within this storage folder. If you need to store something from your application, point the file handling to this directory.
The test Directory
This directory includes all your application tests. To get started with testing in Supercharge, you can get inspiration from tests of this website: check out the test directory of the superchargejs.com GitHub repository.
Details about the app Directory
This directory contains the important files of your application, like HTTP controllers, middleware, or models, events, providers and more! You’ll find pre-configured directories, like http, console, or providers in every new application. These directories build a starting point for you to extend and separate concerns.
The app/console Directory
This directory contains the console kernel and commands. You’ll find a single console/commands/inspire file in a new application. This command outlines a CLI command and serves as an inspiration.
The app/http Directory
This directory contains all HTTP related files, like the kernel, controllers or middleware. You’re going to create HTTP controllers and reference them in the routes/web.ts file during the development of your application.
The app/http/routes Directory
This directory contains all your HTTP server’s routes. When starting the server, Supercharge will load all files from the routes directory and register them to the server.
The app/http/middleware Directory
This directory includes all your HTTP middleware. Supercharge auto-loads all files in this directory and registers them as middleware to the HTTP core.
The app/events Directory
You may guess what this directory contains (and you’re right): event classes. Use events to notify listeners about an action. Events are a great way to decouple logic into separate parts.
The app/listeners Directory
This directory contains all your event listeners. The event listener classes are the handler that runs when a specific event is fired. For example, you can add a SendWelcomeMail listener that runs when a UserRegistered event was fired to send out a welcome email.
The app/models Directory
The models directory stores all your application models. You should check out the database section showing you all the details to interact with SQL databases.