Project file hierarchy

Constants

Place constants in to directory ./constants.

For example:

  • CSS Class names to ./constants/className.ts
  • Translation tokens to ./constants/translation.ts
  • Environment variables (e.g. build parameters) to ./constants/environment.ts
  • Global constants for frontend to ./constants/frontend.ts
  • Backend specific constants like URLs to ./constants/backend.ts

Utils

Place utils in to directory ./utils.

Sometimes it's ok to place them also in ./services. Just make sure you use clear naming as FooUtils.

Services

Place services in to directory ./services.

Styles

Place shared styles -- e.g. variables and themes -- in to directory ./styles.

Note! You should place other styles (usually related to layout) directly beside the component in question.

Components

Place components in to ./component/componentName/componentName.tsx and ./component/componentName/componentName.scss.

The name should always have the same name as the class/function.

The SCSS for this component should be located in the same directory and imported from the componentName.tsx file.

Use only CSS classes. Use of ids will make is more likely that you need to do use !important.

Types

Place types to subdirectory ./types in the folder where the type should be used and named by the type's name.

E.g. if that's only internal type for a service, use services/types/fooEnum.ts.

If it's just for a component, use components/componentName/types/fooEnum.ts.

If it's a global type, use types/fooEnum.ts.

Shared modules

If your project has shared code between backend and frontend, create a new git shared submodule for that.

Place files related to this module to us a domain specific naming. E.g. we have a domain nor.fi, so our files go under src/fi/nor/moduleName.

You may also use {types,components,utils,services} naming under this submodule if it suits you.

Sometimes these subdirectories could also be their own git submodules. We do this with our UI related modules. That way we can work with different styles in different branch without changing other parts of the system.