Skip to content

Commit

Permalink
Merge pull request #1 from tswayne/cli
Browse files Browse the repository at this point in the history
Cli
  • Loading branch information
tswayne authored Mar 28, 2017
2 parents ddebe26 + cada5cc commit 954eec1
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 16 deletions.
57 changes: 47 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
# React Helper
### Easily add react to your pre-existing node application
### Easily add react to your pre-existing mvc node application
There are tons of resources and tools out there to help developers get started with react and start a fresh new react app; however, there
are not many tools out there there to help those who want to add react to an existing app (built with node). React-helper makes it extremely easy to
add react components to your views, so you can jump right into writing react components without having to worry too much about setup.

### Table of Contents
* [Features](#features)
* [Getting Started](#getting-started)
* [Using the cli](#cli)
* [Manually adding react-helper](#manual)
* [Setup](#setup)
* [Server Side Rendering](#server-side)
* [Example application](#example)

<a id="features"></a>
## Features:
* Extremely easy to add react components to your views
* Setting up is a breeze. Add react to your app with one command using the cli.

`react-helper init -w`

* Extremely easy to add react components to your views.

**Controller**:

Expand All @@ -21,7 +35,7 @@ add react components to your views, so you can jump right into writing react com
<h1>This view has react in it</h1>
{{{component}}}
```
* Pass server-side data to components: You can now _easily_ pass data from your server to your react components.
* Pass server-side data to components: You can _easily_ pass data from your server to your react components.

**Controller**: _example passing results from mongo query to react component_

Expand All @@ -42,8 +56,25 @@ add react components to your views, so you can jump right into writing react com
const component = reactHelper.renderComponent(SignUp) //IT'S THIS EASY
res.render('view-to-render', {component})
```
<a id="getting-started"></a>
## Getting started
<a id="cli"></a>
### Using the CLI
You can now add react-helper to your app with one command!
1. `npm install react-helper -G`
2. react-helper init [options]
Options:
-h, --help output usage information
-p, --bundle-path <bundlePath> Bundle path | Defaults to './public/javascript'
-n, --bundle-name <bundleName> Bundle name | Defaults to 'bundle.js'
-c, --client-dir <clientDir> React app directory | Defaults to './client'
-w, --webpack Add webpack and generate config
<a id="manual"></a>
### Manually add react-helper to your application
Getting started is simple:
_For the examples, I will be using showing snippets of code from an express application using handlebars templating engine, but this helper will work with any framework and templating engine_
Expand Down Expand Up @@ -96,8 +127,10 @@ add react components to your views, so you can jump right into writing react com
<h1>This view has react in it</h1>
{{{component}}}
```
## Setup
<a id="setup"></a>
### Setup
_You can generate a webpack config when adding react-helper to your application with the CLI using the -w option_
The only setup needed is to add webpack to your project, point it to the react-helper registration file, and include the resulting javascript file in your project.
1. The only requirement react-helper has for the webpack config is that the entry point is the file that registers all of the components using react-helper.
Expand All @@ -123,10 +156,12 @@ add react components to your views, so you can jump right into writing react com
```html
<script src="public/javascript/react-bundle.js"></script>
```
<a id="server-side"></a>
## Server side rendering
Server-side rendering can be very [useful](https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/). This library makes it very easy to server-side render your components. There are two methods to server-side rendering:
**If you are using JSX in your components and would like to render your components server side** - you must pre-compile your files, see https://github.com/babel/example-node-server as an example. More coming soon.
1. In your controller, pass the relative path of your component instead of the registered component name to renderComponent:
```
const reactHelper = require('react-helper');
Expand All @@ -142,11 +177,13 @@ add react components to your views, so you can jump right into writing react com
res.render('view-to-render', {component})
```
<a id="example"></a>
## Example
Check out an example app generated with the react-helper cli using the library - https://github.com/tswayne/react-helper-example
## In progress features:
_I am creating this for use in my own project, so this will be progressing quickly_
* Webpack management: To make it even faster for you to plug in this library and hit the ground running with react, I'm going to include some tools to handle webpack
* CLI tools: Make an opinionated CLI that sets everything you need up which gets you to writing react in seconds.
## Shout out!
This library is inspired by React On Rails (https://github.com/shakacode/react_on_rails), a library that makes it insanely easy to add react to a Rails application.
Expand Down
6 changes: 6 additions & 0 deletions bin/files/registration-file.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const reactHelper = require('react-helper');

/** Register your components in this file **/
//const SomeComponent = require('./path/to/a/component');
//reactHelper.register({SomeComponent});

39 changes: 39 additions & 0 deletions bin/files/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
'use strict'
var webpack = require('webpack')
var isProdEnvironment = (process.env.NODE_ENV === 'production')
var path = require('path');

module.exports = {
cache: true,
devtool: isProdEnvironment ? 'source-map' : 'cheap-module-eval-source-map',
context: __dirname,
entry: [
'babel-polyfill',
'ENTRY_FILE_PATH',
],
output: {
filename: 'OUTPUT_FILENAME',
path: path.join(__dirname, 'OUTPUT_FILE_PATH'),
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [{
loader: 'babel-loader',
options: {
presets: [
"es2015",
"es2016",
"react"
]
}
}],
exclude: /node_modules/,
},
],
},
}
7 changes: 7 additions & 0 deletions bin/lib/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": [
"es2015",
"es2016",
"react"
]
}
83 changes: 83 additions & 0 deletions bin/react-helper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
var program = require('commander');
var exec = require('child_process').exec;
var fs = require('fs');
var async = require('async');
var path = require('path');

program
.version('cli version 1.0.0')

program
.command('init')
.description('add react to your app')
.option('-p, --bundle-path <bundlePath>', 'Bundle path', './public/javascript')
.option('-n, --bundle-name <bundleName>', 'Bundle name', 'bundle.js')
.option('-c, --client-dir <clientDir>', 'React app directory', './client')
.option('-w, --webpack', 'Add webpack and generate config', false)
.action(function(options) {
async.series([
function(callback){
console.log('Adding react-helper to app...')
exec('npm install react-helper --save', function(err, stdout, stderr) {
console.log(stdout);
callback(err);
})
},
function(callback){
console.log(`Creating react app directory at ${options.clientDir}`)
exec(`mkdir ${options.clientDir}`, function(err, stdout, stderr) {
console.log(stdout);
callback(err);
})
},
function(callback){
var registrationFilePath = path.resolve(__dirname, 'files/registration-file.js');
console.log(`Creating component registry ${options.clientDir}/registry.js`)
exec(`cp ${registrationFilePath} ${options.clientDir}/registry.js`, function(err, stdout, stderr) {
console.log(stdout);
callback(err);
})
},
function(callback) {
if (options.webpack) {
var entry = `${options.clientDir}/registry.js`;
var bundlePath = options.bundlePath;
if (!entry.includes('./')) {
entry = './' + entry;
}
if (!bundlePath.includes('./')) {
bundlePath = './' + bundlePath;
}

var filePath = path.resolve(__dirname, 'files/webpack.config.js');
console.log('Adding webpack to app...')
exec('npm install webpack babel-polyfill babel-loader babel-preset-es2015 babel-preset-es2016 babel-preset-react --save-dev', function (err, stdout, stderr) {
console.log(stdout);
console.log(`Creating webpack config`);
fs.readFile(filePath, 'utf-8', function (err, data) {
if (err) throw err;
var config = data.replace('ENTRY_FILE_PATH', entry)
.replace('OUTPUT_FILENAME', options.bundleName)
.replace('OUTPUT_FILE_PATH', bundlePath);

fs.writeFile('./webpack.config.js', config, 'utf-8', function (err) {
if (err) throw err;
console.log('webpack config created');
console.log('to build your bundle run: node_modules/.bin/webpack');
callback();
});
});
});
}
}
], function(err, results) {
if (err) {
console.log(err)
} else {
console.log('Done!')
}
})
})


program.parse(process.argv);
2 changes: 0 additions & 2 deletions lib/react-helper.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
require("babel-register");

module.exports.register = function (component){
const React = require('react');
const reactDom = require('react-dom');
Expand Down
13 changes: 9 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-helper",
"version": "1.0.9",
"version": "2.0.0",
"description": "A helper that makes it extremely easy to add react to your node app.",
"main": "index.js",
"scripts": {
Expand All @@ -21,14 +21,19 @@
},
"license": "ISC",
"dependencies": {
"async": "^2.1.5",
"babel-register": "^6.22.0",
"commander": "^2.9.0",
"escape-html": "^1.0.3",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"repository" : {
"type" : "git",
"url" : "https://github.com/tswayne/react-helper.git"
"repository": {
"type": "git",
"url": "https://github.com/tswayne/react-helper.git"
},
"bin": {
"react-helper": "./bin/react-helper"
},
"bugs": {
"url": "https://github.com/tswayne/react-helper/issues",
Expand Down

0 comments on commit 954eec1

Please sign in to comment.