Directory Structure


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, but make sure to use the corresponding Node.js imports and don’t rely on Supercharge’s globals then.

Supercharge’s directory structure is inspired by the Laravel PHP framework. At first, it may overwhelm due to all the existing directories. You’ll quickly understand their use-case and value. It becomes a predictable and extensible architecture that is a joy to work with.

New Supercharge applications don’t contain all folder by default to reduce noise. When extending your application by scaffolding files with Craft, they are created for you automatically.

Supercharge’s Application Directory

The “app” Directory

The app directory is the core of your application. Everything related to your application should go in there. This directory contains subdirectories that we’ll explore soon.

The “bootstrap” Directory

This directory contains all files related to Supercharge’s application lifecycle. It contains the app.js file allowing you to extend Supercharge with packages from the community by registering the related bootstrappers. It also contains the lifecycle.js file that allows you to intercept the application start and stop procedures.

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, like JavaScript, CSS, and images.

The “resources” Directory

This directory contains the web views and raw asset files. Put all your JavaScript or CSS files in the resources directory if you create a build pipeline. Reference the final build output to the publicfolder, 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 should read the Testing section.

The “app” Directory

This directory contains the important files of your application, like routes, models, middleware, and more! You’ll find pre-configured directories, like routes and plugins. These directories build a starting point for you to extend and separate concerns.

When starting a Supercharge server, it will automatically look folders in the app directory to auto-load.

The “auth“ Directory

This directory contains all your authentication related schemes and strategies. For example, an authentication strategy can be session-based authenticating requests using a session. You can read more on authentication and how it’s handled in Supercharge in the related authentication docs.

The “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. For example, scaffolding authentication in Supercharge will create a UserRegistered event that fires on user sign-up.

Add event listeners to, for example, send a welcome email to the newly registered user.

The “listeners“ Directory

This directory contains all your event listeners. The listeners are classes that wait for a specific event to fire and then handle it. For example, you can add a SendWelcomeMail listener that waits for the UserRegistered event to fire and then send out a welcome email.

The “mails“ Directory

Mailables in Supercharge are JavaScript classes. Create all the emails you want to send out as a class.

The “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 “models“ Directory

The models directory stores all your application models. Supercharge will create a User model when scaffolding authentication. You can use and extend and update this model to your needs.

The “plugins“ Directory

Supercharge uses hapi as the HTTP core and hapi uses plugins to isolate functionality in reusable components. Compose your own plugins and place them into the plugins directory. Supercharge will auto-load them when starting the HTTP server.

The “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.

Supercharge’s default application structure gives you a solid starting point for development. If you feel like there’s something missing or in the wrong place, go ahead and create additional directories or move them around. Don’t hesitate to change the structure.