LSR Tooling

Generic tooling for JS apps. Included guides:

• Auto-formatting tool (Prettier)
• Linting tool (ESLint)
• Testing library (Jest)
• Styling library (Material UI)
• Static compilation library (React Static)
• Static hosting (Netlify)
• Configs (e.g. git)

Purpose

Rather than providing a "boilerplate app" to start from, this is instead formatted as a guide that can be used for new AND existing apps, as well as tracking changes to help upgrade old apps.

It can be use by anyone, though I customized the style to my personal preferences.

Usage

Install basic tools

1. npx install-peerdeps --dev --yarn lsr-tooling

2. Add to your package.json:

   1  "scripts": {
   2    "format": "prettier --write '*.{js,md}' --write '{src}/**/*.{js,md}'",
   3    "lint": "eslint --ext .js .",
   4    "clean": "rm -rf build dist artifacts tmp"
   5  },
   6  "prettier": {
   7    "singleQuote": true,
   8    "trailingComma": "all",
   9    "proseWrap": "always"
   10  },
   11  "husky": {
   12    "hooks": {
   13      "pre-commit": "pretty-quick --staged"
   14    }
   15  },
   16  "browserslist": [
   17    "defaults",
   18    "not IE 11",
   19    "maintained node versions"
   20  ]

3. Copy in .eslintrc

4. Copy in .gitignore

Optional next steps

Test with Jest

1. yarn add --dev --exact jest jest-watch-typeahead react-test-renderer (automatically includes babel-jest)

2. Add to your package.json:

   1  "scripts": {
   2    "test": "jest",
   3  },
   4  "jest": {
   5    "roots": [
   6      "<rootDir>/src"
   7    ],
   8    "testMatch": [
   9      "<rootDir>/src/**/*.test.js"
   10    ],
   11    "transform": {
   12      "\\.js$": "babel-jest",
   13      "\\.css$": "<rootDir>/config/jest/cssTransform.js",
   14      "^(?!.*\\.(js|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
   15    },
   16    "watchPlugins": [
   17      "jest-watch-typeahead/filename",
   18      "jest-watch-typeahead/testname"
   19    ],
   20    "resetMocks": true
   21  },

3. Copy in config/jest transformers

Style with Material UI

1. yarn add --exact @material-ui/core @material-ui/icons fontsource-roboto

2. Use it:

   1import {
   2  createMuiTheme,
   3  ThemeProvider,
   4  CssBaseline,
   5  makeStyles,
   6} from '@material-ui/core';
   7import 'fontsource-roboto';
   8
   9const theme = createMuiTheme({
   10  // https://material-ui-next.com/customization/themes/#typography
   11  typography: {
   12    // Account for base font-size of 62.5%.
   13    htmlFontSize: 10,
   14  },
   15});
   16
   17const useStyles = makeStyles({
   18  /* ... */
   19});
   20
   21const App = () => {
   22  const classes = useStyles();
   23
   24  return (
   25    <ThemeProvider theme={theme}>
   26      <CssBaseline />
   27      {/* ... */}
   28    </ThemeProvider>
   29  );
   30};
   31
   32export default App;

   1html {
   2  height: 100%;
   3
   4  /* 1 em = 10 px by default. */
   5  font-size: 62.5%;
   6}
   7
   8body {
   9  position: relative;
   10
   11  min-height: 100%;
   12  margin: 0;
   13  padding: 0;
   14
   15  /* Re-enlarge fonts as fallback in case MUI doesn't load properly. */
   16  font-size: 1.4rem;
   17  font-family: Roboto, sans-serif;
   18
   19  /* Always show vertical scrollbar to prevent jumpy navigation. */
   20  overflow-y: scroll;
   21}

Render with React Static

1. Create a template app: npx react-static create
2. Either use their template directly or copy in core files; add to your package.json:

1     "scripts": {
2       "start": "react-static start",
3       "build": "react-static build",
4       "stage": "yarn run build --staging && serve dist -p 3000",
5       "analyze": "yarn run build --analyze"
6     },

1. Integrate with MUI (docs):

   1// plugins/jss-provider/node.api.js
   2import { ServerStyleSheets } from '@material-ui/core';
   3
   4export default () => ({
   5  beforeRenderToHtml: (App, { meta }) => {
   6    // eslint-disable-next-line no-param-reassign
   7    meta.muiSheets = new ServerStyleSheets();
   8    return meta.muiSheets.collect(App);
   9  },
   10
   11  headElements: (elements, { meta }) => [
   12    ...elements,
   13    meta.muiSheets.getStyleElement(),
   14  ],
   15});

   1// static.config.js
   2// Docs: https://github.com/react-static/react-static/blob/master/docs/config.md
   3export default {
   4  plugins: ['jss-provider'],
   5
   6  /* eslint-disable react/prop-types */
   7  Document: ({ Html, Head, Body, children }) => (
   8    <Html lang="en">
   9      <Head>
   10        <meta charSet="utf-8" />
   11        <meta
   12          name="viewport"
   13          content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no"
   14        />
   15
   16        <title>Foo</title>
   17
   18        {/* Favicon: https://realfavicongenerator.net/ */}
   19        {/* Open Graph markup: https://developers.facebook.com/tools/debug/og/object/ */}
   20        {/* Analytics: https://matomo.org/ */}
   21      </Head>
   22
   23      <Body>
   24        <noscript>You need to enable JavaScript to run this app.</noscript>
   25        {children}
   26      </Body>
   27    </Html>
   28  ),
   29  /* eslint-enable */
   30};

Deploy with Netlify

1. yarn add --dev --exact netlify-cli
2. Add to your package.json:

1     "scripts": {
2       "deploy": "yarn run build && netlify deploy"
3     },

Independent dependencies (optional)

If you want to pick and choose your tools instead of getting them all at once:

Code auto-formatting

1. yarn add --dev --exact prettier husky pretty-quick
2. Modify package.json as described in Usage

Linting

1. Follow the short instructions at eslint-config-cooperka