Doodle Frontend Configuration

This module contains the default configuration files for linting and building a frontend module.

How to use it

• Add @doodle/frontend-config to the devDependencies of your Javascript module
• Run yarn
• Follow the instructions contained in each configuration file (i.e. prettier.js, webpack.js, etc...)

The default files contained in this module can be imported and extended in the local configuration files of your project. You can find an example in each configuration file.

As a recommendation, always use javascript configuration files to maintain consistency.

ESLint notes

ESLint is not included in this module, because it requires a dedicated module. You can find it at DoodleSchedulint/eslint-config

Publishing

When you want to publish a new version of the module, create a git tag: it will be published by Jenkins using TagFlow

$ git tag pub.1.0.0
$ git push origin pub.1.0.0

When Jenkins published the library version successfully, TagFlow will notify on the #web-notifications channel.

💡 package.json's version field is set to 0.0.0 as the version comes from git tags.

Webpack

You will find two configuration entry points for webpack.

webpack.react.v1.js

This file is used by the first react stack that we implemented, which usually includes an express server with proxy for local development. Examples of projects that started with this configuration are web-billing, web-settings and web-auth.

webpack.react.js

This configuration is for the second generation of frontends, implemented for example by web-unified-dashboard.

Config Automation

This module comes with some automation to ease the creation and validation of frontend projects.

postinstall script

When you install this module as dependency, the postinstall script will be executed. The script creates the boilerplate files if they are not present.

validation script

You can run the project validation script to check that all the necessary files are present in your frontend project.

Running commands (⚗️ Experimental)

This module comes with an experimental tool to run commands. Commands are simply scripts that can be run via command line. Its purpose is to simplify the package.json's npm scripts. Refer to runbo.js for detailed documentation.