Edit on GitHub

What's Inside

Explore More #

What does generate-electrode give you? Let's go through the most important files to understand the structure of your new app.


This is the home React component for your app. React is a JavaScript library for building user interfaces. A simplified way to look at React is that it can be used as the View in a Model-View-Controller application. It was created by Facebook and is being actively developed.

Building with React lets developers create a modular and reusable component architecture. We can then reuse the business logic in existing models and controllers because React components encapsulate only the view layer. The components you write are self-contained, which aids developers in quickly determining what a component does directly by reading the source. Finally, it is ideally suited to Universal JavaScript (previously called Isomorphic JavaScript), the practice of sharing code between the server and the client.


We will use CSS Modules: a CSS file in which all class names and animation names are scoped locally by default. At WalmartLabs, this helps us tackle large-scale styling requirements by mitigating the issues inherent in the global scope in CSS.


To help you understand what client/app.jsx is doing, including the relationship between client and server, we've broken down each part of this file with a brief explanation below, including links to sources where you can learn even more:

  import React from "react";
  import { routes } from "./routes";
  import { Router } from "react-router";

Any real world web application needs to be able to handle different routes serving different content, so how do we handle the concept of routing in the Electrode platform? The library chosen to take care of this for us is react-router.

Why react-router? The project is mature, well-documented, and integrates well within the Electrode tech stack.

import {createStore} from "redux";
import {Provider} from "react-redux";

Redux is a state management library where your application data is in a store which contains a single object tree. This store is the single source of truth for your application and holds the state of your application. The store provides api's to access and update the state of your application. React-Redux is the official binding for Redux and React.

The rest of the code in client/app.jsx sets up the React app to run when the page is loaded. The selector is based on the <div> in <your-awesome-app>/server/plugins/webapp/index.html.

  window.webappStart = () => {
      () => <Router>{routes}</Router>,

If you have a universal application and server-side rendering, react-resolver handles bootstrapping server-rendered markup via Resolver.render instead of ReactDOM.render.


We will be sharing our routes between server and client, so obviously we only want to define them in one place. The client/routes.jsx encapsulates the routing logic accordingly.


In this folder we are leveraging one of our most important stand alone modules: Electrode-Confippet. Confippet is a versatile utility for managing your NodeJS application configuration. Its goal is customization and extensibility while offering a preset configuration out of the box.

    ├── default.json
    ├── development.json
    └── production.json

We use this to keep environment-specific configurations manageable. Once you have your configuration files setup accordingly, you can simply pass the config object to electrode server.


    ├── index.js
    ├── plugins
    │   └── webapp
    │       ├── index.html
    │       └── index.js
    └── views
        └── index-view.jsx

You are now using Electrode-Server, a NodeJS module that allows you to start up a Hapi server with a single function call, but gives you a lot of flexibility through configurations. This is the baseline functionality of a Hapi web server that you can extend via configuration.

Before we move on, we should inspect a critical file, <your-awesome-app>/server/plugins/webapp/index.html. This is where the server-side rendering magic happens, implemented automatically via generate-electrode:

  <!DOCTYPE html>
  <html lang="en">
      <meta charset="UTF-8">
      <div class="js-content">{{SSR_CONTENT}}</div>
      <script>if (window.webappStart) webappStart();</script>

All of your content will be served as an HTML string and placed in this unassuming piece of code:

  <div class="js-content">{{SSR_CONTENT}}</div>

This includes React components and Redux. To achieve this, the Electrode team has created another powerful module to optimize performance for an out-of-the-box Universal app: Electrode-Redux-Router-Engine, which takes React routes and requests and returns HTML to be rendered by electrode-react-webapp. We have found this to be the best tool for dealing with asynchronous redux actions.


This is where we extend our electrode-archetype-react-app Babel configuration to use the ES6 presets, as well as specifying any plugins or projects that need additional Babel settings.


This powerful tool makes NodeJS require work with files such as images for server-side rendering. It contains three pieces: a Webpack loader, Webpack plugin, and a library for your NodeJS app.

With generator-electrode, we've created a dynamic and performant full stack Electrode app in under five minutes, using some of our favorite technologies, like React and Hapi. Let's explore and personalize this web application in our next section, Intermediate: Create a Resuable Component.