\n ๐ฎ create-react-app, โจ ALL THE THINGS โจ edition\n
\n\n
\n \n \n \n
\n\nNOTE: still under active development and I'm not currently providing backwards compatibility until things stabilize.\n\n## ๐ฏ Description\n\nThis package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app) but with LOTS more bells ๐ and whistles ๐.\n\n## โก Features\n\n- **accessibility (a11y) analyzer**: via [axe](https://www.google.com/search?q=axe-core&oq=axe-core&aqs=chrome..69i57.1485j0j7&sourceid=chrome&ie=UTF-8). 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.\n- **admin panel**: exception view and extensible panel to add custom admin capabilities.\n- **authentication**: via [Auth0](https://auth0.com/). gives you the ability to login using Google/Facebook.\n- **bundle size analyzer**: ร la [CRAโs docs](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) and [source-map-explorer](https://www.npmjs.com/package/source-map-explorer). do `npm run analyze` after creating a build.\n- **component Libary (UI)**: via [Material-UI](https://material-ui.com/). ([Semantic UI](https://react.semantic-ui.com/) is a good alternative, too.)\n- **cron**: via [node-schedule](https://github.com/node-schedule/node-schedule).\n- **CSP nonce**: via [helmetjs](https://helmetjs.github.io/).\n- **documentation**: adds some standard and GitHub-specific Markdown files using best practices. files include:\n - [changelog](https://keepachangelog.com)\n - [code of conduct](https://www.contributor-covenant.org)\n - [code owners](https://help.github.com/articles/about-code-owners/) (GitHub-specific)\n - contributing: based off of [Atomโs](https://github.com/atom/atom/blob/master/CONTRIBUTING.md).\n - contributors\n - [issue template](https://help.github.com/articles/about-issue-and-pull-request-templates/) (GitHub-specific)\n - license\n - [pull request template](https://help.github.com/articles/about-issue-and-pull-request-templates/) (GitHub-specific)\n - [readme](https://www.makeareadme.com/)\n - [support](https://help.github.com/articles/adding-support-resources-to-your-project/) (GitHub-specific)\n - [alex](https://alexjs.com/) for more inclusive, equitable docs.\n- **error boundary**: adds a top-level one to the app. (see [doc](https://reactjs.org/docs/error-boundaries.html)).\n- **error pages**: [401](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401), [404](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404), [500](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/500).\n- **error reporting**: listens to `window.onerror` and reports JS errors to the server for debugging.\n- **experiments framework**: allows you to add experiments quickly via a React component and hook.\n- [**Flow**](https://flow.org): enable by default (off by default in CRA).\n- [**hot module replacement (HMR)**](https://webpack.js.org/concepts/hot-module-replacement/): enable by default (off by default in CRA).\n- [**humans.txt**](http://humanstxt.org/) **/** [**robots.txt**](http://www.robotstxt.org/): adds stubs of these files.\n- [**Jest**](https://jestjs.io/): installs [Enzyme](https://airbnb.io/enzyme/) into the mix by default.\n- **health checks**: runs a client health check every 5 minutes to see if the client is still valid.\n- **i18n**: via [react-intl](https://github.com/yahoo/react-intl/wiki#getting-started) and extraction tools.\n- **imports**: [absolute imports](https://create-react-app.dev/docs/importing-a-component/#absolute-imports) are turned on.\n- **libraries**: adds [lodash](https://lodash.com) by default.\n- **local state**: adds [Apollo's Local State](https://www.apollographql.com/docs/react/data/local-state/).\n- **logger**: via [winston](https://github.com/winstonjs/winston).\n- **node inspection**: adds `--inspect` for development mode.\n- [**Open Graph**](http://ogp.me/): adds stub for social media embedding.\n- [**OpenSearch**](http://www.opensearch.org/Home): adds stub file so that you can add search queries to your site later.\n- **ORM**: via [sequelize](http://docs.sequelizejs.com/).\n- **perf indicator**: in the bottom corner of the app, it will display render times. (also has [web vitals](https://web.dev/vitals/) built in.)\n- [**Prettier**](https://prettier.io): adds linting upon commit. also sorts imports via [prettier-plugin-import-sort](https://www.npmjs.com/package/prettier-plugin-import-sort).\n- [**React Router**](https://reacttraining.com/react-router/): adds AJAX-navigation, and code splitting via React.lazy and Suspense.\n- [**React Spring**](https://www.react-spring.io/): for great animation using a React hook.\n- [**Sentry**](https://sentry.io/): exception collection and analysis.\n- **server**: i know, heresy!\n - adds [Express](https://expressjs.com/).\n - adds Server-side rendering (SSR).\n - adds [GraphQL](https://graphql.org) and [Apollo](https://apollographql.com).\n - for GraphQL adds [GraphQL code gen](https://www.graphql-code-generator.com/).\n - stubs out an API server.\n- **structured data**: via [JSON-LD](https://developers.google.com/search/docs/guides/intro-structured-data).\n- **styleguide**: via [Storybook](https://storybook.js.org).\n- **xsrf/csrf protection**: via [csurf](https://github.com/expressjs/csurf).\n\n## ๐พ Install\n\n```sh\nnpx create-react-app react-all-the-things --use-npm --scripts-version=cra-all-the-things --template=all-the-things\n```\n\nThen, to run your newly created server locally, **with** the Storybook styleguide server:\n\n```sh\nnpm start\n```\n\n_Prerequisites: Node 13+ if you want proper internationalization (i18n) support (via full-icu)._\n\nOr, to run locally **without** the Storybook styleguide server:\n\n```sh\nnpm run serve:dev\n```\n\nIn 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:\n\n- `REACT_APP_DB*` for your database\n- `REACT_APP_SESSION_SECRET` for session management\n- `REACT_APP_AUTH0*` variables if you would like to use Auth0 for logging in\n\nTo run in production (or better yet check out bin/flightplan.js)\n\n```sh\nnpm --production install\nnpm run build\nnpm run serve:prod\n```\n\nTo run tests:\n\n```sh\nnpm run test\n```\n\n### ๐จ Development (of this meta-repo, not of the repo created by the npx command above)\n\nTo run locally, **with** the Storybook styleguide server:\n\n```sh\nyarn\ncd packages/react-scripts # TODO(mime) need to get rid of this command eventually - it's a crutch\nnpm install\ncd ../../\nyarn start\n```\n\nTo run locally, **without** the Storybook styleguide server:\n\n```sh\nyarn serve:dev\n```\n\nTo run tests:\n\n```sh\nyarn:test\n```\n\nTo change port, in an `.env` change the values to what you would like:\n\n```sh\nPORT=3000\nREACT_APP_SSR_PORT=3001\n```\n\nTo run migrations:\n\n```sh\nnpx sequelize db:migrate && npx sequelize db:seed:all\n```\n\nTo create a new migration:\n\n```sh\nnpx sequelize migration:generate --name [migration_name]\n```\n\nTo learn more about Sequelize and migrations, read the docs [here](https://sequelize.org/master/manual/migrations.html).\n\nTo add your name/email to relevant files:\n\n```sh\nnpm run config\n```\n\nTo extract i18n messages (they go into the folder `build/messages`):\n\n```sh\nnpm run extract-messages\n```\n\nTo use [Docker](https://docs.docker.com/compose/install/):\n\n```sh\nnpm run dev\n```\n\nand then MySQL will be available on port 3002 (with username/password/database name all being `allthethings`).\nRedis will be on port 3003. To set up Redis be sure to set REACT_APP_REDIS_HOST and REACT_APP_REDIS_PORT.\n\n## ๐ See main [README.md](https://github.com/mimecuvalo/all-the-things) for roadmap and more details! ๐\n\n## ๐ License\n\n[MIT](license.md)\n\n(The format is based on [Make a README](https://www.makeareadme.com/))\n","readmeFilename":"README.md","keywords":["cra","create-react-app","react","ssr","server-side-rendering"]}
![\"prettier](\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"){kind=icon}
\n ![\"license\"](\"https://img.shields.io/badge/license-MIT-brightgreen.svg\"){kind=icon}
\n