https://github.com/verypossible/generator-packages
Yeoman generator for building a web app using the packages folder organization
https://github.com/verypossible/generator-packages
packages react redux redux-saga typescript webpack yeoman yeoman-generator
Last synced: 3 months ago
JSON representation
Yeoman generator for building a web app using the packages folder organization
- Host: GitHub
- URL: https://github.com/verypossible/generator-packages
- Owner: verypossible
- Created: 2018-07-05T04:20:00.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-08T03:21:41.000Z (over 7 years ago)
- Last Synced: 2025-07-23T00:24:40.691Z (12 months ago)
- Topics: packages, react, redux, redux-saga, typescript, webpack, yeoman, yeoman-generator
- Language: JavaScript
- Homepage:
- Size: 2.52 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Packages
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
## Inspiration
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:
https://github.com/neurosnap/blog/blob/master/scaling-js-codebase-multiple-platforms.md
## Stack
* typescript
* webpack
* react
* redux
* redux-cofx
* TSLint
* prettier
## Features
* 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](http://yeoman.io/) `yarn global add yo`
* Install generator-packages `yarn global add generator-packages`
* Navigate to the project folder
```bash
yo packages
```
Follow the steps to complete it!
Then run the dev server:
```bash
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
```bash
/
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
public/
index.html # main html file
index.css # a place to put global css
webpack/ # webpack files for dev and prod
common.js
dev.js
prod.js
.gitignore
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
package.json
prettier.config.js # js auto formatter
README.md
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.
```bash
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:
```js
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`
```bash
/
packages/
todo/
index.ts
slice.ts
effects.ts
```
This command will also add the package to the `packages.ts` file.
For example here is a diff of `packages.ts`:
```diff
import { combineReducers, Reducer } from 'redux';
import use from 'redux-package-loader';
import { State } from './types';
const corePackages = [
require('@myapp/auth'),
+ 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 = combineReducers(packages.reducers);
export { packages, rootReducer };
```