{"id":14976461,"url":"https://github.com/jmahc/that-react-app-you-want","last_synced_at":"2025-07-16T11:39:01.315Z","repository":{"id":22911249,"uuid":"96640416","full_name":"jmahc/that-react-app-you-want","owner":"jmahc","description":"That react app you always wanted: webpack@3.10.0, react@16.0.0, postCSS, purifycss, dll's and code splitting examples, bregh.            Highly opinionated but you better like it.","archived":false,"fork":false,"pushed_at":"2022-12-13T07:29:00.000Z","size":1517,"stargazers_count":27,"open_issues_count":20,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T08:56:36.444Z","etag":null,"topics":["babel","code-splitting","codesplitting","dll","prefetch","prefetcher","preload","preloader","prettier","react","reactjs","tree-shaking","treeshaking","webpack","webpack-latest","webpack3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmahc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-08T19:44:24.000Z","updated_at":"2020-07-15T18:40:03.000Z","dependencies_parsed_at":"2023-01-14T01:00:13.479Z","dependency_job_id":null,"html_url":"https://github.com/jmahc/that-react-app-you-want","commit_stats":null,"previous_names":[],"tags_count":22,"template":true,"template_full_name":null,"purl":"pkg:github/jmahc/that-react-app-you-want","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmahc%2Fthat-react-app-you-want","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmahc%2Fthat-react-app-you-want/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmahc%2Fthat-react-app-you-want/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmahc%2Fthat-react-app-you-want/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmahc","download_url":"https://codeload.github.com/jmahc/that-react-app-you-want/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmahc%2Fthat-react-app-you-want/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265506474,"owners_count":23778747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","code-splitting","codesplitting","dll","prefetch","prefetcher","preload","preloader","prettier","react","reactjs","tree-shaking","treeshaking","webpack","webpack-latest","webpack3"],"created_at":"2024-09-24T13:53:55.437Z","updated_at":"2025-07-16T11:39:01.271Z","avatar_url":"https://github.com/jmahc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# that-react-app-you-want\n\n[![Build Status]](https://travis-ci.org/jmahc/that-react-app-you-want.svg?branch=master)\n[![Dependencies]](https://david-dm.org/jmahc/that-react-app-you-want)\n[![devDependencies Status]](https://david-dm.org/jmahc/that-react-app-you-want?type=dev)\n\n[![license]](http://opensource.org/licenses/MIT)\n[![All Contributors]](#contributors)\n[![semantic-release]](https://github.com/semantic-release/semantic-release)\n\n[![Watch on GitHub]](https://github.com/jmahc/that-react-app-you-want/watchers)\n[![Star on GitHub]](https://github.com/jmahc/that-react-app-you-want/stargazers)\n[![Tweet]](https://twitter.com/intent/tweet?text=Check%20out%20that-react-app-you-want!%20https://github.com/jmahc/that-react-app-you-want%20%F0%9F%91%8D)\n\n**Yeah, this is it.**\n\nWhat you've all been waiting for: that **react app boilerplate shit** that you\nseek day and night.\n\nHere it is.\n\nRight here.\n\nYou can have it.\n\nNow featuring **react@16.0.0**.\n\n---\n\n## Pick your poison\n\nYou even have options to decide what you want to use!\n\n* The [master branch] branch contains a simple react application.\n* The [redux branch] branch implements [redux] alongside the simple react\n  application.\n\n---\n\n## What do you want to see from this?\n\nPlease fill free to open a card, or shoot me an email (found in the\n`package.json` file) with tips, ideas and improvements!.\n\nHopefully you guys are enjoying it!\n\n---\n\n## Getting started\n\nWhat do you need? Linux/macOS or a Windows machine and [yarn].\n\n### Linux \u0026 macOS Instructions\n\nSteps for you [yarn] losers:\n\n1. `yarn` - Install the dependencies.\n2. `yarn run dev-vendor` - Required and allows **for quicker development\n   builds** due to the DLL's generated.\n3. `yarn run start` or `yarn run dev` - start development server.\n4. `yarn run build` - build for production.\n\n**OPTIONAL**\n\n* `yarn run clean-all` - Removes any production-built files, DLL files,\n  installed dependencies and any `lock` files.\n* `yarn run clean-dist` - Removes any production-built files.\n* `yarn run clean-dll` - Removes any DLL files.\n* `yarn run clean-yarn` - Removes any [yarn]-specific files, including\n  dependencies.\n\n---\n\n### Windows Instructions\n\nSteps for you [yarn] losers:\n\n1. `yarn` - Install the dependencies.\n2. `yarn run dev:vendor` - Required and allows **for quicker development\n   builds** due to the DLL's generated.\n3. `yarn run start` or `yarn run dev` - Starts the development server.\n4. `yarn run build:win` - Builds the application for production.\n\n**OPTIONAL**\n\n* `yarn run clean:all` - Removes any production-built files, DLL files,\n  installed dependencies and any `lock` files.\n* `yarn run clean:dist` - Removes any production-built files.\n* `yarn run clean:dll` - Removes any DLL files.\n* `yarn run clean:yarn` - Removes any [yarn]-specific files, including\n  dependencies.\n\n---\n\n## That engine version shit for you semantic manics\n\nThis is what I use. Feel free to change `.node-version`, `.nvmrc` and the\n`package.json` file's engines to suit your needs.\n\n* [NodeJS] with: `\u003e=8.0.0`\n* [npm] with: `\u003e=5.0.0`\n* [yarn] with: `\u003e=1.0.0`\n\n---\n\n## What is inside, though?\n\nSome really cool things:\n\n* `webpack v3.10.0`\n* prettier formatting\n* webpack but you can use ES6 syntax\n* chunks\n* jsx\n* Code-splitting aka importin' shit on the fly\n* Tree-shaking for money-makers\n* DLL's for faster build times\n* PostCSS\n* PurifyCSS\n* hot reloadin'\n* react\n* (optional) favicon generaton\n* (optional) preloading/prefetching\n* and last but not least: [generact]! Check that out, it's dope.\n* sample `travis.yml` file\n\n---\n\n## Todos\n\n* Implement testing\n* Add an optional `redux` branch. _in progress as of August 4, 2017_\n* Add an optional `react-router v4` branch.\n* Add an optional authentication process.\n\n---\n\n### Issues\n\n* None as of now :)\n\n---\n\n### Open Graph\n\n[Open Graph] meta tags were added in the `public/index.js` file for your SEO\nneeds. Customize them inside the `html-webpack-plugin` instance located in the\n`config/webpack.config.commons.babel.js` file, within the `seo` object!\n\n---\n\n### Optional Functionality\n\nThese are optional decisions to made on your end, depending on the project\nrequired. I have chosen not to include them, as they vary from\nproject-to-project.\n\nTopics include:\n\n1. [Preload and Prefetch]\n2. [Favicon and Mobile Icon Generation]\n\n---\n\n#### Preload and Prefetch\n\nStill looking to further optimize your web application's loading times?\nPreloading _might_ be for you. Maybe you've seen `\u003clink rel=\"preload\"\u003e` or\n`\u003clink rel=\"prefetch\"\u003e` in a DOM's `\u003chead\u003e` before, maybe not. Because this\nproject utilizes code-splitting to produce chunks, preloading and prefetching\nmight be right up your alley! For this reason, I do have the plugin available in\nthe `webpack.config.production.babel.js` file. You should notice it at the top\nof the plugin list.\n\n**Note**: For more information, [this Medium article] can help distinguish your\nneeds for `preload` or `prefetch`.\n\n**Side note**: This example utilizes `preload` but the syntax should be the same\nfor `prefetch`.\n\nHere's what to do:\n\n1. `yarn add --dev preload-webpack-plugin`.\n2. Don't forget to `import` the plugin at the top of the\n   `config/webpack.config.production.babel.js` file, if not already:\n\n```javascript\n...\nimport PreloadWebpackPlugin from 'preload-webpack-plugin'\n...\n```\n\n2. In `config/webpack.config.production.babel.js`, you will want to place this\n   first inside of the `plugins` array:\n\n```\n...\nplugins: [\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    as: 'script',\n    include: 'asyncChunks'\n  }),\n]\n...\n```\n\n3. This will take any async chunks generated by [webpack] that the browser will\n   then _preload_ before everything else!\n4. If you have a feeling that the async chunks won't be used too soon after the\n   page loads, then you may want to investigate a `prefetch` solution.\n5. Any other questions about the plugin can be referenced by visiting the\n   [preload-webpack-plugin repository].\n\n---\n\n#### Favicon and Mobile Icon Generation\n\nThese generate favicons for all devices (android, iOS, and the favicon itself)\nusing a supplied image. Personally, I would be placed in the `public` directory.\nThat's why you might see the `my-image.png` and `favicon.ico` in there. It's up\nto you which you choose to use.\n\n1. `yarn add --dev favicons-webpack-plugin`\n2. In `config/webpack.config.commons.babel.js`, you will want to comment/remove\n   the `favicons` key:\n\n```javascript\n...\nplugins: [\n  new HtmlWebpackPlugin({\n    ...\n    // favicon: PATHS.favicon\n    ...\n  })\n]\n...\n```\n\n3. In `config/webpack.config.production.babel.js`, you will want to import the\n   newly installed package at the top of the file:\n\n```javascript\n...\nimport FaviconsWebpackPlugin from 'favicons-webpack-plugin'\n...\n```\n\n4. In the plugins section of the same production file, you will add this as one\n   of the first plugins:\n\n```javascript\n...\nplugins: [\n  new FaviconsWebpackPlugin({\n    logo: PATHS.image,\n    prefix: 'icons-[hash]/',\n    emitStats: false,\n    statsFilename: 'iconstats-[hash].json',\n    persistentCache: true,\n    inject: true,\n    // (see https://github.com/haydenbleasel/favicons#usage)\n    background: '#fff',\n    title: 'that-react-app-you-want',\n    icons: {\n      android: true,\n      appleIcon: true,\n      appleStartup: true,\n      coast: false,\n      favicons: true,\n      firefox: true,\n      opengraph: true,\n      twitter: true,\n      yandex: false,\n      windows: false\n    }\n  }),\n  ...\n]\n...\n```\n\n5. For reference, visit the [favicons-webpack-plugin page].\n\n---\n\n## License\n\nMIT\n\n---\n\n## Contributors\n\nThanks goes to these wonderful people\n([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/5778136?v=3\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eJordan McArdle\u003c/sub\u003e](http://mcardle.tech/)\u003cbr /\u003e[💻](https://github.com/jmahc/that-react-app-you-want/commits?author=jmahc \"Code\") [📖](https://github.com/jmahc/that-react-app-you-want#README \"Documentation\") |\n| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors] specification. Contributions of any\nkind welcome!\n\n---\n\n[about the author]: http://mcardle.tech/\n[all contributors]: https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square\n[all-contributors]: https://github.com/kentcdodds/all-contributors/\n[build status]: https://travis-ci.org/jmahc/that-react-app-you-want.svg?branch=master/\n[dependencies]: https://david-dm.org/jmahc/that-react-app-you-want.svg\n[devdependencies status]: https://david-dm.org/jmahc/that-react-app-you-want/dev-status.svg\n[favicon and mobile icon generation]: #favicon-and-mobile-icon-generation\n[favicons-webpack-plugin pageâ]: https://github.com/jantimon/favicons-webpack-plugin/\n[generact]: https://github.com/diegohaz/generact/\n[license]: https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square\n[master branch]: https://github.com/jmahc/that-react-app-you-want/\n[nodejs]: https://nodejs.com/\n[npm]: https://npmjs.com/\n[open graph]: http://ogp.me/\n[preload and prefetch]: #preload-and-prefetch\n[preload-webpack-plugin repository]: https://github.com/googlechrome/preload-webpack-plugin/\n[redux]: http://redux.js.org/\n[redux branch]: https://github.com/jmahc/that-react-app-you-want/tree/redux/\n[semantic-release]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\n[star on github]: https://img.shields.io/github/stars/jmahc/that-react-app-you-want.svg?style=social\n[this medium article]: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf/\n[tweet]: https://img.shields.io/twitter/url/https/github.com/jmahc/that-react-app-you-want.svg?style=social\n[watch on github]: https://img.shields.io/github/watchers/jmahc/that-react-app-you-want.svg?style=social\n[webpack]: https://webpack.js.org/\n[yarn]: https://yarnpkg.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmahc%2Fthat-react-app-you-want","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmahc%2Fthat-react-app-you-want","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmahc%2Fthat-react-app-you-want/lists"}