Skip to main content

Acro Media NextJS starter kit

Description​

Sets up nextJS with pre-configurations used by Acro Media.

These include but not limited to:

  • `.gitlab-ci.yml
  • .eslintrc and .prettierrc created with Acro configurations
  • cypress.json with support for component testing and code coverage
  • commitlint.config.js with commitlint configuration
  • lagoon configurations
  • packages:
    • Json normalizer
    • Cypress test framework
    • axios
    • commitlint
    • commitizen
    • eslint plugins
    • husky

How to use​

Access this via the global gesso script

  • pnpm create @acromedia/gesso PROJECT_NAME

Working with the package​

Template conditionals​

Within the package, you'll encounter the templates directory, housing the default Gesso template files. These files may contain comments resembling the following, indicating either a platform name such as BigCommerce or a provider name such as CMS:

//_|BIGCOMMERCE|_
    <Code>
//_|/BIGCOMMERCE|_
//_|!CMS|_
    <Code>
//_|/!CMS|_

These serve as conditionals for Gesso to selectively build certain templates. The first set of comments instructs Gesso to include the enclosed code in the template only if the specified platform or provider is chosen, whereas the latter, containing !, adds the code if it isn't chosen.

These tags can also be nested to create more specific conditionals

//_|BIGCOMMERCE|_
    //_|CMS|_
        <Code>
    //_|/CMS|_
//_|/BIGCOMMERCE|_

In this nested example the code will be included only if both BigCommerce and CMS are chosen.

It's important to use these conditionals sparingly. Whenever possible, it's preferred to utilize the dedicated platform or provider's template folder. A good rule of thumb for determining if a template conditional is used in the right context is to ensure that switching platform plugins after the project is built doesn't break any of the project's functionality. If swapping the plugins breaks the project's logic, then this logic should probably be moved into the plugins themselves.