cybersiddhu/frontend-development.md

## frontend-development.md

      
    Raw
  

              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 babel-eslint@7.2.3 eslint@3.19.0 eslint-plugin-flowtype@2.33.0 eslint-plugin-import@2.2.0 eslint-plugin-jsx-a11y@5.0.3 eslint-plugin-react@7.0.1

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 eslint-loader@1.7.1

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