Creating a new plugin app

Creating a new plugin app

The first step in creating a new plugin for the DAaaS frontend is to create a new Git repository. You will also need the same tooling as for the parent app specified here

Once you have this then you can run create react app to make a new app and push to you new repo.

To make a new react app with Typescript support run:

npx create-react-app my-app --typescript

Modifying the app to be a plugin

TODO

Adding static code analysis

Using Prettier and ESLint

Plugins should use Prettier and ESLint as their static code analysis tools - this provides a standard without having to debate code styles and rules. They can also be enabled as a pre-commit hook that should fix most of the issues automatically.

npm install --save-dev [email protected] @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Add a .eslintrc.js file at the top level with the contents from the .eslintrc.js in this code base.

Add a .prettierrc file at the top level with the contents from the .prettierrc in this code base

Integrating the code analysis in to a pre-commit hook

Install Husky

npm install --save-dev husky lint-staged

then update package.json with the following sections

  "lint-staged": {
    "src/**/*.{tsx,js,jsx,json}": [
      "eslint --fix",
      "prettier --config .prettierrc --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

Running code analysis from npm scripts

Add a new line to the scripts section of package.json:

"scripts": {
    "lint:js": "eslint --ext=tsx --ext=js --ext=jsx --fix ./src",

then to run the linting from the console use

npm run lint:js