generator-electrode

generator-electrode

Generate Electrode Isomorphic Universal React App with NodeJS backend or a React component with useful gulp tasks for development, building and publishing.

Installation

First, install Yeoman, gulp, and generator-electrode using npm (we assume you have pre-installed node.js (> 4.2.x required)).

$ npm install -g yo gulp generator-electrode

Note: You may need add sudo to the command.

Then generate your new project:

$ mkdir your-project-name
$ cd your-project-name
$ yo electrode

Note: If the app is not properly generated at the correct destination, make sure you do not have a .yo-rc.json file hidden in your CWD.

Here is a sample screen capture the app generation process.

Running the app

Once the application is generated and npm install is completed, you are ready to try it out.

$ npm start

Wait for webpack to be ready and navigate to http://localhost:3000 with your browser.

You can run gulp to see the list of tasks available.

Some common ones:

• gulp dev - start in webpack-dev-server development mode
• gulp hot - start in webpack-dev-server hot mode
• gulp build - build production dist files
• gulp server-prod - start server in production mode
• gulp check - run unit tests with coverage

Generating a React Component

Install the generator if you haven't already:

npm install -g generator-electrode

Then run the generator:

yo electrode:component

...and follow the prompts.

Developing Your Component

Source

Your component source code is in packages/componentName/src. You can use JSX and ES6 syntax freely in your component source; it will be transpiled to lib with Babel before being published to npm so that your users will simply be able to include it.

It's a great idea to add a description, documentation and other information to your README.md file, to help people who are interested in using your component.

The component project structure uses a Lerna structure, which can help manage multiple repos within your packages directory. Your initial project structure will be :

test-component/
├── README.md
├── demo-app
│   ├── LICENSE
│   ├── README.md
│   ├── config
│   │   ├── default.js
│   │   ├── development.json
│   │   ├── production.js
│   │   └── production.json
│   ├── gulpfile.js
│   ├── package.json
│   ├── src
│   │   ├── client
│   │   │   ├── actions
│   │   │   │   └── index.jsx
│   │   │   ├── app.jsx
│   │   │   ├── components
│   │   │   │   └── home.jsx
│   │   │   ├── images
│   │   │   │   └── electrode.png
│   │   │   ├── reducers
│   │   │   │   └── index.jsx
│   │   │   ├── routes.jsx
│   │   │   └── styles
│   │   │       └── base.css
│   │   └── server
│   │       ├── index.js
│   │       └── views
│   │           └── index-view.jsx
│   └── test
│       ├── client
│       │   └── components
│       │       └── home.spec.jsx
│       └── server
├── lerna.json
├── package.json
└── packages
    └── test-component
        ├── README.md
        ├── gulpfile.js
        ├── package.json
        ├── src
        │   ├── components
        │   │   └── test-component.jsx
        │   ├── index.js
        │   ├── lang
        │   │   ├── default-messages.js
        │   │   ├── en.json
        │   │   └── tenants
        │   │       └── electrodeio
        │   │           └── default-messages.js
        │   └── styles
        │       └── test-component.css
        └── test
            └── client
                └── components
                    ├── helpers
                    │   └── intl-enzyme-test-helper.js
                    └── test-component.spec.jsx

Adding Components to the Repo

The component structure shown above supports multiple packages under the packages folder. You can add another component to your project by running yo electrode:component-add from within the packages directory.

$ cd packages
$ yo electrode:component-add

And follow the prompts.

This will generate a new package and also update the demo-app. The demo-app/src/client/components/home.jsx and demo-app/package.json will be overwritten during the update.

Here is a sample screen capture the component generation process.

Example and Preview

Preview your component by using the demo-app. This is an electrode app which uses your newly created component:

$ cd demo-app
$ gulp demo

A webserver will be started on localhost:3000. Your new component will be used in demo-app/src/client/components/home.jsx

You can use this demo-app to test your component, then publish it to let potential users try out your component and see what it can do.

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

Built with ❤️ by Team Electrode @WalmartLabs.

License

Apache-2.0 © WalmartLabs