Skip to content

Environment

Jump to bottom
Azarattum edited this page Nov 19, 2020 · 14 revisions

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.

Technologies

This is a complete list of technologies that are configured to be used in TheFramework:

  • NPM - Package manager for JS. As well as a great script runner. You should already know how to use this thing, if not go and learn it right now you like really need it!
  • TypeScript - JavaScript language preprocessor that brings static typing, great intellisense and compile time error catching. You need to know at least basics of it to be able to write TF applications. (Learn TypeScript if you haven't yet, it worth you time!)
  • Webpack - An ultimate application blunder. Complies you source code down to a single (almost) file, does loaders optimizations and lots of other cool stuff. You don't really have to know how it works as it's already comes preconfigured with the framework, but understanding it would be handy if you are planning to work with some loaders or weird file types.
  • Pug - HTML preprocessor that lets you write cleaner layouts. Also some integrations are implemented to sync pug layouts with TF's data binding. It's extremely intuitive to use, you'll learn it like in a minute.
  • SASS - A powerful CSS extension. It really helps to organize your styles with nesting feature and has lots of other cool things. Check it out!
  • Jest - A testing library that is used in TF. You can write your tests fairly simple and it gets job done. Learn it if you are planning on testing your future application.
  • ESLint - A tool that helps you write cleaner code. Comes preconfigured and with some custom TF-specific rules.
  • Prettier - Forget about manual code beautification forever! This tools does it all for you following the awesome configs provided by TF.

VSCode Integration

Tasks

VSCode tasks are configured to build you project (with Ctrl+Shift+B) and debug you code (with F5) attaching to Chrome or run your Node app in debug mode.

Extensions

List of VSCode extensions you need to use the full power of all the technologies used in TheFramework.

NPM Scripts

These scripts are used to do all kinds of things with your application. There is a brief summary of them is in the README.md file. You can use the scripts with VSCode by pressing Ctrl+R, Shift+R or Ctrl+Shift+P then typing npm: Run Script or by typing in terminal:

npm run <script>
  • start - Starts your application, which is either a webpack development server or your node app, depending on the environment.
  • release - Builds a production version of your project into ./dist folder with all minifications and optimizations in place.
  • build - Builds your application with webpack including all the debug info like source maps.
  • watch - Watches all file changes and rebuilds them if necessary.
  • test - Runs all your tests with Jest.
  • coverage - Generates a coverage report by testing code.

Note that start and test scripts could be also used with shortcuts:

npm start #Start script
npm t #Test script
npm test #Test script
Clone this wiki locally