Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

cra-all-the-things

0.9.7 • Public • Published

🔮 create-react-app, ✨ ALL THE THINGS ✨ edition

DO NOT USE - NOT QUITE READY FOR BROAD USE YET!

CI status prettier status license

📯 Description

This package includes scripts and configuration used by Create React App.
Please refer to its documentation:

💾 Install

npx create-react-app react-all-the-things --use-npm --scripts-version=cra-all-the-things

Then, to run your newly created server locally, with the Storybook styleguide server:

npm start

Or, to run locally without the Storybook styleguide server:

npm run serve:dev

To run in production (or better yet check out bin/flightplan.js)

npm --production install
npm run serve:prod

To run tests:

npm run test

🔨 Development (of this meta-repo, not of the repo created by the npx command above)

To run locally, with the Storybook styleguide server:

yarn
cd packages/react-scripts  # TODO(mime) need to get rid of this command eventually - it's a crutch 
npm install
cd ../../
yarn start

To run locally, without the Storybook styleguide server:

yarn serve:dev

To run tests:

yarn:test

⚡ Features

  • accessibility (a11y) analyzer: via axe. in the bottom corner of CRA you’ll see a menu that will give you a list of items your site is violating in terms of a11y.
  • authentication: via Auth0. gives you the ability to login using Google/Facebook.
  • bundle size analyzer: à la CRA’s docs and source-map-explorer. do npm run analyze after creating a build.
  • component Libary (UI): via Material-UI.
  • CSP nonce: adds example code in server/app/app.js (not enabled though).
  • documentation: adds some standard and GitHub-specific Markdown files using best practices. files include:
  • error boundary: adds a top-level one to the app. (see doc).
  • error pages: 401, 404, 500.
  • error reporting: listens to window.onerror and reports JS errors to the server for debugging.
  • ES6: decorators and optional chaining: yes, they’re experimental and probably shouldn’t use but they’re sooo nice.
  • Flow: enable by default (off by default in CRA).
  • hot module replacement (HMR): enable by default (off by default in CRA).
  • humans.txt / robots.txt: adds stubs of these files.
  • Jest: installs Enzyme into the mix by default.
  • i18n: via react-intl.
  • kill switch: runs a client health check every 5 minutes to see if the client is still valid.
  • libraries: adds lodash by default.
  • logger: via winston.
  • node inspection: adds --inspect for development mode.
  • Open Graph: adds stub for social media embedding.
  • OpenSearch: adds stub file so that you can add search queries to your site later.
  • ORM: via sequelize.
  • perf indicator: in the bottom corner of the app, it will display render times.
  • Prettier: adds linting upon commit.
  • React Router: adds AJAX-navigation, and code splitting via React.lazy and Suspense.
  • server: i know, heresy!
  • structured data: via JSON-LD.
  • styleguide: via Storybook.
  • xsrf/csrf protection: via csurf.

🗺️ Roadmap

p0 (high pri)

p1 (medium pri)

  • admin panel
    • exception reports
    • system info
    • add docusaurus / read the docs (for this repo and template)
  • authentication - add ability to refresh tokens (auth0)
  • i18n features
    • message extractor
    • polyfill for Intl for older browsers
    • highlight missing translations
    • add fallback capability
    • RTL
  • experiments framework
  • add "test:debug" to scripts for chrome testing
  • more tests and https://coveralls.io
  • background tasks (if anything, at least via cron)
  • bundle analyzers (bundlesize, webpack-bundle-analyzer, webpack-dashboard)
  • ability to config repo (add name/email to Markdown docs at least)
  • GitHub PR request, show infobar of impact of PR
  • TypeScript (syncing template-typescript with template)
  • redux

p2 (ideas)

  • staging / canary server flags
  • lazy load image capability
  • event bus
  • Redis
  • immutability, via immutable.js / immer
  • fp: ramda, observables, rxjs

📙 Learn More

Changelog

Code of Conduct

Contributing

Contributors

Support

📜 License

MIT

(The format is based on Make a README)

Install

npm i cra-all-the-things

DownloadsWeekly Downloads

31

Version

0.9.7

License

MIT

Unpacked Size

325 kB

Total Files

141

Last publish

Collaborators

  • avatar