{"id":22282960,"url":"https://github.com/bastipnt/react-start","last_synced_at":"2026-04-15T08:39:14.549Z","repository":{"id":105170611,"uuid":"117424700","full_name":"bastipnt/react-start","owner":"bastipnt","description":"react boilerplate for advanced use","archived":false,"fork":false,"pushed_at":"2018-03-26T06:16:15.000Z","size":1853,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T19:51:44.698Z","etag":null,"topics":["boilerplate","eslint","flow","flowtype","hmr","hot-module-replacement","mobx","react","react-router","react-starter-kit"],"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/bastipnt.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-14T11:35:21.000Z","updated_at":"2022-04-08T22:42:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"1f4a9e35-1868-4252-adf9-5bd283e6dbab","html_url":"https://github.com/bastipnt/react-start","commit_stats":null,"previous_names":["bastipnt/react-start"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bastipnt/react-start","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastipnt%2Freact-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastipnt%2Freact-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastipnt%2Freact-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastipnt%2Freact-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bastipnt","download_url":"https://codeload.github.com/bastipnt/react-start/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastipnt%2Freact-start/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31833836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T07:17:56.427Z","status":"ssl_error","status_checked_at":"2026-04-15T07:17:30.007Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["boilerplate","eslint","flow","flowtype","hmr","hot-module-replacement","mobx","react","react-router","react-starter-kit"],"created_at":"2024-12-03T16:37:30.832Z","updated_at":"2026-04-15T08:39:14.532Z","avatar_url":"https://github.com/bastipnt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nTitle:    React Start\nDate:     25.01.2018\nAuthor:   Sebastian Paintner\nKeywords: react, mobx, frontend, web, hmr\n--\u003e\n\n# Easy start with react\n\n## About\nBoilerplate for an easy start with react apps.\n\nCreated with ❤️ by [Basti Paintner](https://twitter.com/lItc0de).\n\nInspiration and many ideas taken from\n[react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) and\n[create-react-app](https://github.com/facebook/create-react-app). Thx a lot!\n\n## Table of Contents\n\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Folder Structure](#folder-structure)\n- [Available Scripts](#available-scripts)\n  - [yarn start](#yarn-start)\n  - [yarn build](#yarn-build)\n  - [yarn serve](#yarn-serve)\n  - [yarn prod](#yarn-prod)\n  - [yarn test](#yarn-test)\n  - [yarn test:debug](#yarn-test-debug)\n  - [yarn coverage](#yarn-coverage)\n  - [yarn watch](#yarn-watch)\n  - [yarn build:dll](#yarn-build-dll)\n  - [yarn storybook](#yarn-storybook)\n  - [yarn postinstall](#yarn-postinstall)\n- [Routing](#routing)\n- [Styling](#styling)\n- [Localisation](#localisation)\n- [Testing](#testing)\n- [Linting](#linting)\n- [Babel](#babel)\n  - [Plugins](#plugins)\n  - [Presets](#presets)\n  - [Env](#env)\n\n## Features\n\n**Routing**\n\nClient side routing out of the box with [react-router](https://github.com/ReactTraining/react-router).\n\n**Styling**\n\nAwesome component based styling with\n[styled-components](https://github.com/styled-components/styled-components).\n\n**Hot Module Replacement (HMR)**\n\nSave your work and have the page automatically rerendered without reloading!\u003cbr/\u003e\n-\u003e Instantly see your changes with [react-hot-loader](https://github.com/gaearon/react-hot-loader).\n\n**Lastest JavaScript features**\n\ni.e. template strings, arrow functions, JSX syntax...\n\n**Linting**\n\nNo commit without being lintet, to assure code quality and best practices.\n\n**Bulletproof test setup**\n\nRun Jest tests before each build! It's not possible to deploy with failing tests.\n\n**Storybook**\n\nDocument your components with [storybook](https://storybook.js.org/) to keep track of your styles and\nto make ist easier working in a team.\n\n## Getting started\n- Clone this repo: `git clone https://github.com/lItc0de/react-start.git`\n- Get inside: `cd react-start`\n- Install dependencies using [yarn](https://yarnpkg.com/lang/en/docs/install/): `yarn install`\n- Run that thing on http://localhost:3000 with: `yarn start`\n- Feel free to check out the example project, that is included\n\n-\u003e Now you are good to go and build your awsome project!  \n_just delete the example files ;D_\n\n## Folder Structure\n\n`/`  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`build/` all your production ready compiled files  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`src/` all your source files  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`assets/` images, videos, icons, fonts, ...  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`components/` all your components and component styles  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`locales/` for your language files  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`stores/` place for mobx stores  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`styles/` all the reusable styles, shared throughout your components  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`utils/` put your reused functions in here  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`App.jsx` your main component  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`i18n.js` config file for localisation  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`index.html` in here your app gets injected  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`index.js` this file injects your app in the index.html file and loads other dependencies  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`manifest.json` [web app manifest file](https://developer.mozilla.org/en-US/docs/Web/Manifest)  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`routes.jsx` define your routes in here  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n`tests/` in here you can write your tests\n\n\n## Available Scripts\n\n### `yarn start`\nStarts the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will rerender if you make changes.\n\n### `yarn build`\ncompiles your app for production use\u003cbr/\u003e\nyou can find it then in the `build` folder\n\n### `yarn serve`\nstarts an express server, that serves your production compiled app from the build folder\n\n### `yarn prod`\ndoes the two above steps: first builds the app, then serves it\n\n### `yarn test`\nruns your jest tests\n\n\u003ch3 id=\"yarn-test-debug\"\u003e\u003ccode\u003eyarn test:debug\u003c/code\u003e\u003c/h3\u003e\nruns your jest tests in debug mode  \nyou can use [chrome](https://www.google.com/chrome/) to connect to the node server\n\n### `yarn coverage`\nruns your jest tests and prints coverage report\n\n### `yarn watch`\nruns your jest tests in watch mode  \n_reruns tests on save_\n\n\u003ch3 id=\"yarn-build-dll\"\u003e\u003ccode\u003eyarn build:dll\u003c/code\u003e\u003c/h3\u003e\nbuilds a DLL file for improving compile time in development (https://webpack.js.org/plugins/dll-plugin)\n\n### `yarn storybook`\nstarts the storybook server\n\n### `yarn postinstall`\nruns automatically after `yarn install` and builds your webpack DLL\n\n## Routing\n\nThis setup uses the [react-router](https://github.com/ReactTraining/react-router)\nfrom reacttraining.com  \nFor mor information please visit their [website](reacttraining.com/react-router)\n\n## Styling\n\nYou can style your components with [styled-components](https://github.com/styled-components/styled-components)  \nWith this you can write real `CSS` in `JavaScript`!  \nPlease check their [website](https://www.styled-components.com/) for further information\n\n## Localisation\n\nThis boilerplate has build in localisation support with\n[react-i18next](https://github.com/i18next/react-i18next).  \nAdd your localisation files in `src/locales/`.  \nYou can configurate _i18next_ in `src/i18n.js`.\n\n## Testing\n\nFor testing we use [Jest](https://facebook.github.io/jest): Jest is used by Facebook to test all JavaScript code including React applications. One of Jest's philosophies is to provide an integrated `zero-configuration` experience.  \nYou can write your tests in `tests/` with the filename pattern `[component name].test.js`.  \nFor a better rendering experience of your react components the test setup includes [enzyme](http://airbnb.io/enzyme).  \nThe test setup file can be found in `config/setup.test.js`.\n\n## Linting\n\n- Lint your code before commiting with [lint-staged](https://github.com/okonet/lint-staged)  \n  for git hooks [pre-commit](https://github.com/observing/pre-commit) is used\n- **Configuration:**\n  - **Parser**: [babel-eslint](https://github.com/babel/babel-eslint): Use for [Flow](https://github.com/facebook/flow) and\n  other experimantal features, that are not supportet by the [default parser](https://github.com/eslint/espree).\n  - **[eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)**: This package\n  provides Airbnb's .eslintrc as an extensible shared config.\n  - **Env**: Specify supportet platfroms\n  - **Plugins**:\n    - [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react): Adds linting rules for react\n    - [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y): Static AST checker for\n    [accessibility rules](https://github.com/reactjs/react-a11y) on JSX elements.\n  - **Parser Options**: Specify the JavaScript language options you want to support as explained\n  [here](https://eslint.org/docs/user-guide/configuring#specifying-parser-options)\n  - **Rules**: Overwrite default rules.\n  - **Settings**: Add [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import), an ESLint plugin with rules that help validate proper imports.\n\n## Babel\n\n### Plugins\n- [styled-components](https://www.styled-components.com/docs/tooling#babel-plugin): This plugin adds support for server-side rendering, for minification of styles and gives you a nicer debugging experience.\n- [transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy) A plugin for Babel 6 that (mostly) replicates the old decorator behavior from Babel 5.  \nAllows us to work with decorators from mobx.\n\n### Presets\n- [Env preset](https://babeljs.io/docs/plugins/preset-env): Babel preset that automatically determines the Babel plugins\nyou need based on your supported environments. Uses compat-table.\u003cbr/\u003e\n  [Option](https://babeljs.io/docs/plugins/preset-env#optionsmodules): Do not transform modules by setting\n  `\"modules\": false`\n- [React preset](https://babeljs.io/docs/plugins/preset-react): Strip flow types and transform JSX into createElement\ncalls.\n- [Stage-0 preset](https://babeljs.io/docs/plugins/preset-stage-0) includes:\n  - all stages from the [TC39 Process](https://tc39.github.io/process-document) (newest ES stuff that will possibly be\n  included into ECMAScript)\n  - [transform-do-expressions](https://babeljs.io/docs/plugins/transform-do-expressions): Compile `do` expressions to\n  ES5\n  - [transform-function-bind](https://babeljs.io/docs/plugins/transform-function-bind): Compile the new function bind\n  operator `::` to ES5.\n\n### Env\n\nYou can use the `env` option to set specific options when in a certain environment as documentet\n[here](https://babeljs.io/docs/usage/babelrc/#env-option).\n\n- **Production**\n  - [transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types):\n  Remove unnecessary React `propTypes` from the production build to save bandwith.\n  - [transform-react-constant-elements](https://babeljs.io/docs/plugins/transform-react-constant-elements): Treat React\n  JSX elements as value types and hoist them to the highest scope to improve runtime performance.\n  - [transform-react-inline-elements](https://babeljs.io/docs/plugins/transform-react-inline-elements): Replaces the\n  `React.createElement` function with babelHelpers.jsx.\n\n- **Test**\n  - [transform-es2015-modules-commonjs](https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs): This plugin\n  transforms ES2015 modules to CommonJS.\n  - [dynamic-import-node](https://github.com/airbnb/babel-plugin-dynamic-import-node): Babel plugin to transpile\n  `import()` to a deferred `require()`, for node. Matches the\n  [proposed spec](https://github.com/domenic/proposal-import-function).\n\nThis documentation will be finished and improved over time. If you have some points, that shouldn't be missing in this doku, feel free to contact me. Also, if you have ideas improving this boilerplate, they are very welcome!  \nNext steps are:  \n- upgrade webpack to version 4\n- finish the doku\n- use the same webpack configuration for the app and storybook\n- ...\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastipnt%2Freact-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbastipnt%2Freact-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastipnt%2Freact-start/lists"}