Skip to main content

Folder Structure

After creation with FrontHub CLI, your project should look like this:

my-project/
  ci/
  packages/
    components/
    core/
    main/

The root directory intend to be stored as a monorepo managed by Lerna.

The packages directory contains all microfrontends separated by packages.

note

Although it is possible to rename the packages directory in the Lerna configuration, or to define others, it is advisable to maintain the current standard to facilitate the adoption of future versions of FrontHub.

Packages​

FrontHub creates the follow packages by default:

  • components: Presentational components shared within the same monorepo.
  • core: Shared business rules within the same monorepo.
  • main: To advance, the monorepo is already started with a microfrontend package created. The name is defined during the CLI wizard.

The components and core are packages with their own rules within FrontHub with the aim of reusing code.

Shareable code

For now, the reuse of code between different projects/monorepos it is advisable to use a lib published on an NPM server and installed in the conventional way like any other npm package.

components​

The components package must contain only presentational components that will be reused between packages within the same repository as it is.

The following rules must be followed:

  • Must not have fixed text to avoid translation problems
  • Must not have business logic or behavior
  • Must not have backend integration or any other API
  • Must have only presentational components (dumb)

Ideally, most components should be provided by a Design System through one or more npm packages.

This structure makes the project organization simpler and easier to manage as shown in the diagram below:

FrontHub sharable code structure


Be careful with excess abstraction! Read about AHA Programming and the dangers of hasty abstractions. If you're still not convinced, watch Dan Abramov's The wet codebase lecture on the subject.

Some references to help create presentation components:

core​

The core package has the same objective as the components package, but it aims to be a package that exports business rules with only pure JavaScript, such as constants, classes and functions. You can also centralize connection rules with the third-party backend and API.