Get a webapp up and running with one command.

Usage no npm install needed!

<script type="module">
  import generatorPackages from '';



Get a webapp up and running with one command.

This yeoman generator does two things:

  • It creates the scaffolding for a typescript/react/redux/packages app.
  • It creates an interface to build new packages


Scaling a react/redux application is difficult and the traditional layer-based organization starts showing its cracks quickly. In my experience a better approach is a feature-based organization and this generator helps building that organization easier.

Read the blog article on the underlying philosophy:


  • typescript
  • webpack
  • react
  • redux
  • redux-cofx
  • TSLint
  • prettier


  • Sets up scaffolding for a web app without connecting all the pieces
  • Folder-based folder organization
  • Packages are referenced absolutely by the namespace defined when running the command, e.g. import auth from '@myapp/auth';
  • Built for scalability, composability, and reusability

Getting started

  • Install yeoman yarn global add yo
  • Install generator-packages yarn global add generator-packages
  • Navigate to the project folder
yo packages

Follow the steps to complete it!

Then run the dev server:

make dev

Open browser to http://localhost:8000

What does the command do?

Once the command finishes, it will copy files into project folder, install all necessary dependencies, and allow the developer to start building quickly

  packages/          # all features are built as if they were npm packages here
    web-app/         # this is the main web-app package that brings all other packages together
      app.ts         # root react component that pulls everything together
      index.ts       # init file that creates redux and renders `app`
      packages.ts    # where all packages are registered and root reducer is created
      store.ts       # redux store and middleware setup
      types.ts       # redux State definition
    index.html       # main html file
    index.css        # a place to put global css
  webpack/           # webpack files for dev and prod
  index.ts           # this is what webpack uses as the entry point to the app
  jest.config.js     # jest configuration file for testing
  Makefile           # all task runner commands
  prettier.config.js # js auto formatter
  tests.js           # file that jest uses before every test
  tsconfig.js        # typescript configuration file
  tslint.json        # lint configuration file

Creating new packages

The primary command simply builds the scaffolding for the app, the next step is to add new features to the application.

yo packages:create

Follow the steps to complete it!

This will create a new package under packages where the developer can start building the feature. It will also link the package up to the main web-app by adding the package to the web-app/packages.ts file. This is necessary in order for any reducers that were built in the new package.

What does the command do?

The :create command will build a new feature and create some example files of how to setup a new package. A package can technically have any interface, but for the main layers of the application, the index.ts file should export the following:

interface Module {
  reducers?: { [key: string]: (state: any, action: any) => any };
  effects?: { [key: string]: (action: any) => any };
  selectors?: { [key: string]: (state: any) => any };
  actions?: { [key: string]: (payload: any) => { type: string; payload: any } };

Keep in mind, they are all optional, but if you want the web-app to add a packages reducers then it must be exports as a key, and that applies for every other layer in the package.

Let's say the new feature is named todo


This command will also add the package to the packages.ts file.

For example here is a diff of packages.ts:

import { combineReducers, Reducer } from 'redux';

import use from 'redux-package-loader';

import { State } from './types';

const corePackages = [
+ require('@myapp/todo'),

// this will automatically grab all reducers for each package and load
// them into the rootReducer and rootSaga
const packages = use(corePackages);
const rootReducer: Reducer<State> = combineReducers(packages.reducers);

export { packages, rootReducer };