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

NOTE: still under active development and I'm not currently providing backwards compatibility until things stabilize.

📯 Description

This package includes scripts and configuration used by Create React App but with LOTS more bells 🔔 and whistles 😗.

⚡ 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.
• admin panel: exception view and extensible panel to add custom admin capabilities.
• 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. (Semantic UI is a good alternative, too.)
• cron: via node-schedule.
• CSP nonce: via helmetjs.
• documentation: adds some standard and GitHub-specific Markdown files using best practices. files include:
  • changelog
  • code of conduct
  • code owners (GitHub-specific)
  • contributing: based off of Atom’s.
  • contributors
  • issue template (GitHub-specific)
  • license
  • pull request template (GitHub-specific)
  • readme
  • support (GitHub-specific)
  • alex for more inclusive, equitable docs.
• 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.
• experiments framework: allows you to add experiments quickly via a React component and hook.
• 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.
• health checks: runs a client health check every 5 minutes to see if the client is still valid.
• i18n: via react-intl and extraction tools.
• imports: absolute imports are turned on.
• libraries: adds lodash by default.
• local state: adds Apollo's Local State.
• 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. (also has web vitals built in.)
• Prettier: adds linting upon commit. also sorts imports via prettier-plugin-import-sort.
• React Router: adds AJAX-navigation, and code splitting via React.lazy and Suspense.
• React Spring: for great animation using a React hook.
• Sentry: exception collection and analysis.
• server: i know, heresy!
  • adds Express.
  • adds Server-side rendering (SSR).
  • adds GraphQL and Apollo.
  • for GraphQL adds GraphQL code gen.
  • stubs out an API server.
• structured data: via JSON-LD.
• styleguide: via Storybook.
• xsrf/csrf protection: via csurf.

💾 Install

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

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

npm start

Prerequisites: Node 13+ if you want proper internationalization (i18n) support (via full-icu).

Or, to run locally without the Storybook styleguide server:

npm run serve:dev

In dev or prod you'll want to setup your environment as well. Check out the .env.example file and mv it to .env.development.local (or .env for prod) and set the various variables:

• REACT_APP_DB* for your database
• REACT_APP_SESSION_SECRET for session management
• REACT_APP_AUTH0* variables if you would like to use Auth0 for logging in

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

npm --production install
npm run build
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

To change port, in an .env change the values to what you would like:

PORT=3000
REACT_APP_SSR_PORT=3001

To run migrations:

npx sequelize db:migrate && npx sequelize db:seed:all

To create a new migration:

npx sequelize migration:generate --name [migration_name]

To learn more about Sequelize and migrations, read the docs here.

To add your name/email to relevant files:

npm run config

To extract i18n messages (they go into the folder build/messages):

npm run extract-messages

To use Docker:

npm run dev

and then MySQL will be available on port 3002 (with username/password/database name all being allthethings). Redis will be on port 3003. To set up Redis be sure to set REACT_APP_REDIS_HOST and REACT_APP_REDIS_PORT.

👉 See main README.md for roadmap and more details! 👈

📜 License

MIT

(The format is based on Make a README)