{"id":26707418,"url":"https://github.com/verypossible/generator-packages","last_synced_at":"2026-04-15T19:36:59.700Z","repository":{"id":74644293,"uuid":"139794234","full_name":"verypossible/generator-packages","owner":"verypossible","description":"Yeoman generator for building a web app using the packages folder organization","archived":false,"fork":false,"pushed_at":"2019-02-08T03:21:41.000Z","size":2638,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-23T00:24:40.691Z","etag":null,"topics":["packages","react","redux","redux-saga","typescript","webpack","yeoman","yeoman-generator"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/verypossible.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-07-05T04:20:00.000Z","updated_at":"2019-02-08T03:21:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"02e175aa-7c73-4994-b016-96ef49f0be9f","html_url":"https://github.com/verypossible/generator-packages","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/verypossible/generator-packages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verypossible%2Fgenerator-packages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verypossible%2Fgenerator-packages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verypossible%2Fgenerator-packages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verypossible%2Fgenerator-packages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/verypossible","download_url":"https://codeload.github.com/verypossible/generator-packages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verypossible%2Fgenerator-packages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280801249,"owners_count":26393473,"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","status":"online","status_checked_at":"2025-10-24T02:00:06.418Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["packages","react","redux","redux-saga","typescript","webpack","yeoman","yeoman-generator"],"created_at":"2025-03-27T06:28:54.585Z","updated_at":"2025-10-24T13:19:18.666Z","avatar_url":"https://github.com/verypossible.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Packages\n\nGet a webapp up and running with one command.\n\n![](init.gif)\n\nThis yeoman generator does two things:\n\n* It creates the scaffolding for a typescript/react/redux/packages app.\n* It creates an interface to build new packages\n\n## Inspiration\n\nScaling a react/redux application is difficult and the traditional layer-based\norganization starts showing its cracks quickly.  In my experience a better approach\nis a feature-based organization and this generator helps building that organization\neasier.\n\nRead the blog article on the underlying philosophy:\nhttps://github.com/neurosnap/blog/blob/master/scaling-js-codebase-multiple-platforms.md\n\n## Stack\n\n* typescript\n* webpack\n* react\n* redux\n* redux-cofx\n* TSLint\n* prettier\n\n## Features\n\n* Sets up scaffolding for a web app without connecting all the pieces\n* Folder-based folder organization\n* Packages are referenced absolutely by the namespace defined when running the command, e.g. `import auth from '@myapp/auth';`\n* Built for scalability, composability, and reusability\n\n## Getting started\n\n* Install [yeoman](http://yeoman.io/) `yarn global add yo`\n* Install generator-packages `yarn global add generator-packages`\n* Navigate to the project folder\n\n```bash\nyo packages\n```\n\nFollow the steps to complete it!\n\nThen run the dev server:\n\n```bash\nmake dev\n```\n\nOpen browser to http://localhost:8000\n\n### What does the command do?\n\nOnce the command finishes, it will copy files into project folder, install all necessary dependencies,\nand allow the developer to start building quickly\n\n```bash\n\u003cproject-folder\u003e/\n  packages/          # all features are built as if they were npm packages here\n    web-app/         # this is the main web-app package that brings all other packages together\n      app.ts         # root react component that pulls everything together\n      index.ts       # init file that creates redux and renders `app`\n      packages.ts    # where all packages are registered and root reducer is created\n      store.ts       # redux store and middleware setup\n      types.ts       # redux State definition\n  public/\n    index.html       # main html file\n    index.css        # a place to put global css\n  webpack/           # webpack files for dev and prod\n    common.js\n    dev.js\n    prod.js\n  .gitignore\n  index.ts           # this is what webpack uses as the entry point to the app\n  jest.config.js     # jest configuration file for testing\n  Makefile           # all task runner commands\n  package.json\n  prettier.config.js # js auto formatter\n  README.md\n  tests.js           # file that jest uses before every test\n  tsconfig.js        # typescript configuration file\n  tslint.json        # lint configuration file\n```\n\n## Creating new packages\n\nThe primary command simply builds the scaffolding for the app, the next step\nis to add new features to the application.\n\n![](create.gif)\n\n```bash\nyo packages:create\n```\n\nFollow the steps to complete it!\n\nThis will create a new package under `packages` where the developer can start\nbuilding the feature.  It will also link the package up to the main `web-app`\nby adding the package to the `web-app/packages.ts` file.  This is necessary in order\nfor any reducers that were built in the new package.\n\n### What does the command do?\n\nThe `:create` command will build a new feature and create some example files\nof how to setup a new package.  A package can technically have any interface,\nbut for the main layers of the application, the index.ts file `should` export the following:\n\n```js\ninterface Module {\n  reducers?: { [key: string]: (state: any, action: any) =\u003e any };\n  effects?: { [key: string]: (action: any) =\u003e any };\n  selectors?: { [key: string]: (state: any) =\u003e any };\n  actions?: { [key: string]: (payload: any) =\u003e { type: string; payload: any } };\n}\n```\n\nKeep in mind, they are all optional, but if you want the `web-app` to add a\npackages `reducers` then it must be exports as a key, and that applies for\nevery other layer in the package.\n\nLet's say the new feature is named `todo`\n\n```bash\n\u003cproject-folder\u003e/\n  packages/\n    todo/\n      index.ts\n      slice.ts\n      effects.ts\n```\n\nThis command will also add the package to the `packages.ts` file.\n\nFor example here is a diff of `packages.ts`:\n\n```diff\nimport { combineReducers, Reducer } from 'redux';\n\nimport use from 'redux-package-loader';\n\nimport { State } from './types';\n\nconst corePackages = [\n  require('@myapp/auth'),\n+ require('@myapp/todo'),\n];\n\n// this will automatically grab all reducers for each package and load\n// them into the rootReducer and rootSaga\nconst packages = use(corePackages);\nconst rootReducer: Reducer\u003cState\u003e = combineReducers(packages.reducers);\n\nexport { packages, rootReducer };\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fverypossible%2Fgenerator-packages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fverypossible%2Fgenerator-packages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fverypossible%2Fgenerator-packages/lists"}