{"id":15393201,"url":"https://github.com/shahzaibkhalid/shaizei","last_synced_at":"2025-04-15T23:33:50.522Z","repository":{"id":34333529,"uuid":"173196638","full_name":"shahzaibkhalid/shaizei","owner":"shahzaibkhalid","description":"🛠 —  Toolkit for building \u0026 maintaining futuristic React apps.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:14:37.000Z","size":2333,"stargazers_count":5,"open_issues_count":10,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T21:39:19.936Z","etag":null,"topics":["create-react-app","react","react-cli","react-starter-kit","react-toolkits","reactjs","webpack"],"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/shahzaibkhalid.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"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":"2019-02-28T22:22:20.000Z","updated_at":"2024-03-06T04:27:02.000Z","dependencies_parsed_at":"2024-10-28T15:38:05.000Z","dependency_job_id":null,"html_url":"https://github.com/shahzaibkhalid/shaizei","commit_stats":{"total_commits":345,"total_committers":2,"mean_commits":172.5,"dds":0.05217391304347829,"last_synced_commit":"b61585ecbeba021796022c3fadb580b8505462ab"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahzaibkhalid%2Fshaizei","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahzaibkhalid%2Fshaizei/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahzaibkhalid%2Fshaizei/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahzaibkhalid%2Fshaizei/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shahzaibkhalid","download_url":"https://codeload.github.com/shahzaibkhalid/shaizei/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240336948,"owners_count":19785655,"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":["create-react-app","react","react-cli","react-starter-kit","react-toolkits","reactjs","webpack"],"created_at":"2024-10-01T15:18:14.950Z","updated_at":"2025-02-28T20:31:51.329Z","avatar_url":"https://github.com/shahzaibkhalid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eshaizei\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e🛠 — Toolkit for building \u0026 maintaining futuristic React apps.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#contributors\"\u003e\u003cimg src=\"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square\" alt=\"all-contributors\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\" alt=\"PRs Welcomed\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/shahzaibkhalid/shaizei/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@shaizei/cli.svg?style=flat-square\" alt=\"MIT License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@shaizei/cli\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@shaizei/cli.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# STOP! 🚧 ✋\n\nThis software is still in beta stages and not ready for production use just yet. Please try it out, give feedback, and help fix bugs.\n\n# About\n\nThis repo contains several packages to develop and build scalable React.js apps.\n\n* [@shaizei/babel-preset](./packages/babel-preset/README.md) - This package contains shareable babel.js configuration used by the applications created with @shaizei/cli.\n\n* [@shaizei/cli](./packages/cli/README.md) - A next-generation CLI to quickly scaffold pre-configured yet on-demand configurable React applications.\n\n* [@shaizei/eslint-config](./packages/eslint-config/README.md) - This repository contains shareable ESLint configuration used by the applications created with @shaizei/cli.\n\n* [@shaizei/prettier-config](./packages/prettier-config/README.md) - This repository contains shareable Prettier configuration used by the applications created with @shaizei/cli.\n\n* [@shaizei/scripts](./packages/scripts/README.md) - This package contains automation task used by the applications created with @shaizei/cli.\n\n* [@shaizei/typescript-config](./packages/typescript-config/README.md) - This package contains shareable TypeScript compiler configuration used by the applications created with @shaizei/cli.\n\n* [@shaizei/webpack-config](./packages/webpack-config/README.md) - This package contains shareable webpack configuration used by the applications created with @shaizei/cli.\n\n* [@shaizei/helpers](./packages/helpers/README.md) - This package contains common helper utilities for `shaizei` core.\n\n# Getting Started\n\n## Installation\n\nThe first step is to install `@shaizei/cli` to quickly scaffold an application.\n\nUsing Yarn:\n\n```shell\nyarn global add @shaizei/cli\n```\n\nUsing npm:\n\n```shell\nnpm install @shaizei/cli -g\n```\n\n## Scaffolding a new App\n\n### React-JavaScript\n\nIn order to generate a React-JavaScript app, named as `my-demo-app`, run the following command:\n\n```shell\nshaizei new my-demo-app\n```\n\nIf you want to look into the application that will be created by this command, take a look at [shaizei-starter-javascript](https://github.com/shahzaibkhalid/shaizei-starter-javascript).\n\n### React-TypeScript\n\nIn order to generate a React-TypeScript app, named as `my-demo-app`, run the following command:\n\n```shell\nshaizei new my-demo-app --typescript\n```\n\nIf you want to look into the application that will be created by this command, take a look at [shaizei-starter-typescript](https://github.com/shahzaibkhalid/shaizei-starter-typescript).\n\nThis will generate a new application for you in current directory.\n\n## Configuration Options\n\nApps created with `@shaizei/cli` are built with sensible defaults yet very extensible at the core.\n\n### shaizeirc.json\n\nIn order to configure certain behavior of development workflow, you can play with the options in `shaizeirc.json`. Here's how the file looks like in a newly scaffolded app:\n\n```json\n  {\n    \"typescript\": false,\n    \"showErrorOverly\": true,\n    \"emitLintingErrors\": false,\n    \"host\": \"localhost\",\n    \"defaultPort\": 3000,\n    \"https\": false,\n    \"addCSSSourceMaps\": true,\n    \"addJSSourceMaps\": true,\n    \"cssModules\": false,\n    \"webpackDevSourceMap\": \"cheap-module-source-map\",\n    \"webpackProdSourceMap\": \"source-map\",\n    \"typeCheck\": false,\n    \"emotion\": false,\n    \"title\": \"React App | Shaizei\"\n  }\n```\n\nPlease find the details of each property along with default value as follows:\n\n- **typescript** (boolean: `false`)  \nSet this flag to `true` if you want to support `.ts` or `.tsx` files.\n\n- **showErrorOverly** (boolean: `true`)  \nYou'll see webpack error overlay for errors of various kinds to ease the development workflow. Turn this flag to `false` to get out of this default behavior.\n\n- **emitLintingErrors** (boolean: `false`)  \nBy default, linting errors won't break the incremental development builds, but if you want the `webpack-dev-server` to fail the build in case of any linting error, (in order to get more quick linting feedback) turn this flag to `true`.\n\n- **host** (string: `localhost`)  \nModify this flag to change the default `localhost`.\n\n- **defaultPort** (number: `3000`)  \nYou can modify the default port by modifying this option. Note that if the mentioned port is already busy, dev server will be started on a different port.\n\n- **https** (boolean: `false`)  \nYou can change this option to `true` in order to run the development server with HTTPS.\n\n- **addCSSSourceMaps** (boolean: `true`)  \nBy default, source maps will be generated for CSS files within production build, If you want to opt-out of this behavior, turn this flag to `false`.\n\n- **addJSSourceMaps** (boolean: `true`)  \nBy default, source maps will be generated for JavaScript files within production build, If you want to opt-out of this behavior, turn this flag to `false`.\n\n- **cssModules** (boolean: `false`)  \nBy default, CSS Modules are not enabled, but you can enable by turning this flag to `true`.\n\n- **webpackDevSourceMap** (string: `cheap-module-source-map`)\nBy default, `cheap-module-source-map` will be used as webpack-dev-server `devtool`. But you can add any other option, valid for webpack `devtool` option.\n\n- **webpackProdSourceMap** (string: `source-map`)\nBy default, `source-map` will be used as a `devtool` for production bundle source maps. But you can add any other option, valid for webpack `devtool` option.\n\n- **typeCheck** (boolean: `false`)  \nAs `shaizei` uses Babel to convert TypeScript to JavaScript, so Babel just strips away types without any type-checking. This usually results in faster incremental builds but takes away the important aspect of TypeScript, type-checking. And the only way left is that you can check the soundness of types via your IDE intellisense features. This is not helpful always. There are two ways to type-check your TypeScript code in `shaizei`.\n  * You can turn on `typeCheck` flag in `shaizeirc.json` by turning its value to `true`. This will use `fork-ts-checker-webpack-plugin` for type-checking in every compilation. Note that this is only available when `typescript` flag value is `true` and won't do anything for JavaScript-React projects. This might leads to slower incremental builds.\n\n  * Second option is to run the type-checking script that's exposed by `shaizei`. You can run it as follows:\n\n    ```shell\n    shaizei type-check\n    ```\n\n    This will type-check your TypeScript code and will report the errors on terminal output (if any).\n    Note that `typescript` options must be `true` in order to run `type-check` script.\n\n- **emotion** (boolean: `false`)  \nIn order to add support for [emotion](https://emotion.sh) (a CSS-In-JS library) turn this flag to `true`.\n  * Only tooling for Emotion is pre-configured, you must add the production dependencies like `@emotion/core` and `@emotion/styled` as per need.\n  * If you're using TypeScript, you should also add `@emotion/core` inside the `types` array in `tsconfig.json`.\n\n- **title** (string: `React App | Shaizei`)  \nChange this option to change the document title.\n\n### Configuring other tools\n\nYou can also configure other tools in development and production builds pipelines. Click on each of the below mentioned tools to learn more about configuration options available.\n\n* [webpack](./packages/webpack-config/README.md)\n* [babel](./packages/babel-preset/README.md)\n* [ESLint](./packages/eslint-config/README.md)\n* [Prettier](./packages/prettier-config/README.md)\n* [TypeScript](./packages/typescript-config/README.md)\n\n### Hot Module Replacement  \n\nHot Module Replacement is already setup using `react-hot-loader`. However, if you want to turn back to normal behavior of full-blown page refresh whenever you make any change. You've to make a small change in the codebase:\n\n`src/App.tsx` or `src/App.jsx`\n\n```javascript\n// export default hot(App);\nexport default App;\n```\n\nNote that you might also need to restart your development server after such a change.\n\n## Opinions\n\nAlthough, apps created with `@shaizei/cli` does include sensible defaults when it comes to configurations. But at its heart, every tool is super configurable. Check more about configuring individual tools in pipelines in [Configuring other tools](#configuring-other-tools) section.\n\nThere are some opinions, however:\n\n* `shaizeirc.json` file must exist at the root of project directory.\n* Application-specific code must live within `src` directory.\n* `src` directory must live at the root of project directory.\n* The starting point of JavaScript-React project must be `index.jsx` and it must live at the root of `src` directory.\n* The starting point of TypeScript-React project must be `index.tsx` and it must live at the root of `src` directory.\n* The only HTML file `index.html` in which React  app will be rendered, must live at the root of `src` directory.\n* There must be an `assets` directory at the root of `src` and app favicon (notably `favicon.ico`) must live at the root of `assets` directory.\n\nNote that the apps scaffolded with `@shaizei/cli` already follow the opinions described above. However, these rules will be validated every time you run a standard `@shaizei/cli` command and if you try to violate them, you'll be prompted about what you're doing wrong and what you should do to fix.\n\n## Contributing\n\nPlease take a look at [CONTRIBUTING.md](.github/CONTRIBUTING.md) for more information on how you can contribute to this project.\n\n## Inspiration\n\nThere exists many other React CLIs, why another one? 🤔\n\n* **Maintainable configurations**  \nInstead of having the configurations per project basis, I wanted to move my configurations to a centralize location (separate packages) so that I can maintain it properly. Instead of having 100 different configurations inside 100 different projects, if I fix one thing in my configuration, I'd just release a new version and then update my package in all those projects.\n\n* **Cleaner codebase**  \nI don't know about you, but I strictly don't like bloated `package.json` with plenty of `devDependencies` that are directly related to configurations and not to your actual application. Also, having long `scripts` in `package.json` bloats your application that I personally wanted to clean out with `shaizei`.\n\n* **Extensible configurations with sensible defaults**  \nWe can abstract away our configurations into separate packages with sensible defaults but then how can we extend those configurations? This has been my main goal while building `shaizei` that all tooling must be abstracted yet it must be very extensible at the core. Therefore, all the common tools are configurable. Please checkout [Configuring other tools](#configuring-other-tools) for more information.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://www.shahzaibkhalid.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/18225515?v=4\" width=\"100px;\" alt=\"Shahzaib Khalid\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShahzaib Khalid\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-shahzaibkhalid\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/shahzaibkhalid/shaizei/issues?q=author%3Ashahzaibkhalid\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/shahzaibkhalid/shaizei/commits?author=shahzaibkhalid\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-shahzaibkhalid\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/shahzaibkhalid/shaizei/commits?author=shahzaibkhalid\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-shahzaibkhalid\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#fundingFinding-shahzaibkhalid\" title=\"Funding Finding\"\u003e🔍\u003c/a\u003e \u003ca href=\"#ideas-shahzaibkhalid\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#maintenance-shahzaibkhalid\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#projectManagement-shahzaibkhalid\" title=\"Project Management\"\u003e📆\u003c/a\u003e \u003ca href=\"#review-shahzaibkhalid\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#tool-shahzaibkhalid\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n`shaizei` is released under the [MIT License](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahzaibkhalid%2Fshaizei","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahzaibkhalid%2Fshaizei","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahzaibkhalid%2Fshaizei/lists"}