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
-
npx install-peerdeps --dev --yarn lsr-tooling
-
Add to your package.json:
"scripts": { "format": "prettier --write '*.{js,md}' --write '{src}/**/*.{js,md}'", "lint": "eslint --ext .js .", "clean": "rm -rf build dist artifacts tmp" }, "prettier": { "singleQuote": true, "trailingComma": "all", "proseWrap": "always" }, "husky": { "hooks": { "pre-commit": "pretty-quick --staged" } }, "browserslist": [ "defaults", "not IE 11", "maintained node versions" ]
-
Copy in .eslintrc
-
Copy in .gitignore
Optional next steps
Jest
Test with-
yarn add --dev --exact jest jest-watch-typeahead react-test-renderer
(automatically includes babel-jest) -
Add to your package.json:
"scripts": { "test": "jest", }, "jest": { "roots": [ "<rootDir>/src" ], "testMatch": [ "<rootDir>/src/**/*.test.js" ], "transform": { "\\.js$": "babel-jest", "\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ], "resetMocks": true },
-
Copy in config/jest transformers
Material UI
Style with-
yarn add --exact @material-ui/core @material-ui/icons fontsource-roboto
-
Use it:
import { createMuiTheme, ThemeProvider, CssBaseline, makeStyles, } from '@material-ui/core'; import 'fontsource-roboto'; const theme = createMuiTheme({ // https://material-ui-next.com/customization/themes/#typography typography: { // Account for base font-size of 62.5%. htmlFontSize: 10, }, }); const useStyles = makeStyles({ /* ... */ }); const App = () => { const classes = useStyles(); return ( <ThemeProvider theme={theme}> <CssBaseline /> {/* ... */} </ThemeProvider> ); }; export default App;
html { height: 100%; /* 1 em = 10 px by default. */ font-size: 62.5%; } body { position: relative; min-height: 100%; margin: 0; padding: 0; /* Re-enlarge fonts as fallback in case MUI doesn't load properly. */ font-size: 1.4rem; font-family: Roboto, sans-serif; /* Always show vertical scrollbar to prevent jumpy navigation. */ overflow-y: scroll; }
React Static
Render with- Create a template app:
npx react-static create
- Either use their template directly or copy in core files; add to your package.json:
"scripts": {
"start": "react-static start",
"build": "react-static build",
"stage": "yarn run build --staging && serve dist -p 3000",
"analyze": "yarn run build --analyze"
},
-
Integrate with MUI (docs):
// plugins/jss-provider/node.api.js import { ServerStyleSheets } from '@material-ui/core'; export default () => ({ beforeRenderToHtml: (App, { meta }) => { // eslint-disable-next-line no-param-reassign meta.muiSheets = new ServerStyleSheets(); return meta.muiSheets.collect(App); }, headElements: (elements, { meta }) => [ ...elements, meta.muiSheets.getStyleElement(), ], });
// static.config.js // Docs: https://github.com/react-static/react-static/blob/master/docs/config.md export default { plugins: ['jss-provider'], /* eslint-disable react/prop-types */ Document: ({ Html, Head, Body, children }) => ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no" /> <title>Foo</title> {/* Favicon: https://realfavicongenerator.net/ */} {/* Open Graph markup: https://developers.facebook.com/tools/debug/og/object/ */} {/* Analytics: https://matomo.org/ */} </Head> <Body> <noscript>You need to enable JavaScript to run this app.</noscript> {children} </Body> </Html> ), /* eslint-enable */ };
Netlify
Deploy withyarn add --dev --exact netlify-cli
- Add to your package.json:
"scripts": {
"deploy": "yarn run build && netlify deploy"
},
Independent dependencies (optional)
If you want to pick and choose your tools instead of getting them all at once:
Code auto-formatting
yarn add --dev --exact prettier husky pretty-quick
- Modify package.json as described in Usage
Linting
- Follow the short instructions at eslint-config-cooperka