Skip to main content

Structure

Project Structure​

vdkctv/
  .storybook/           -> Storybook configuration
  [build]               -> Generated folder containing compiled code
  docker/               -> Folder for automated CI/CD processes
  docs/                 -> Local documentation files, which can be browsed in Github
  generators/           -> Folder for generators templates for starting Elevate projects
  helpers/              -> Helper files i.e: User Mock server, generating prod package.json or starting dev servers
  [node_modules]        -> Generated folder where all NPM dependencies will be downloaded
  platforms/            -> Specific to certain platforms (e.g. Java files for AndroidTV)
  src/                  -> Main code folder
    __mocks__/          -> mocks
    __tests__/          -> Unit tests
    client/             -> Client side entry
    components/         -> Stateless 'dumb' presentational components
    config/             -> Routes, templates, app and server configurations
    containers/         -> Stateful 'smart' components
    context/            -> React Context related files
    hooks/              -> React Hooks related files
    models/             -> Models consumed from the services and view
    providers/          -> React Providers related files
    services/           -> Collected services
    static/             -> Static files such the index.ejs template
    theme/              -> Breakpoints and theme values
    utils/              -> Functions to be used in different parts of the app
    views/              -> Views components for every defined route
  webpack               -> webpack configurations for DEV and PROD

  [coverage]            -> Code coverage information (created by `npm test`)
  .browserslist		      -> BrowserList to target specific browsers with babel transpile
  .eslintignore         -> ESLint ignore patterns
  .eslintrc.js          -> ESLint configuration
  .gitignore            -> Git ignore patterns
  .prettierrc           -> Prettier configuration
  .stylelintrc.js       -> Style ling configuration
  adr.md                -> Architecture decision records file
  babel.config.js       -> Babel transpiling configuration
  changelog.md          -> Changes register file
  CONTRIBUTING.md       -> Guidance for contributions
  [db.json]             -> Json with login information for dev purposes
  jest.config.js        -> Jest testing framework configuration
  jsdoc.js              -> Configuration file for JSDoc static generation
  KNOWN_ISSUES.md       -> Record file with known issues of the application
  package.json          -> NPM project definition file. Dependencies, scripts and configuration
  README.md             -> Read me file
  tscheck.json          -> Check for TS files
  tsconfig.json         -> Typescript configuration file. Allow us to use alias within VSCode
  tsling.json

Notes​

  • Names wrapped in [] are not tracked by Git.
  • src/client/client.js: Only called in the client app

Conventions

We try to use a structure including a folder with an index and a main javascript file with the logic. Views folder is not following that due to react-suspense strategy. This way we can import the folder without specify the file or the need of import an index and coherce the specific module wihin a constant

Folder structure​

src/
  services/
    i18n/
      index.js  -> just exports the i18n import
      i18n.js   -> exports all the required modules

Consuming modules

import i18n from "#/services/i18n"

High-Level App Structure​

Both entry points will import two important sections, although they will configure them in a different manner:

  • src/containers/App/App.js:
    • Contains the AppContent or AppShell
    • Holds components like the WelcomeMessage in web or handles the key listeners on TV
    • It is outside of the router
  • src/config/routes.js will be passed to React Router
    • src/views/ViewContainer/ViewContainer.js:
      • The layout wrapper applied to all routes
    • src/views/VikimapPege/ModularPage.js:
      • One of the most important views, will use the route to fetch Accedo One and render the entries

Module Aliases​

We use path alliases to improve the readability of the code.

Original

import i18n from '../../../services/i18n';

With Aliases

import i18n from '#/services/i18n';

If you need more info about module aliases configurations for all the involved tools please check the next links