Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs. separated instructions for clone and step by step #10

Merged
merged 7 commits into from
Sep 14, 2016
Merged

docs. separated instructions for clone and step by step #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
26a1852
docs. added preliminary redux router + separation
raydecastro Sep 14, 2016
28f4517
docs. stole electrode csrf instructions from chris
raydecastro Sep 14, 2016
92e9c42
docs. added csrf links.
raydecastro Sep 14, 2016
5aadd50
Merge remote-tracking branch 'upstream/master'
raydecastro Sep 14, 2016
8879ec3
docs. minor text correction.
raydecastro Sep 14, 2016
04790f7
merge. pulled latest + resolved conflicts.
raydecastro Sep 14, 2016
8736ac9
docs. added space.
raydecastro Sep 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 62 additions & 66 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,55 @@
# Electrode App with Electrode Modules
A sample Electrode app generated using `yo electrode` that demonstrates the usage of several Electrode modules.
# Electrode Boilerplate Universal React Node
- This repo is a sample Electrode app with the following Electrode modules:
- [Electrode Confippet](https://github.com/electrode-io/electrode-confippet)
- [Electrode CSRF JWT](https://github.com/electrode-io/electrode-csrf-jwt)
- [Electrode Javascript Bundle Viewer](https://github.com/electrode-io/electrify)
- [Electrode Redux Router Engine](https://github.com/electrode-io/electrode-redux-router-engine)

## Install and Run

If cloning or forking this repo, simply install via `npm` and run with `gulp`:

```bash
$ npm install
$ NODE_ENV=development gulp hot
```

The app should be accessible at http://127.0.0.1:3000/

## Starting from Scratch

This app was generated using [yeoman](yeoman.io) and instructions for recreating it from scratch are provided below.

First, install `yeoman` and `electrode-generator`:
## Install

```bash
$ npm install -g yo
$ npm install -g generator-electrode
git clone https://github.com/electrode-io/electrode-boilerplate-universal-react-node.git
cd hapiApp
npm install
```

Scaffold a new app using `yeoman`:
## Run
- Start the electrode app in `development` environment:

```bash
$ mkdir electrode-app-csrf-jwt
$ cd electrode-app-csrf-jwt
$ yo electrode
$ NODE_ENV=development gulp hot
```

At this point, you should be able to run the server locally:
- Start the electrode app in `production` environment:

```bash
$ npm install
$ NODE_ENV=development gulp hot
$ NODE_ENV=production gulp hot
```

## Electrode Module Demos

This application already contains demonstration code for the following modules. If you're starting from scratch using scaffolding, you can find instructions for adding and configuring individual modules below.

- [Electrode Confippet](#electrode-confippet)
- [Electrode CSRF-JWT](#electrode-csrf-jwt)

## Electrode Confippet
- Running in the selected environment should load the appropriate configuration settings

[Confippet](https://github.com/electrode-io/electrode-confippet) is a versatile utility for managing your NodeJS application configuration. Its goal is customization and extensibility, but offers a preset config out of the box.
## Instructions
- You can build the app from scratch by following the instructions below:
- [Electrode Confippet](#electrode-confippet)
- [Electrode CSRF JWT](#csrf-jwt)
- [Electrode Javascript Bundle Viewer](#bundle-viewer)
- [Electrode Redux Router Engine](#redux-router-engine)

---
## <a name="electrode-confippet"></a>Electrode Confippet ##
- [Confippet](https://github.com/electrode-io/electrode-confippet) is a versatile utility for managing your NodeJS application configuration. Its goal is customization and extensibility, but offers a preset config out of the box.
- Scaffold an electrode app using the following commands:

### Installation
### Install

```bash
$ npm install electrode-confippet --save
npm install -g yo
npm install -g generator-electrode
yo electrode
```

#### Config Files
#### Config
- Once the scaffolding is complete, open the following config files:

```
config
Expand All @@ -64,9 +58,8 @@ config
|_ production.json
```

#### Development Environment

Update the `config/development.json` to have the following settings:
#### Development environment
- Update the `config/development.json` to have the following settings:

```json
{
Expand All @@ -87,11 +80,10 @@ Update the `config/development.json` to have the following settings:
}
```

The above settings should show server log errors that may be beneficial for debugging, disable content encoding, and run the server in port 3000
- The above settings should show server log errors that may be beneficial for debugging, disable content encoding, and run the server in port 3000

#### Production Environment

Update the `config/production.json` to have the following settings:
#### Production environment
- Update the `config/production.json` to have the following settings:

```json
{
Expand All @@ -117,9 +109,8 @@ Update the `config/production.json` to have the following settings:
- The `connections` key are electrode server specific: https://github.com/electrode-io/electrode-server/tree/master/lib/config
- Keys that exist in the `config/default.json` that are also in the other environment configs will be replaced by the environment specific versions

#### Confippet Require

In Electrode, the configurations are loaded from `server/index.js` at this line:
#### Require
- In Electrode, the configurations are loaded from `server/index.js` at this line:

```javascript
const config = require("electrode-confippet").config;
Expand All @@ -128,8 +119,7 @@ const staticPathsDecor = require("electrode-static-paths");
require("electrode-server")(config, [staticPathsDecor()]);
```

#### Running Electrode app

#### Run
- Start the electrode app in `development` environment:

```bash
Expand All @@ -145,28 +135,25 @@ $ NODE_ENV=production gulp hot
- Running in the selected environment should load the appropriate configuration settings

---

## Electrode CSRF-JWT

## <a name="csrf-jwt"></a>Electrode CSRF-JWT
[CSRF-JWT](https://github.com/electrode-io/electrode-csrf-jwt) is an Electrode plugin that allows you to authenticate HTTP requests using JWT in your Electrode applications.

### Installation

Add the `electrode-csrf-jwt` component:
### Install
- Add the `electrode-csrf-jwt` component:

```bash
$ npm install electrode-csrf-jwt --save
npm install electrode-csrf-jwt --save
```

Next, register the plugin with the Electrode server. Add the following configuration to the `plugins` section of `config/default.json`:
- Next, register the plugin with the Electrode server. Add the following configuration to the `plugins` section of `config/default.json`:

```json
"electrode-csrf-jwt": {
"options": {
"secret": "test",
"expiresIn": 60
}
}
"electrode-csrf-jwt": {
"options": {
"secret": "test",
"expiresIn": 60
}
}
```

That's it! CSRF protection will be automatically enabled for endpoints added to the app. CSRF JWT tokens will be returned in the headers and set as cookies for every response and must be provided as both a header and a cookie in every `POST` request.
Expand All @@ -181,7 +168,7 @@ In addition to the above steps, the following modifications were made in order t
* AJAX testing logic was added to `client/components/csrf.jsx`

---
## Electrode Javascript Bundle Viewer - How to use/integrate guide ##
## <a name="bundle-viewer"></a>Electrode Javascript Bundle Viewer - How to use/integrate guide ##

Electrode Javascript bundle viewer is named [electrify](https://github.com/electrode-io/electrify), it is a tool that helps for analyzing the module tree of webpack based projects. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build/install process.

Expand All @@ -196,3 +183,12 @@ Electrode Javascript bundle viewer is named [electrify](https://github.com/elect
When you install electrify globally using `sudo npm install -g electrode-electrify`, `electrify` command-line tool is made available as the quickest means of checking out your bundle. As of `electrode-electrify v1.0.0`, the tool takes any [webpack-stats](http://webpack.github.io/docs/node.js-api.html#stats-tojson) object as input and starts out a standalone HTML page as output in your browser, all you have to do is type `electrify <path to stats.json> --open` on your terminal.

Head over to the electrify [repository](https://github.com/electrode-io/electrify#electrify) for a detailed view of the bundle viewer and checkout the source-code. [electrify](https://github.com/electrode-io/electrify) relies on webpack to generate the application modules/dependency tree and is independent of whichever server framework(hapijs, expressjs, etc.) you choose to use.

---
## <a name="redux-router-engine"></a>Electrode Redux Router Engine ##
- [Redux Router Engine](https://github.com/electrode-io/electrode-redux-router-engine) handles async data for React Server Side Rendering using [react-router], Redux, and the [Redux Server Rendering] pattern.

### Install
```
npm install --save electrode-redux-router-engine
```
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"dependencies": {
"bluebird": "^2.10.2",
"electrode-csrf-jwt": "^3.0.1",
"electrode-redux-router-engine": "^1.0.0",
"electrode-router-resolver-engine": "^1.0.0",
"electrode-server": "^1.0.0",
"electrode-static-paths": "^1.0.0",
Expand Down