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

Adding unit testing

Create React App adds Jest unit tests by default and these are a good starting point. As well as these we want to add Enzyme to be able to do snapshot testing:

npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

We should then update the test script in package.json to also run coverage

"test": "react-scripts test --env=jsdom --coverage",
"test:watch": "react-scripts test --env=jsdom --watch",

Then add a new jest section to package.json to exclude top level untestable files as well as configuring enzyme as the serialiser:

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ],
  "collectCoverageFrom": [
    "src/**/*.{tsx,js,jsx}",
    "!src/index.tsx",
    "!src/serviceWorker.ts",
    "!src/setupTests.js"
  ]
},

Finally, add a src/setupTests.js file that is automatically picked up by CRA and configures Enzyme when running the tests, the contents of which can be found here