Electrode Example App

Electrode example application

Build With Us

This Electrode example app is created by following our Getting Started: Quick Start and Intermediate Guide. We start with our out-the-box Electrode App generator, create and publish an awesome standalone component and add a custom Hapi server plugin, routes and CSS modules.

Installation

$ git clone your-forked-version-of-this app
$ npm install

Note: You will need to generate a GitHup Api oAuth token to remove the preset limit for API requests. We have already added the code to accept and use the token in our Hapi server plugin above const AUTH_TOKEN = process.env.token.

Click here to set a new personal access token (you may be prompted to login to your GitHub account if you have not already). Create your own token description in the form given and for Select scopes simply check: public repo. Then hit the green Generate token button.

You will be redirected to the next page where your new token is. Keep your token private and secure; do not copy and paste it directly into your app. Instead, we will set your token as a Node environment variable. Copy and save this token in a secure place; we will use it several times. Use this token in your command line as follows:

Set the token locally:

$ token='your-token-here' gulp dev

Navigate to your browser and run localhost:3000 and have fun. Open this application in your favorite text editor to examine the code, personalize the application and add more Electrode components. You can view the Heroku deployed version of this example app here.

##Features This example app is built on the Electrode Boilerplate and contains the following technologies:

• React is an awesome JavaScript library for building user interfaces, created by Facebook.

• Redux a predictable state container for JavaScript apps. #game-changer.

• React Router is a powerful routing library built on top of React.

• CSS Modules a CSS file in which all class names and animation names are scoped locally by default. Fixes the problem of the global scope in CSS. #winning

• Universal rendering built in.

• Webpack a powerful module bundler.

• Webpack Isomorphic Loader a powerful tool that makes NodeJS require understand files such as images for SSR.

• Babel transpiles ES6 + 7.

• ESLint a pluggable linting utility for Javascript.

• Mocha a feature-rich Javascript testing framework.

• Enzyme a Javascript testing utility for React, created by airbnb.

• TravisCI a continuous integration service to build and test software projects.

• Gulp a Javascript build tool that lets us automate tasks.

• Yeoman a Scaffolding tool for modern webapps.

• History a Javascript library for managing session history.

• Bluebird a great Javascript promise library.

• Electrode Confippet Confippet is a versatile, flexible utility for managing configurations of Node.js applications.

• Electrode JWT CSRF Cross-Site Request Forgery (CSRF) protection with JWT.

• Electrode-Redux-Router-Engine An Electrode routing and rendering engine for react-router and redux.

• Component Caching Optimize React SSR with profiling and component caching.

• Electrode-Server A configurable web server using Hapi.js on top of Node.js.

• Electrify Tool for analyzing the module tree of webpack projects.

• Electrode-Docgen A custom metadata extractor for the Electrode framework, automates component documentation.

License

Apache-2.0 © tiffine-koch