Switch branches/tags
webpack-config-composer@1.0.4 webpack-config-composer@1.0.3 webpack-config-composer@1.0.2 webpack-config-composer@1.0.1 ignite-core@1.1.6 ignite-core@1.1.5 ignite-core@1.1.4 ignite-core@1.1.3 ignite-core@1.1.2 ignite-core@1.1.1 ignite-core@1.1.0 ignite-core@1.0.1 ignite-core@1.0.0 generator-electrode@4.2.4 generator-electrode@4.2.3 generator-electrode@4.2.2 generator-electrode@4.2.1 generator-electrode@4.2.0 generator-electrode@4.1.3 generator-electrode@4.1.2 generator-electrode@4.1.1 generator-electrode@4.1.0 generator-electrode@4.0.7 generator-electrode@4.0.6 generator-electrode@4.0.5 generator-electrode@4.0.4 generator-electrode@4.0.3 generator-electrode@4.0.2 generator-electrode@4.0.1 generator-electrode@4.0.0 generator-electrode@3.4.6 generator-electrode@3.4.5 generator-electrode@3.4.4 generator-electrode@3.4.3 generator-electrode@3.4.2 generator-electrode@3.4.1 generator-electrode@3.4.0 generator-electrode@3.3.4 generator-electrode@3.3.3 generator-electrode@3.3.2 generator-electrode@3.3.0 generator-electrode@3.2.0 generator-electrode@3.1.2 generator-electrode@3.1.1 generator-electrode@3.1.0 generator-electrode@3.0.4 generator-electrode@3.0.3 generator-electrode@3.0.2 generator-electrode@3.0.1 generator-electrode@2.2.0 generator-electrode@2.1.0 generator-electrode@2.0.1 generator-electrode@2.0.0 generator-electrode@1.12.0 generator-electrode@1.11.0 generator-electrode@1.10.0 generator-electrode@1.9.0 generator-electrode@1.8.0 generator-electrode@1.7.2 generator-electrode@1.7.1 generator-electrode@1.7.0 generator-electrode@1.6.1 generator-electrode@1.6.0 generator-electrode@1.5.1 generator-electrode@1.5.0 generator-electrode-component@1.4.0 generator-electrode-component@1.3.0 generator-electrode-component@1.2.4 generator-electrode-component@1.2.3 generator-electrode-component@1.2.2 generator-electrode-component@1.2.1 electrode-webpack-reporter@0.4.7 electrode-webpack-reporter@0.4.6 electrode-webpack-reporter@0.4.5 electrode-webpack-reporter@0.4.3 electrode-webpack-reporter@0.4.2 electrode-webpack-reporter@0.4.1 electrode-webpack-reporter@0.4.0 electrode-webpack-reporter@0.3.13 electrode-webpack-reporter@0.3.12 electrode-webpack-reporter@0.3.11 electrode-webpack-reporter@0.3.10 electrode-webpack-reporter@0.3.9 electrode-webpack-reporter@0.3.8 electrode-webpack-reporter@0.3.7 electrode-webpack-reporter@0.3.6 electrode-webpack-reporter@0.3.5 electrode-webpack-reporter@0.3.4 electrode-webpack-reporter@0.3.3 electrode-webpack-reporter@0.3.2 electrode-webpack-reporter@0.3.1 electrode-webpack-reporter@0.3.0 electrode-ui-logger@1.1.3 electrode-ui-logger@1.1.2 electrode-ui-logger@1.1.1 electrode-ui-logger@1.1.0 electrode-ui-logger@1.0.0 electrode-ui-config@1.1.2 electrode-ui-config@1.1.1 electrode-ui-config@1.1.0
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
component-add
component
generators
test
.eslintrc
LICENSE
README.md
package.json
xclap.js

README.md

generator-electrode

NPM version Dependency Status devDependency Status npm downloads

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

Installation

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

$ npm install -g yo xclap-cli 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 [clap] to see the list of tasks available.

Some common ones:

  • clap dev - start in webpack-dev-server development mode
  • clap hot - start in webpack-dev-server hot mode
  • clap build - build production dist files
  • clap server-prod - start server in production mode
  • clap 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
│   ├── xclap.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
        ├── xclap.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
$ clap 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