01-application-file-tree.md 11 KB
Application file tree
This wiki page details how the application file tree is structured.
Summary
- Project's general file structure
/docsdirectory/distdirectory/imagesdirectory/logsdirectory/serverdirectory/srcdirectory/testdirectory
Project's general file structure
The following file tree represents the full application.
. ||
├── babel.config.js ||
├── back.Dockerfile || Back-end Docker configuration
├── cleanExtracts.js || Extracts remover service
├── config.js || Application configuration
├── config.messagesId.js || Database message identifiers
├── data || Database (Docker)
│ └── ... ||
├── docs || Generated API documentation
│ └── ... ||
├── docker-compose.frontapp_only.yml || General Docker configuration for a front-only instance
├── docker-compose.yml || General Docker configuration
├── DOCUMENTATION || This documentation
│ └── ... ||
├── dist || Generated Front-end files (build)
│ └── ... ||
├── experimentConfig.default.js || Default experiments configuration
├── experimentConfig.js || Experiments configuration
├── front.Dockerfile || Front-end Docker configuration
├── images || Experiments images (Can be configured)
│ └── ... ||
├── index.js || Server + Extracts remover service starter
├── jsconfig.json ||
├── LICENSE || Application license
├── logs || Application logs
│ └── ... ||
├── package.json || Project's scripts, dependencies and configuration
├── public || Static front-end files
│ ├── favicon.ico || Website favicon
│ └── index.html ||
├── README.md ||
├── server || Server and database code
│ └── ... ||
├── src || Front-end code
│ └── ... ||
├── test || API automated tests
│ └── ... ||
├── webhook_deploy_gogs.js || Continuous integration script
└── yarn.lock || Project's dependencies versions lock file
/docs directory
The /docs directory contains the generated API documentation. This documentation is accessible through /doc on the website and describes every routes of the API.
To generate the documentation, use the following npm script:
yarn doc
/dist directory
The /dist directory contains the build output of the Front-end of the application. It is bundled with WebPack to contain only HTML/CSS/JavaScript files.
To generate the Front-end files, use the following npm script:
yarn app:build
/images directory
The /images directory contains all the images available for the experiments.
This path is the default one, but you can configure it by setting an absolute path with the IMAGES_PATH environment variable when running the application.
└── images ||
├── Appart1opt02 || A scene directory
│ ├── appartAopt_00890.png || Scene images
│ ├── ... ||
│ └── extracts || Images extracts cut by the server
│ ├── x4_y4 || A cutting configuration (4 and 4 cuts on x and y axis)
│ │ ├── zone00001 || Image extract zone 1 (top left of image)
│ │ │ ├── Appart1opt02_zone00001_00020.png || The actual extract (x4_y4 config, zone 1, quality 20)
│ │ │ └── ... ||
│ │ └── ... ||
│ └── ... ||
└── ... ||
/logs directory
The /logs directory contains all the logs of the application.
└── logs ||
├── db.error.log || Database errors
├── db.log || Database logs
├── extractsRemoverService.error.log || Extracts remover service errors
├── extractsRemoverService.log || Extracts remover service logs
├── server.combined.log || Server combined logs
└── server.error.log || Server errors
/server directory
The /server directory contains the Back-end: server and database code.
└── server ||
├── database || Database link
│ ├── controllers || Database controllers (Functions)
│ │ └── Data.js ||
│ ├── index.js || Database link module: connects to database and links models
│ └── models || Database models (Schemas, types)
│ └── Data.js ||
├── functions.js || Common utils for the server
├── index.js || Server module: links server and database
├── routes || All API routes
│ ├── index.js || Router module to inject all routes
│ ├── getImage.js ||
│ └── ... ||
└── winston.config.js || All the server's logging configuration
/src directory
The /src directory contains the Front-end code.
└── src ||
├── App.vue || Main template, defines how the page looks
├── components || Common components
│ ├── ExperimentsComponents || Experiment-specific components
│ │ ├── ExtractConfiguration.vue || Extracts configurator
│ │ └── ExtractsToImage.vue || Shows multiple extracts as a unique image
│ ├── Loader.vue || Loading component
│ ├── ResetAppButton.vue || Global application reset button
│ └── ToastMessage.vue || Show a temporary toast message
├── config.utils.js || Some utils related to experiments configuration files
├── functions.js || Common utils
├── main.js || Vue modules and plugins register
├── mixins || Experiments bases: contains utils for a type of experiment
│ ├── ExperimentBaseAreSameImages.vue || Images versus based experiment base
│ ├── ExperimentBaseExtracts.vue || Extracts-based experiment base
│ └── ExperimentBase.vue || Global experiment base, used in every experiments
├── plugins || Vue.js plugins
│ └── vuetify.js || Vuetify design framework
├── router || Vue-router (routing logic)
│ ├── experiments.js || Experiment-specific routing logic
│ └── index.js || Main routing logic
├── store || VueX store (global state management)
│ ├── actions.js || Store actions (can be async)
│ ├── getters.js || Compute store state values
│ ├── index.js || Store module
│ ├── mutations.js || Store mutations (must be synchronous and atomic)
│ └── state.js || Store initial state
├── style.css || Global application style
└── views || Application views (pages)
├── Experiments || Experiments
│ ├── AreSameImagesRandom.vue || Two random quality images (versus)
│ ├── AreSameImagesReferenceOneExtract.vue || Two reference images, one has a random quality extract (versus)
│ ├── AreSameImagesReference.vue || One random quality image, one reference image (versus)
│ └── MatchExtractsWithReference.vue || Lowest quality extracts, match them to reference image
├── ExperimentsList.vue || A list of all available experiments
├── ExperimentValidated.vue || The experiment ending screen
├── GdprNotice.vue || The GDPR notice
├── HostConfig.vue || The application host configuration
└── SelectExperimentScene.vue || Experiment scene selector
/test directory
The /test directory contains the automated tests of the application.
└── test ||
├── api || API tests
│ ├── getImage.js || A test file
│ ├── ... ||
│ ├── _test_functions.js || Common utils for the tests
│ ├── _test_setup_start.js || Script called before running all the tests
│ └── _test_setup_stop.js || Script called after running all the tests
└── images_test || Some experiment images copied for tests
└── ... ||
To run these automated tests, use the following npm script:
yarn app:build