lancetw / react-isomorphic-bundle

React Redux Universal (isomorphic) bundle

React Redux Universal (isomorphic) bundle

=================

Learning from isomorphic-flux-boilerplate but use Redux.

DEMO

Demo site (iisnode): eventtest.oursweb.net

Installation

$ npm uninstall -g babel #completely remove babel@5
$ npm install -g nodemon webpack babel-cli node-inspector
$ npm install

edit ./config/sequelize/config.json

change dialect from "postgres" to "sqlite" if you want a simple start.

$ npm install sqlite3

DEVELOPMENT

npm run dev (wait until the terminal shows: "webpack: bundle is now VALID".)

Press "Ctrl + h" to switch redux devtools

• open http://127.0.0.1:3000

PRODUCTION

Build and run

• Linux / Mac npm start

• Windows (Git Bash) npm run prestart && NODE_ENV=production npm run win-start

Manual build

make build or make clean && make fast-build (clean up and rebuild all)

DEBUG

npm run debug

• open http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
• open http://127.0.0.1:3000

Features

• based on React 0.14.*
• universal(isomorphic), supported JSON Web Tokens (JWT) and Sessions (levelDB)
• change flummox to redux
• [email protected]
• register (with recaptcha)
• log in
• Facebook sign in
• Google OAuth sign in
• restful API with JSON Web Tokens
• change password
• create posts
• modify posts
• delete posts
• i18n / language switcher
• Traditional Chinese and Simplified Chinese Conversion (New Tong Wen Tang)
• files/images uploader (dropzone)
• advertisement scripts support
• Google maps with HTML5 Geolocation
• Google maps with driving directions
• post list with infinite scroll (use requestAnimationFrame)
• post list with calendar
• serverside async data-fetching (great thanks to universal-redux-boilerplate)
• simple full text Search
• image slider
• admin pages (manage posts and users)
• nearby map (PostGIS)
• RSS Feed (Atom)
• sitemap
• Google Analytics
• social network share buttons

You might be interested in...

• redux
• flummox
• react-router
• universal-redux-boilerplate
• isomorphic-flux-boilerplate
• tcomb-form
• parameter
• Semantic UI
• koa
• koa-resource-router
• koa-router
• koa-generic-session
• leveldb
• koa-level
• passport
• passport-facebook
• passport-google-oauth
• passport-jwt
• node-jsonwebtoken
• sequelize
• superagent
• webpack
• postcss
• postscribe
• babeljs
• react-hot-loader
• react-translate-component
• react-dropzone
• react-day-picker
• google-map-react
• react-list
• Css Shake
• react-paginate
• nuka-carousel
• react-google-recaptcha
• 新同文堂 for Web
• react-spinkit
• react-helmet
• react-burger-menu
• animation-frame
• react-ga
• react-share
• react-router-sitemap

react-isomorphic-bundle's Issues

Consider updating to Redux 1.0 RC

Redux 1.0 RC is out with breaking changes. No further API changes are expected in 1.0 so it may be a good time to port the example to 1.0 RC (in a branch). We will release 1.0 when the docs are ready.

You can find the comprehensive list of the changes in 1.0 RC against 1.0 alpha in the Redux 1.0 RC release notes. If you haven't ported to alpha yet, you'll need to apply changes from 0.12 to alpha first.

Thank you!
Please make sure to report any issues so we can release a stable 1.0.

App is not running (though everything seemed fine)

I try to go and see http://127.0.0.1:3000 but all I get is Failed to load resource: net::ERR_CONNECTION_REFUSED. Its curious because all the bundling was made without error. The app looks great, It's disappointing.... what did I do wrong ? Thank you.

Minimum universal react API

Hi, I've been working on https://github.com/guidsen/react-simple-universal that solved the boilerplate involved with universal React Apps.

I'm really curious about your thoughts about this and would love to have some help evolving this repo.

Error: Cannot find module 'F:\webpack\bin\webpack.js'

I am very intrigued with your package. I have installed everything. I only had to replace the bcrypt dependency with "co-bcryptjs": "^0.2.0" to avoid hassle of trying to build bcrypt on Windows.

So I run npm run build and it returns:

F:\_vms\HomesteadCode\_live\misc\react-isomorphic-bundle>npm run build

