Frontend development at dictyBase

frontend-development.md

Frontend development at dictyBase

React javascript framework is currently being used for all development. Below is a list of default tools, setups and configurations that are recommended for development.

React web applications

• Create-react-app - Default tool for scaffolding a web application. The rest of the setup are mostly derived from this tool.

• Linting with ESLint setup - Makes sure the editor adheres to the webpack setup with eslint.

• Code formatting with prettier - Integrating with eslint is not recommended, instead allow it run independently. It should also be integrated with your editor of choice. Use the following command line for prettier ...

  "lint-staged": {
    "src/**/*.{js,jsx,json,css}": [
      "prettier --no-semi --trailing-comma all --jsx-bracket-same-line true --write",
      "git add"
    ]
  },
  

• Static type checking with flow - Use flow-typed to add support for 3rd party libraries. Also make sure to ignore the node_modules folder in the .flowconfig file. Here's what a basic config file should look like ...

     [ignore]
     <PROJECT_ROOT>/node_modules/*
  
     [include]
  
     [libs]
  
     [options]
  
     [lints]
  

  Modules lacking flow-typed definitions can added by creating a stub.

      flow-typed create-stub module@version
  

  Let flow ignore source code line by adding // $FlowFixMe on the top.

• Component in isolation - Use styleguidist for that.

• Additional modules - For managing css and reusable UI components install styled-components and rebass.

    npm i --save dev styled-components rebass
  

Standalone React components

• Using library mode of nwb - Default tool for scaffolding a standalone library component(s). The rest of the setup are will be tailored to this tool.

• Linting with ESLint setup

  • Replicate the eslint setup of create-react-app.

        npm i --save-dev eslint-config-react-app [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
    

    Then add the following to .eslintrc file.

        { "extends": "react-app" }
    

  • To integrate with webpack(similar to cra), first install the following ...

        npm i --save-dev react-dev-utils [email protected]
    

    Then add the following configuration in nwb.config.js file

        var eslintWebpack = {
          module: {
            rules: [
              {
                test: /\.(js|jsx)$/,
                enforce: "pre",
                use: [
                  {
                    options: {
                      formatter: require("react-dev-utils/eslintFormatter"),
                    },
                    loader: require.resolve("eslint-loader"),
                  },
                ],
                exclude: /node_modules/,
              },
            ],
          },
        }
    

    Then append the following to module.exports

          webpack: {
            extra: eslintWebpack,
          }
    

    It should look like this....

        module.exports = {
          type: "react-component",
          npm: {
            esModules: true,
            umd: false,
          },
          webpack: {
            extra: eslintWebpack,
          },
        }
    

• Code formatting with prettier - Should be identical to the above setup with cra.

• Static type checking with flow - Should be identical to the above setup with cra.

• Component in isolation

  • The initial installation of the packages will be identical with cra.

        npm i --save-dev react-styleguidist
    

    Then add scripts to package.json

        "styleguide": "styleguidist server",
        "styleguide:build": "styleguidist build"
    

  • Depending on the location, modify how to find the component files in styleguide.config.js. For example,

        module.exports = {
            components: "src/*.js",
        }
    

  • After that install cra babel preset

        npm i --save-dev babel-preset-react-app 
    

    and add the following to .babelrc

        {"presets": ["react-app"]}
    

    Then add the following webpack configuration in styleguide.config.js right after the components section ...

      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: "babel-loader",
            },
            {
              test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: "url-loader",
            },
            {
              test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: "file-loader",
            },
            {
              test: /\.(jpg|png)$/,
              exclude: /node_modules/,
              loader: "url-loader",
              options: {
                limit: 25000,
              },
            },
            {
              test: /\.css$/,
              use: [{ loader: "style-loader" }, { loader: "css-loader" }],
            },
          ],
        },
      },
    

• Unit testing with jest

  • Install required packages

        npm i --save-dev jest babel-jest react-test-renderer
    

  • Add jest to the scripts section of package.json

        "scripts": {
            "test": "jest"
        }
    

  • Add test file preferably in the same folder as the component. If possible, start with snapshot testing

  • Configure jest to manage static assets similar to the handling by webpack. First add the following to the package.json.

      // package.json
      
       "jest": {  
         "moduleNameMapper": {  
               "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",  
               "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"  
        }  
       },
    

  And then create two mock files

  // mocks/styleMock.js
  module.exports = {}

  // mocks/fileMock.js
  module.exports = 'test-file-stub'

  • Then run the test by
    npm test

    Or watch and run tests on only changed files
    npm test -- --watch

GistID: bc9025e4413c3e3dbf748d3916c7039e