- Application Directories
- Details about the
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
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.
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.
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.
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.
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.
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.
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
This directory contains the important files of your application, like HTTP
providers and more! You’ll find pre-configured directories, like
providers in every new application. These directories build a starting point for you to extend and separate concerns.
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.
This directory contains all HTTP related files, like the kernel,
middleware. You’re going to create HTTP controllers and reference them in the
routes/web.ts file during the development of your application.
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.
This directory includes all your HTTP middleware. Supercharge auto-loads all files in this directory and registers them as middleware to the HTTP core.
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.
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.
models directory stores all your application models. You should check out the database section showing you all the details to interact with SQL databases.