> [email protected] build F:\_vms\HomesteadCode\_live\misc\react-isomorphic-bundle
> make build

      0 [main] find 14868 open_stackdumpfile: Dumping stack trace to find.exe.stackdump
      0 [main] find 14836 open_stackdumpfile: Dumping stack trace to find.exe.stackdump
      0 [main] find 14908 open_stackdumpfile: Dumping stack trace to find.exe.stackdump
      0 [main] find 14952 open_stackdumpfile: Dumping stack trace to find.exe.stackdump
      0 [main] find 14972 open_stackdumpfile: Dumping stack trace to find.exe.stackdump
      0 [main] dirname 15020 open_stackdumpfile: Dumping stack trace to dirname.exe.stackdump
      0 [main] uname 15100 open_stackdumpfile: Dumping stack trace to uname.exe.stackdump
module.js:338
    throw err;
          ^
Error: Cannot find module 'F:\webpack\bin\webpack.js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3
make: *** [public/assets] Error 1

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "F:\\Program Files\\nodejs\\\\node.exe" "F:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `make build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'make build'.
npm ERR! This is most likely a problem with the react-isomorphic-bundle package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     make build
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-isomorphic-bundle
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     F:\_vms\HomesteadCode\_live\misc\react-isomorphic-bundle\npm-debug.log

Errors building - missing files

I'm getting a few errors during the build process. Specifically, one around the use of leveldb, and another with the missing react-isomorphic-bundle/storage/webpack-stats.json file. The demo looks great and I hope to get off the ground with this. Thanks for making this.

leveldb
events.js:85
throw er; // Unhandled 'error' event
^
OpenError: IO error: ./storage/leveldb/LOCK: No such file or directory
at /Users/machine/Desktop/git/react-isomorphic-bundle/node_modules/levelup/lib/levelup.js:119:34
at /Users/machine/Desktop/git/react-isomorphic-bundle/node_modules/leveldown/node_modules/abstract-leveldown/abstract-leveldown.js:39:16
9 Jul 04:28:25 - [nodemon] app crashed - waiting for file changes before starting...

Missing webpack-stats
fs.js:565
fs.write = function(fd, buffer, offset, length, position, callback) {
^
Error: ENOENT, no such file or directory '/Users/machine/Desktop/git/react-isomorphic-bundle/storage/webpack-stats.json'
at Error (native)
at Object.fs.openSync (fs.js:500:18)
at Object.fs.writeFileSync (fs.js:1099:15)
at Tapable.exports.default (/Users/machine/Desktop/git/react-isomorphic-bundle/webpack/utils/write-stats.js:46:6)

User model issue

User model associates posts model and userInfo model based on id foreign key. That will create a new constraint on both posts and userInfo tables that associate id to users table where it should be uid to users table. Hence this will cause a potential bigger issue of failure if you try to insert a post that points to non-existing user id or it may point to the wrong one.

These are the offensive lines
https://github.com/lancetw/react-isomorphic-bundle/blob/master/src/server/db/models/user.js#L32
https://github.com/lancetw/react-isomorphic-bundle/blob/master/src/server/db/models/user.js#L35

they should pont to uid like so...

associate: function (models) {
        User.hasMany(models.posts, {
          foreignKey: 'uid'
        });
        User.hasOne(models.usersInfo, {
          foreignKey: 'uid'
        });
      }

old nodejs in iisnode?

Do you run inside iisnode? If so, can you run the latest nodejs in iisnode? I am looking at a similar software stack and wanted to know any issues you found with iisnode for this repository.

Post component fails on server rendering

Currently if you go /post and try to hard refresh the page, you get 500 error message.

TypeError: [tcomb] [tcomb-form] missing required prop type

tried to figure out what is it with no success.

Issues with LocaleChange

I see nearly in every component to fire an even change for counterpart in the constructor

counterpart.onLocaleChange(::this.handleLocaleChange)
but you never release that event.

This will cause issues as it will fire the event change even if the component is not mounted.

I think you need to handle locale change only in componentDidMount()
and you need to clear the event change in componentWillUnmount ()

Otherwise you will see this warning always nearly in every component.

setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for (component)

I see you have a base component and I think this would be the place to handle locale change if a component inherits from it. If you are against the idea of inheritance in JS (I am), you might consider using higher order components instead.