20 |
21 | React Isomorphic Example
22 |
23 |
24 |
This is demo of react-isomorphic-example
25 |
You can view page source and see html tags with "data-reactid" attibutes. This indicates that page is initially rendered on server
26 |
For Example:
27 |
{'
'}
28 |
After javascript is loaded, reactjs picks up on client side to provide interactivity
29 |
32 |
{message}
33 |
34 |
35 | );
36 | }
37 | })
38 |
39 | if (ExecutionEnvironment.canUseDOM) {
40 | document.addEventListener('DOMContentLoaded', function () {
41 | React.render(React.createElement(App), document.body);
42 | });
43 | } else {
44 | module.exports = React.renderToString(React.createElement(App));
45 | }
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/client/app.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | // body {
4 | // display: flex;
5 | // justify-content: center;
6 | // width: 100%;
7 | // }
8 |
9 | // .container {
10 | // display: flex;
11 | // flex-direction: column;
12 | // width: 80%;
13 | // }
14 |
15 | // .header {
16 | // color: white;
17 | // background: #004876;
18 | // padding: 20px;
19 | // font-size: 24px;
20 | // }
--------------------------------------------------------------------------------
/client/count.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var Count = React.createClass({
4 | getInitialState: function () {
5 | return {count: 1}
6 | },
7 | incr: function () {
8 | this.setState({count: this.state.count + 1});
9 | },
10 | render: function () {
11 | return (
12 |
13 |
14 |
{this.state.count}
15 |
16 | );
17 | }
18 | })
19 |
20 | module.exports = Count;
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var gutil = require('gulp-util');
3 | var del = require('del');
4 | var sass = require('gulp-sass');
5 | var webpack = require('webpack');
6 | var WebpackDevServer = require('webpack-dev-server');
7 |
8 | gulp.task('clean', function () {
9 | del('./build/*', function () {
10 | console.log('cleaning done');
11 | });
12 | });
13 |
14 | gulp.task('sass', function () {
15 | return gulp.src(['./client/**/*.{scss,sass}'])
16 | .pipe(sass({ includePaths : ['bower_components', 'node_modules'], errLogToConsole: true}))
17 | .pipe(gulp.dest('./build'));
18 | });
19 |
20 | // gulp.task('webpack', function (callback) {
21 | // var myConfig = require('./webpack.config.js');
22 | // var webpackCompiler = webpack(myConfig, function(err, stats) {
23 | // if(err) throw new gutil.PluginError("webpack:build", err);
24 | // gutil.log("[webpack:build]", stats.toString({
25 | // colors: true
26 | // }));
27 | // callback();
28 | // });
29 | // });
30 |
31 | gulp.task('watch', ['sass'], function () {
32 | gulp.watch(['./client/**/*.{scss,sass}'], ['sass']);
33 | // gulp.watch(['./client/**/*.{js,jsx}'], ['webpack']);
34 | });
35 |
36 |
37 | // gulp.task('server', function (callback) {
38 | // var myConfig = require('./webpack.config.js');
39 | // var webpackCompiler = webpack(myConfig, function(err, stats) {
40 | // });
41 |
42 | // new WebpackDevServer(webpackCompiler, {
43 | // contentBase: './build',
44 | // hot: true,
45 | // debug: true
46 | // }).listen(4000, 'localhost', function (err, result) {
47 | // });
48 | // });
49 |
50 | gulp.task('default', ['watch']);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-isomorphic-example",
3 | "version": "0.1.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "./node_modules/.bin/nodemon server/app.js"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/akiran/react-isomorphic-example"
12 | },
13 | "author": "",
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/akiran/react-isomorphic-example/issues"
17 | },
18 | "homepage": "https://github.com/akiran/react-isomorphic-example",
19 | "dependencies": {
20 | "autoprefixer-core": "^5.0.0",
21 | "css-loader": "^0.9.1",
22 | "enhanced-require": "^0.5.0-beta6",
23 | "express": "^4.11.1",
24 | "jade": "^1.9.1",
25 | "lodash": "^2.4.1",
26 | "object-assign": "^2.0.0",
27 | "postcss-loader": "^0.3.0",
28 | "react": "^0.12.2",
29 | "sass-loader": "^0.3.1",
30 | "style-loader": "^0.8.3"
31 | },
32 | "devDependencies": {
33 | "6to5": "^2.13.7",
34 | "6to5-loader": "^2.0.0",
35 | "del": "^1.1.1",
36 | "expose-loader": "^0.6.0",
37 | "gulp": "^3.8.10",
38 | "gulp-sass": "^1.3.2",
39 | "gulp-util": "^3.0.2",
40 | "jsx-loader": "^0.12.2",
41 | "webpack": "^1.5.1",
42 | "webpack-dev-middleware": "^1.0.11",
43 | "webpack-dev-server": "^1.7.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var webpack = require('webpack');
3 | var webpackMiddleware = require('webpack-dev-middleware');
4 | var webpackConfig = require('../webpack.config.js');
5 | var path =require('path');
6 |
7 | var app = express();
8 | app.use(express.static(path.join(__dirname, '../build')));
9 |
10 | app.use(webpackMiddleware(webpack(webpackConfig), {
11 | }));
12 |
13 | app.use('/', require('./demo'));
14 |
15 | app.listen('8000');
--------------------------------------------------------------------------------
/server/demo.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var router = express.Router();
3 | var webpackConfig = require('../webpack.config.js');
4 | var assign = require('object-assign');
5 | var _ = require('lodash');
6 | var fs = require('fs');
7 | var path = require('path');
8 |
9 | var requireConfig = assign({}, webpackConfig, {
10 | recursive: true,
11 | // hot: true,
12 | });
13 | var webpackRequire = require("enhanced-require")(module, requireConfig);
14 |
15 | var content = webpackRequire("../client/app");
16 | var template = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf8');
17 | var jsPath = process.env.NODE_ENV === 'production' ? 'http://static.webrafter.com' : '';
18 | jsPath += '/react-isomorphic-example.js';
19 |
20 | router.get('/', function (req, res) {
21 | var html = _.template(template, {content: content, jsPath: jsPath});
22 | res.status(200).send(html);
23 | });
24 |
25 | module.exports = router;
--------------------------------------------------------------------------------
/server/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
React Isomorphic example
8 |
9 |
10 |
11 |
12 |
13 | <%= content %>
14 |
15 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 | var autoprefixer = require('autoprefixer-core');
4 |
5 | module.exports = {
6 | entry: {
7 | 'react-isomorphic-example.js': './client/app.jsx'
8 | // 'app.js': './client/app.jsx'
9 | },
10 | output: {
11 | path: path.join(__dirname, 'build'),
12 | filename: '[name]',
13 | },
14 | module: {
15 | loaders: [
16 | {test: /\.jsx$/, loaders: ['jsx?harmony']},
17 | {
18 | test: /\.scss$/,
19 | loader: "style!css!sass?outputStyle=expanded&" +
20 | "includePaths[]=" +
21 | (path.resolve(__dirname, "./bower_components")) + "&" +
22 | "includePaths[]=" +
23 | (path.resolve(__dirname, "./node_modules"))
24 | },
25 | ],
26 | },
27 | // postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ],
28 | resolve : {
29 | alias: {
30 |
31 | },
32 | extensions: ['', '.js', '.jsx']
33 | },
34 | plugins: [
35 | ]
36 | };
--------------------------------------------------------------------------------