xo

status: NOT YET COMPLETED

Helping out a friend setup something non-trivial.

This repo is made public so the source code can be used as a reference for other acquaintances/strangers that I occassionally help out.

This does not follow standard React-Redux-TypeScript conventions for various reasons that may not be relevant to you, if you're not part of the group this boilerplate is primarily intended for (so it's pointless for me to list them here). Just keep that in mind if you're new to the React ecosystem not to take this boilerplate as gospel.

Setup

git clone git@github.com:gerardmrk/xo.git && \
  cd xo/app/clientweb && \
  yarn install && \
  yarn start

then open localhost:4200

The app itself should always be runnable and buildable on master, while other components of this codebase are not guaranteed to work or stay working while they're being completed/refined. Examples of these are the pre-render component, the translations script, and even the stand-in Node HTTP server.

Stack

Context	Tool/Lib/Spec	Tech
Styles	UI Framework	Semantic UI React
	CSS Modules Impl	webpack-contrib/css-loader
	CSS Resetter	Normalize.css v8
	Preprocessor	Less
	Postprocessor	Autoprefixer
Scripts	Types Transpiler	TypeScript
	ESNext Transpiler	Babel 7
	Assets/Modules Bundler	Webpack 4
	Browser Polyfills	Babel 7 (via core-js)
App	View Layer	React 16
	SPA Router	React Router 4
	State MGMT	Redux
	Immutability Utils	planttheidea/unchanged
	XHR	matthew-andrews/isomorphic-fetch
	SEO	React Helmet
	I18N	React Intl
	Offline FNs	NekR/offline-plugin
Tests	Runner	Jest v23
	Assertions	Jest v23
	Mocking/Stubbing	Jest v23
	Snapshots	Jest v23
	Headless DOM Env	Jest v23 (via JSDOM)
	Coverage FNs	Jest v23 (via Istanbul)
	VDOM Utils	Enzyme v3
Syntax	Types Linter	TSLint
	ES/JS Linter	ESLint
	Static Analysis	-
	Formatter	Prettier

TODOS

• Complete configurations for private source maps.
• Add option to simplify source maps during hot-reloading since it's slowing the reload process.
• Get to the bottom of dynamic translation files generation.

Important Reminders (so I don't forget)

• Remember to nullify global vars in renderer when process exits with any non-zero status so we won't have to worry about leaks down the road.

• There's an obvious memory leak somewhere in the frontend, use chrome profiler to figure out where.

• Merge the 3 React contexts.