@socialcare/generator-app NPM

@socialcare/generator-app

A generator that scaffolds out code for social care web apps. Includes helpful generator for setting up a template app.

Installation

First, install Yeoman using npm (we assume you have pre-installed node.js version >=8.3 <9.0).

npm install -g yo
npm install -g @socialcare/generator-app

Generating a web app

This will scaffold out an isomorphic app with all the files needed to get up and running.

cd into your projects directory.
Run the yeoman SocialCare app generator and follow the onscreen prompts.
```
$ yo @socialcare/app
```

The generator will copy all the files needed for a new SocialCare app and will also run npm install. When the instillation is complete you're ready to run the app.

$ npm start

Created files

.
├── /public/        <-- icons, cross domain policies
├── /src/           <-- All the application code
│   ├── /actions/
│   ├── /components/
│   ├── /constants/
│   ├── /core/
│   ├── /css/
│   ├── /public/
│   ├── /reducers/
│   ├── /routes/
│   ├── /store/
│   ├── client.js
│   ├── config.js
│   ├── config.test.js
│   └── server.js
├── /test/          <-- Helpers for testing
│   ├── README.md
│   └── test-helpers.js
├── /tools/         <-- All the build tooling stuff
│   ├── /lib/
│   ├── build.js
│   ├── bundle.js
│   ├── clean.js
│   ├── copy.js
│   ├── deploy.js
│   ├── postcss.config.js
│   ├── README.md
│   ├── render.js
│   ├── run.js
│   ├── runServer.js
│   ├── start.js
│   └── webpack.config.js
├── .babelrc.js
├── .editorconfig
├── .eslintrc.js
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .stylelintrc.js
├── .travis.yml
├── Dockerfile
├── jest.config.js
├── package.json
└── README.md

Generating a route

This will create a route that will work with the sc-ui- app structure initially generated by this package. The route generator will add a folder with an index, component, and css file in the routes directory. It will also add an entry for the new route in the route/index.js file.

The generator will do its best but it's not perfect. It's important that you check the created files for correctness.

CD into the app you want to create a route on.
Run the yeoman SocialCare app generator with :route
```
$ yo @socialcare/app:route
```
Follow the prompts

Created files

.
└── /src/
    └── /routes/
        ├── /{base path + route name kabab cased}/
        │   ├── {route name Pascal cased}.js
        │   ├── styles.css
        │   └── index.js
        └── index.js <-- Updated with new route info

Generating a component

This will create a component that will work with the sc-ui- app structure initially generated by this package. The component generator will add a folder with the component, test, and css file in the components directory.

The generator will do its best but it's not perfect. It's important that you check the created files for correctness.

CD into the app you want to create a component in.
Run the yeoman SocialCare app generator with :component
```
$ yo @socialcare/app:component
```
Follow the prompts

Created files

.
└── /src/
    └── /components/
        └── /{base path + route name kabab cased}/
            ├── {component name Pascal cased}.js
            ├── {component name Pascal cased}.test.js
            └── styles.css

Generating an action / reducer

This will create an action and reducer* that will work with the sc-ui- app structure initially generated by this package. The action generator will add a files to the src/action and src/reducers folders it will also create constants for these actions.

The generator will do its best but it's not perfect. It's important that you check the created files for correctness.

CD into the app you want to create a component in.
Run the yeoman SocialCare app generator with :action
```
$ yo @socialcare/app:action
```
Follow the prompts

touched files

.
└── /src/
    ├── /constants/
    │   └── index.js <-- updated
    ├── /actions/
    │   ├── {action name Pascal cased}.js
    │   ├── {action name Pascal cased}.test.js
    │   └── index.js <-- updated
    └── /reducers/
        ├── {action name Pascal cased}.js
        ├── {action name Pascal cased}-error.js*
        ├── {action name Pascal cased}-status.js*
        ├── {action name Pascal cased}.test.js
        └── index.js <-- updated

(*) Notes files that may be created under some conditions.