Edit on GitHub

Server Config

Server Config + Confippet #

Out of the box we're given Confippet, a versatile utility for managing your NodeJS application configuration. Its goal is customization and extensibility, but it offers a preset config out of the box inside Your Awesome (Electrode) App:

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

We'll need to extend our default.json to include our friends plugin and module ./server/plugins/friends.

Navigate to <your-awesome-app>/config/development.json. Copy, paste and save friends plugin:

{
  "plugins": {
    "friends": {
      "module": "./server/plugins/friends"
    }
  }
}

You can learn more about Confippet and ways to extend your config in our Advanced Electrode App with the Confippet stand alone module.

We should update our app test to reflect the changes we have made. Navigate to <your-awesome-app>/test/client/components/home.spec.js. Override the existing code by copying and pasting the code below:

require("isomorphic-fetch");

import React from "react";
import ReactDOM from "react-dom";
import { Home } from "client/components/home";

class ChildComponent extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}

describe("Home", () => {
  let component;
  let container;
  let location;

  beforeEach(() => {
    container = document.createElement("div");
    location = { pathname: "/" };
  });

  it("has expected content with deep render", () => {
    component = ReactDOM.render(
      <Home location={location}>
        <ChildComponent />
      </Home>,
      container);
    expect(component).to.not.be.false;
  });
});

Let's check it out! We'll run through our steps to test, run the app and view it in the browser. We will need your GitHubApi token as well:

$ gulp check
$ token='your-token-here' gulp hot

Navigate to localhost:3000. Check it out! This is the Index route which renders our Home component using Server Side Rendering:

app-home-view

By tapping on the Click Here to Make it a Party link Your Awesome App routes to the /invite route, which renders the guest list component:

app-guest-list

By checking the guest list, you are setting that selected invitee object's key to {invited: true}, which tells renderFriends to render.

When all of our guests are invited to the House Party our CSS modules kick in and launch an Electrode House Party!

app-party-view

Feel free to add your own personal touch and build out your Resource List House Party. Click here to view our Heroku deployed example app.

When you're ready, you can deploy Your Awesome App to Heroku by following the previous steps in our Getting Started: Build More section. If you choose this step, make sure you set all of the Heroku configurations, including the one for our GitHub Api.

You can also navigate to Intermediate: More Deployments to learn how to deploy with Docker and Kubernetes.