Environment

This page describes basic environment setup of TheFramework everything from file structure to configurations.

File Structure

Basic directory tree of an empty project looks like this:

├───.github
│   └───workflows
├───.vscode
├───env
├───dist
└───src
    └───components
        ├───app
        │   ├───controllers
        │   ├───models
        │   ├───services
        │   ├───views
        |   |
        │   └───app.ts
        ├───common
        └───tests
            ├───app
            ├───common
            └───env

Let's go through this one by one.

• .github - GitHub specific directory, it contains predefined "Build & Test" workflow setup with GitHub Actions.
• .vscode - This directory contains configuration for VSCode code editor setup. Which includes build, debug and test tasks for every environment.
• env - Most of the environment configurations lie here. It has testing configurations, webpack setup and framework specific linters and loaders.
• dist - This directory you will not have on the first installation, but it will come up on you first project build. As you might have guessed the files inside are you build artifacts that you might want to distribute or deploy.
• src - The heart of the project. All of your source code lies here as well as the entry point to the application.
  • components - Here are the components of you project which are basic building block of the entire system.
    • common - All TheFramework internal logic lies here. Feel free to modify it if you need that for some reason.
    • tests - Here are framework's unit tests which could be deleted from your project if you do not need them. As well as you application test that you might write later are also meant to be in this directory. Its structure sort of replicates the components folder but also contains tests for the environment.
    • app - This is a place for your application to be. You'll likely to spend most of your time in this directory.
      • controllers/models/services/views are directories for types of components of you application. You can read more about each type in the documentation.
      • app.ts - The file of you application. You register components here, define their global configurations and handle communication between them.