reactgo / reactgo

Your One-Stop solution for a full-stack universal Redux App!

reactGo

한글 공식문서

Your One-Stop solution for a full-stack app with ES6/ES2015 React.js featuring universal Redux, Redux Thunk, React Router, Hot reloading, Emotion, Express 4.x, and multiple ORMs. 🚀

Formerly known as choonkending/react-webpack-node

Features:

• isomorphic universal Rendering

• Redux Predictive state containers.

• Redux Thunk for asynchronous action dispatch.

• Server-side rendering with React Router 5.x. Having server-side rendering allows you to pre-render the initial state of your components when a user (or search engine crawler) requests a page.

• Integrating Redux with React Router with Connected React Router

• Asynchronous Data Fetching on server-side rendering(SSR)

• Server side authentication + Redirecting for components

• Hot reloading using hot-loader/react-dom

• Time travel using Redux-Devtools Chrome Extension

• Webpack 5 for both development and production bundles. It's (in my opinion) the best bundler for JS, CSS, LESS, images, and lots more!

• emotion allows for CSS-in-JS. Say goodbye to conflicts (most of them) and global scope

• Unit Testing with jsdom, mocha, sinon & enzyme

  • Reducers
  • Components (Enzyme)
  • Synchronous and Asynchronous Actions

• Express 4.x server with a ton of middleware

• Mongoose for MongoDB

• Sequelize for Postgres or MySQL

• Procfile to enable deployment to Heroku & Docs on Salt configurations + Deployment for Digital Ocean

Motivation

The motivation is simple: best practices and a wonderful development experience. Our ultimate goal is to provide a boilerplate for building non-trivial applications that are secure, performant and free of bugs. Believing a mixture of React.js, Webpack and Node was the best way to accomplish this, we created react-webpack-node.

reactGo also works great as a learning tool for anyone interested in learning how to implement a large React application, or those who want a modern setup ASAP.

We've had extensive community additions to this boilerplate over time as practices have evolved, and are always interested in hearing new ideas or contributions.

Why Redux

We're really big fans of this implementation of flux for state management. The main principles of having:

• a single store
• state being read-only (you have to express an intent to mutate being creating actions)
• mutations written as pure functions

make it very fun and easy to write predictable code! There's a ton of reasons why, but you should head to the Redux docs to dive in!

Or if you are more of a visual learner watch the free egghead video series narrated by the creator of redux:

1. Getting Started
2. Building Idiomatically

Data Flow

A simplistic representation of data flow from server to client is:

Express app.use() receives a request
-> Calls a pre-built webpack file for the server
-> Runs matching of routes in react-router for server(with react-router-config)
-> Makes async data fetching request
-> Renders Route component to string
-> Construct HTML file (with Meta, Link tags using helmet)
-> Browser receives html file with initial state
-> Client side React.JS kicks in and initializes with given state
-> Continues where it left off
-> Everyone is happy :)

More TBD

Instructions

Database

We currently support MongoDB, MySQL and Postgres, as well as the ability to not use any database. Learn about how to configure your app.

Development

You have to install ReactGo CLI to set up development environment.

# Install ReactGo CLI first
# Your terminal have to be located at reactGo project.
npm i -g @reactgo/cli
# After installation, move to the directory you wanna clone ReactGo
cd /somewhere/you/want/to/clone
# Run CLI and choose which stack you wanna use
reactgo

The next process is outlined here.

Building the application

# Build the application for development
npm run build

# Build the application for production
npm run build:dev

Running the application

# Run in development mode (with hot-reloading)
npm run dev

# Run in production mode
npm start

Unit Tests

Testing with:

• mocha as the test framework
  • We find all the files we need that have a -test.js suffix in the /app directory.
• jsdom as my test environment

# Run test once
npm test

# Run in watch mode
npm test:watch

We have unit tests for async (redux) actions, reducers, and stateless components with enzyme.

Deployment

Currently we support Heroku and Digital Ocean and AWS

Check out what people have done

We have a list of projects that have been created with this boilerplate. Check them out to see what can be done or to get some inspiration.

How to Contribute:

Best way to keep up to date is check the issues. I really welcome improvements for all aspects of an app.

1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
2. Coding guidelines:

• Airbnb's Style Guide
• bendc's frontend guidelines

3. If you wanna change codes and make some PR, you have to follow following steps.

# Install ReactGo CLI
# Your terminal have to be located at reactGo project.
npm i -g
# Run CLI and choose which stack you wanna change
reactgo -d
# Then app and server folders will be symlinked from original ones that you chose.
# Change whatever you want, but don't touch app and server folders. Those are just symlinks.
# Commit and push after done.

Easter Eggs 🥚

This boilerplate has gone through an evolution

React.js -> Facebook Flux -> Alt -> Redux(thunk -> saga -> toolkit)
                                 -> MobX(in mobx branch)

License

MIT

reactgo's Issues

User and Admin login from different tables using passport js local strategy

I have two different login tables, one for User and another for Admin. Can you please suggest what changes needed to do that logging possible from two different tables and also need to keep separate session.

How to minify? 1.6 MB app.js file.. Other Tips?

I'm getting ready to deploy to production in a week or so, but have noticed the app.js file is very large > 1MB.

I'd like to make it a lot smaller to make the download faster as it currently takes 5-7 seconds.

Any thoughts on how to get minification going or any other tips for performance (particularly on initial download). I can see the network tab in google chrome dev tools takes a long time for the app.js file.

It's an m-class aws insance, so not the random accessibility t-class instance that would delay initial download.

How does auto-login happen?

Can someone explain the startup-init flow that makes the user become automatically logged in when loading the page in a new window?

I login using the form, then close the window. When I come back, I am still logged in.

I am trying to trace the client and server code to see how this is done, but I don't see it clearly.

Renaming *.react.js to *.jsx files

I rather have the clear distinction that it's a jsx file

Login fails with "Error: Failed to serialize user into session"

Local login is not possible. Status changes to "Waiting ..." and stays there.

Succeeded connected to: mongodb://localhost/ReactWebpackNode
Error: Failed to serialize user into session
    at pass (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:277:19)
    at serialized (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:282:7)
    at /Users/main/Projects/fun/react/react-webpack-node/server/config/passport.js:12:5
    at pass (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:290:9)
    at Authenticator.serializeUser (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/authenticator.js:295:5)
    at IncomingMessage.req.login.req.logIn (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/http/request.js:48:29)
    at /Users/main/Projects/fun/react/react-webpack-node/server/controllers/users.js:16:9
    at allFailed (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:87:18)
    at attempt (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:160:28)
    at Strategy.strategy.fail (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:277:9)
    at Strategy.authenticate (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport-local/lib/strategy.js:75:17)
    at attempt (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:341:16)
    at authenticate (/Users/main/Projects/fun/react/react-webpack-node/node_modules/passport/lib/middleware/authenticate.js:342:7)
    at exports.postLogin (/Users/main/Projects/fun/react/react-webpack-node/server/controllers/users.js:21:5)
    at Layer.handle [as handle_request] (/Users/main/Projects/fun/react/react-webpack-node/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/main/Projects/fun/react/react-webpack-node/node_modules/express/lib/router/route.js:131:13)

User state after login doesn't contain req.user data

Since the new React Router PR (#52) I am doing something like the following once a user has entered the correct details https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js#L80

Once they get redirected the user store doesn't contain the server user state which can be seen here https://github.com/choonkending/react-webpack-node/blob/master/server/config/routes.js#L62. The user state only contains what has been set at https://github.com/choonkending/react-webpack-node/blob/master/app/stores/UserStore.js#L67

Once I refresh the page the state contains the entire user object, this could be an issue with react router and the transitionTo but I am not sure.

duplication in webpack configs

client / server configs share most options, so can have a common set and just override things like target as needed.

maybe need a common.config imported by webpack config and dev-server config

Running on Windows... everything installs find with mongo running

I can run node run node server/index.js OK. I open http://localhost:3001/ and it renders Cannot GET /.

Your repo is the closest to what I am looking for to start my foray into reactjs.

I prefer to run on windows for the client app that will hit my Laravel API already setup for CORS.

I see a base.html in the app DIR. What am I missing here?

Session variables not available in topics.js

I don't getting session data in the topics.js page, How to fix it ?

npm run dev failing

Can't seem to get this working.
I've ensured mongodb, mongoose are all installed. What am I missing?

rhysedwards$ npm run dev

> [email protected] dev /Users/rhysedwards/Downloads/ideas
> NODE_ENV=development node server/index.js

Environment: development
Error connecting to: mongodb://localhost/ReactWebpackNode. MongoError: connect ECONNREFUSED

/Users/rhysedwards/Downloads/ideas/node_modules/connect-mongo/node_modules/mongodb/lib/server.js:228
        process.nextTick(function() { throw err; })
                                            ^
Error: connect ECONNREFUSED
    at exports._errnoException (util.js:746:11)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1010:19)

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.7
npm ERR! npm  v2.13.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `NODE_ENV=development node server/index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'NODE_ENV=development node server/index.js'.
npm ERR! This is most likely a problem with the react-webpack-node package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=development node server/index.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-webpack-node
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rhysedwards/Downloads/ideas/npm-debug.log

Hitting refresh on nested routes

I have my routes set up in a way where nested routes exist. When hitting refresh on non nested routes it loads the stores and html fine with this:

app.get('*', function (req, res, next) {

    var html = App(JSON.stringify(res.locals.data || {}), req.url);
    html = html.replace("TITLE", Header.title)
                .replace("META", Header.meta)
                .replace("LINK", Header.link);

    res.contentType = "text/html; charset=utf8";
    res.end(html);
  });

So I decided to mess with a bit and try to understand why none of the css or data was loading on the refresh of nested route that is dynamic (based off '/x/:id') so I decided to do something like this.

app.get('*', function (req, res) { 

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

I just wanted to know if what was written in the boilerplate was supposed to deal with nested routes, if so I'll know my problem lies elsewhere. I haven't tested this yet, because I have to require my 'route' here on the server as well. I also have little idea of what is going on in the boilerplay app.get(*)

Including external dependencies that require stylesheets do not work.

I've tried using external libraries that require css files via require('someFile.css') result in errors like the following

ERROR in ../~/react-cropper/~/cropper/dist/cropper.css
Module parse failed: node_modules/react-cropper/node_modules/cropper/dist/cropper.css Line 10: Unexpected token .
You may need an appropriate loader to handle this file type.
|  * Date: 2015-08-22T04:54:51.269Z
|  */
| .cropper-container {
|   position: relative;
|   overflow: hidden;
 @ ../~/react-cropper/dist/react-cropper.js 21:0-35

[Help]Routing and logging in/out

So I decided to hack away at this boilerplate and thought of it as a great opportunity to learn react router and flux. I have a couple questions that have me stumped though. I get the express js/node code pretty decently. I know that we are setting up our routes for logging in and out, but where I get confused is at React Router.
What im trying to do is Have a Log In page, a Sign up page. The login and signup work fine, they just perform whatever was written in express using passport. However what I want to do is make a route '/dashboard'. I did so and it's just a dashboard component made up of other components like a navbar and body/content. How do I write it in react router in such a way that it only allows me to access the route /dashboard if the user is authenticated. In express I would write a function like this :

function isLoggedIn(req, res, next) {
   //if user is authenticated in the session, carry on
   if (req.isAuthenticated())
      return next(); //cuz we want to move on incase we're stuck here

   //if they arent redirect them to the home page
   res.redirect('/');
}

However I didn't even write in the dashboard route in express. I only did it in react-router. My component hierarchy is like this right now

<App/>
  <Dashboard/>
     <NavBar/>
         <NavMenu/>
      <Body/>
  <Login/>
  <Signup/>
  <About/>

And my routing is like this :

const routes = (
<Route>
 <Route name ="signup" path="/signup" handler={Signup} />
 <Route name ="login" path="/" handler={Login} />
 <Route name ="app" path="/dashboard" handler={App} >
  <Route name ="logout" path="/logout" handler={NavMenu} />
 </Route>
</Route>
    );

I don't understand if i'm grasping the concept right, but from what the webpage is displaying it doesn't seem like it. So basically at localhost:3000/ comes up the log in page, and I can toggle between that and the signup page completely fine, when the log in button is hit it uses express to login (it can use react-router to do it as well correct?), on success it goes to /dashboard (res.redirect('/dashboard') in express). It also seems as routes handled by react router has that single page app feel, whereas express it feels like i'm going to a new webpage (I'm guessing that happens because of react-router just changing the url and rendering the component we want?). In my NavMenu component I link the logout button Logout however the url changes to localhost:3000/logout and nothing happens.

I want to maintain that react-router web feel instead of that express redirect but im struggling and looking for help. :/

The github for this repository is Here

Fixing images and resolving their paths

Currently the catch all in routes.js is not an elegant solution. Every request goes through the react-router unless specifically caught by the if statement.

Also, initialImages.js is definitely not a nice way to load images. We should be looking at https://github.com/webpack/react-starter/tree/master/app/elements for some inspiration, or possibly html-loader.

Better use of alt and utils

There are tons of goodies to be used from the alt utils. I'd like to provide a really solid starting point with good examples of how to utilise them.

failure to fetch data sometimes, or route not loading

I don't know how to debug this exactly or where to start. When ever I traverse through routes in my single page app sometimes going back to the route the server stops responding and doesn't fetch any data to present to the app. I thought it was my routes at first but I'm not sure where to start or even look at. Is it maybe something to do with my API, could too many ajax calls be getting called? Any advice? The strange thing is, on chrome hitting refresh it will say 'Waiting for localhost..' and on firefox it will refresh normally.

sourcemaps, Chrome not loading it

Running npm run watchDev in one tab and npm run dev (actually using gulp which reloads server on changes).

app.js.map is being built. However, even though Chrome is configured to handle source maps, I'm not seeing in Chrome Developer Tools. Any other hoops I have to jump through? :)

Unable to Log in properly with Google

Hi, I cloned a fresh copy from Master and after installing the dependencies I am unable to log in with Google.

From the login route, after clicking the green "Login with Google" button, I am redirected to the index page where the "Log in" button is still present in the Nav Bar.

On that note, are you working on a test suite? Do you have a list of priorities for new features published? Maybe I can help, I started modeling one after another Alt-Flux boilerplate using Chai/Mocha/Karma.

eslint unexpected token =

Moving to ES6 made things a bit weird for eslint.

Tried debugging it but no luck.

Any ideas @psimyn?

how did "this.props.topics" get defined inside MainSection::render ?

in app/components/MainSection.react.js line 7

export default class MainSection extends React.Component {
  render() {
    const topics = this.props.topics.toKeyedSeq().map((topic, key) => {     // line 7
      return (<TopicItem id={key} key={key} text={topic.get('text')} />);
    }).toArray();

how did this.props.topics get defined? I was attempting to copy every part of topic into a new mongodb collection type but for some reason this.props only contained {params: {}, query: {}}

Problems with watching and recompiling (npm build)

Hi, first thanks for this boilerplate. I'm a beginner.

I ran the npm watch command so I don't need to keep manually rebuilding the app every time there's a change. However, upon running it the app isn't recompiling and I get a huge message, a lot of it that has to do with these type of errors in the react components as shown below

WARNING in ./app/components/Vote.react.js
jscs results in errors
  parseError @ line 38 char 13
    Unexpected token =

Here is that line 38 it is referring to:

 _onChange = () => {

It looks like the ES6 isn't being parsed correctly? The app seems to be served properly as I am able to run the app perfectly on localhost. Is it because the babel is only currently meant to render the JS in the front end? Anyone else having these issues?

I've only done some small tweaks to the boilerplate like setting my own secrets and MongoDB which I don't think causes these errors.

Thanks.

TypeError: Cannot read property 'makeHref' of undefined

Still having issues getting this set up locally.
Have looked towards this but can't see the router being called twice in any components;
remix-run/react-router#1595

Thoughts?

Warning: owner-based and parent-based contexts differ (values: `undefined` vs `[object Object]`) for key (router) while mounting Link (see: http://fb.me/react-context-by-parent)
TypeError: Cannot read property 'makeHref' of undefined
    at render (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/Link.js:90:19)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:789:34)
    at ReactCompositeComponentMixin._renderValidatedComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:816:14)
    at wrapper [as _renderValidatedComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
    at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:237:30)
    at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactMultiChild.js:192:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactDOMComponent.js:289:32)
    at ReactDOMComponent.Mixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactDOMComponent.js:199:12)
    at Object.ReactReconciler.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:247:34)
    at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:247:34)
    at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
Error: Invariant Violation: Server-side <Router>s need location, branch, params, and components props. Try using Router.run to get all the props you need
    at invariant (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/node_modules/invariant/invariant.js:44:15)
    at componentWillMount (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/Router.js:254:34)
    at ReactCompositeComponentMixin.mountComponent (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactCompositeComponent.js:228:14)
    at wrapper [as mountComponent] (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactPerf.js:70:21)
    at /Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactServerRendering.js:42:27
    at ReactServerRenderingTransaction.Mixin.perform (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/Transaction.js:134:20)
    at Object.renderToString (/Users/rhysedwards/Downloads/ideas/node_modules/react/lib/ReactServerRendering.js:39:24)
    at /Users/rhysedwards/Downloads/ideas/public/assets/app.server.js:101:39
    at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/Router.js:53:7
    at done (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:14:14)
    at next (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:24:12)
    at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/RoutingUtils.js:120:9
    at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/RoutingUtils.js:100:13
    at done (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:14:14)
    at next (/Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/AsyncUtils.js:24:12)
    at /Users/rhysedwards/Downloads/ideas/node_modules/react-router/lib/RoutingUtils.js:120:9

Moving code to ES6

Most of the syntax still is in ES5. The plan is begin changing them to ES6 syntax, but still leave it properly documented with ES5 syntax for those who are unfamiliar with it.

Cannot read property 'makeHref' of undefined

When running npm run devHotLoader and opening http://localhost:3000/.

TypeError: Cannot read property 'makeHref' of undefined
    at render (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react-router/lib/Link.js:90:19)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:789:34)
    at ReactCompositeComponentMixin._renderValidatedComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:816:14)
    at wrapper [as _renderValidatedComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
    at ReactCompositeComponentMixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:237:30)
    at wrapper [as mountComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactMultiChild.js:192:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactDOMComponent.js:289:32)
    at ReactDOMComponent.Mixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactDOMComponent.js:199:12)
    at Object.ReactReconciler.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:247:34)
    at wrapper [as mountComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactCompositeComponent.js:247:34)
    at wrapper [as mountComponent] (/Users/thomas/Desktop/github-clones/react-webpack-node/node_modules/react/lib/ReactPerf.js:70:21)

Restricted areas for certain parts of the app

I am using this boilerplate as the base for a project I am currently working on.

Once a users has logged out I want to stop them being able to access certain areas of the app, for example a <Dashboard /> component.

Do you know of a nice way to do this?

React Router with protected routes example

This has been a frequent question. Gotta get this one out!

requireAuth not getting hit on page load

The requireAuth function (https://github.com/choonkending/react-webpack-node/pull/52/files#diff-70012bb93dfce2be702a0251971c1db5R13) which was introduced in the PR #52 works great if I click on a route with has a onEnter attached to it.

But if I visit a link via the url for example localhost:3000/dashboard I am redirected but the following line https://github.com/choonkending/react-webpack-node/pull/52/files#diff-70012bb93dfce2be702a0251971c1db5R15 is never hit. This means the app doesn't know where to redirect to once the user has logged it.

Images dissapear 2 seconds after page load

Tested using npm run dev, and npm start.

When I connect to the server in a browser on the same machine that is running the server - no problem. I don't use localhost, and can connect via IP:3000 no problem. Images stay on screen.

When I connect from another PC or phone, the html all loads okay, the s load briefly, and then 2 seconds later they dissapear.

I dont see any errors in the console. It's just a static img src url - i can load the image fine if I Paste it into a browser, but it dissapears after 2-3 seconds when loading the within a page (if the browser and server are on different machines).

What might the issue be here? Some kind of server side rendering vs client side rendering issue? Where to start?

Error: Unhandled aborted transition! Reason: [object Object]

As mentioned here #50 (comment) I am having issues when trying to set up an authenticated route.

You can see in the following code example - if you try and visit the about route via the nav bar you will successfully see the login page such as http://localhost:3000/login?nextPath=%2Fabout

But if you go to http://localhost:3000/about directly the following error is shown:

Error: Unhandled aborted transition! Reason: [object Object]
   at Function.React.createClass.statics.handleAbort (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:262:55)
   at Function.dispatchHandler (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:379:20)
   at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:349:29
   at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:64:41
   at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:69:9
   at Function.Transition.to (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:72:15)
   at /Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:348:22
   at Function.Transition.from (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/Transition.js:51:15)
   at Function.dispatch (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:345:20)
   at Function.refresh (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:396:16)
   at Function.run (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/createRouter.js:392:16)
   at Object.runRouter [as run] (/Users/joshuahornby/code/react-webpack-node/node_modules/react-router/lib/runRouter.js:45:10)
   at renderToMarkup (/Users/joshuahornby/code/react-webpack-node/public/assets/app.server.js:132:29)
   at UniversalRenderer.render (/Users/joshuahornby/code/react-webpack-node/public/assets/app.server.js:155:23)
   at /Users/joshuahornby/code/react-webpack-node/server/config/routes.js:83:16
   at Layer.handle [as handle_request] (/Users/joshuahornby/code/react-webpack-node/node_modules/express/lib/router/layer.js:95:5)

After some discussion on Reactiflux with @ericclemmons I believe the issue is due to the server render function and this package would fix this https://github.com/ericclemmons/react-router-server-location

I think updating the server function to call the Router.create function like https://github.com/ericclemmons/react-router-server-location/blob/master/test/support/express.js would fix the issue. Although not sure how this would work with Iso.

This would also help towards solving issue #47 which I believe to be a big feature that should be added to this boilerplate.

Create a Yeoman generator

It'd be pretty awesome to have this as a Yeoman generator :)

react-router missing modules?

I've just downloaded a copy of this project and after installing the dependencies, I'm running:

npm run dev

But I get the following error, stating that it couldn't find a few modules inside react-router:
https://gist.github.com/lucasmotta/37142dc1747389417d62 (error log)

And I couldn't find those files (used by react-webpack-node) on react-router:

• react-router/lib/Location
• react-router/lib/BrowserHistory

I am missing something?

@decorator function to compose classes

Hi @choonkending, when i use a decorator function on a react class i get the following console.warn:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) 3">WebRTC</a></nav><div data-reactid=".v
 (server) 3">WebRTC</a></nav><h1 data-reactid=".vt

here is the example decorator

function withWebRTC(ComposedComponent) {
  return class WebRTC extends React.Component {
    constructor() {
      super();
      this.state = {
        whatever: true
      };
    }
    render() {
      return (
        <ComposedComponent {...this.props} whatever ={this.state. whatever} />
      );
    }
  };
}

The code is working properly but i guess it wouldn't be always the case.

Where is the universalRenderer in app/app.js imported to?

Hi, in trying to understand the flow of the app, I came upon the app/app.js file where the universalRenderer is exported per below:

export default universalRenderer(alt, routes, html);

However, I am unable to find what file actually imports it. I did a search but wasn't able to find anything. Is the universalRenderer only executed on the client-side after it's built or minified or something?

Thanks!

Localstorage/session storage and persistence

Why is it when I run the heroku demo, I can refresh and still be logged in whereas when I run it on localhost the data/stores also refresh. Does persistence not work with localhost? It seems like my session ID won't save either as a cookie.

Socket.io Route Warning

When I run 'npm start' I get endless warnings of "No route matches "/socket.io/?EIO=3&transport=polling&t=XXXXXXXXXXX-XXXXX". Make sure you have <Route path="/socket.io/?EIO=3&transport=polling&t=XXXXXXXXXXX-XXXXX" somewhere in your routes. Any idea why this would be happenning?

Add tests

We're missing testsssss!

Couple of candidates in mind:

• jest
• Mocha because this guy says so

Suggestions welcome!

It should also run easily with webpack.

React Router not handling URLs with slashes

There seems to be an issue with URLs with slashes.

For example if you try

<Route name="about/us" handler={About} />

You will receive the following error

Warning: No route matches path "/about/us". Make sure you have <Route path="/about/us"> somewhere in your routes
Warning: No route matches path "/about/assets/styles/main.css". Make sure you have <Route path="/about/assets/styles/main.css"> somewhere in your routes
Warning: No route matches path "/about/assets/app.js". Make sure you have <Route path="/about/assets/app.js"> somewhere in your routes

The full routes.js file is here

import React from 'react';
import { Route, DefaultRoute } from 'react-router';

import App from 'components/App.react';
import Vote from 'components/Vote.react';
import About from 'components/About.react';
import Login from 'components/Login.react';
import Logout from 'components/Logout.react';

const routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="login" handler={Login} />
    <Route name="logout" handler={Logout} />
    <Route name="vote" handler={Vote} />
    <Route name="about/us" handler={About} />
    <DefaultRoute handler={Vote} />
  </Route>
);

export default routes;

Not sure what might be causing this? Something to do with express or node?

Webpacking npm module and using its files

I'm a little confused on how webpack is grabbing npm modules and including them.

For example:

loaders: commonLoaders.concat([
        { test: /\.css$/, loader: "style!css" },
        { test: /\.scss$/,
          loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap&outputStyle=expanded" +
            "&includePaths[]=" + (path.resolve(__dirname, "./bower_components")) +
            "&includePaths[]=" + (path.resolve(__dirname, "./node_modules")))
        }
      ])

i Know this includes our node_modules path, but what if im using a library, and I want to link its css and js files to my basehtml, then I would go to helmconfig.js right? Then add the link href to the links. But would it be something like this?

{ "rel": "stylesheet", "href": "../../node_modules/alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css"}

and the js file would I just include it <script></script> tags in the basehtml? Or is everything in the npm modules already applied?

I should just require("") it right?

ES6 Node

Hey,

First of all love this application - it is a fantastic learning tool!

I have a quick question, is there a reason the node part of this app isn't wrote using ES6?

Webpack dev server

Just wondering if anyone has successfully managed to set up a webpack-dev-server for this project?

Can not use 'composes' syntax in CSS

The CSS modules set up is great. However, I can't seem able to use the 'composes' syntax in my css/scss files. (https://github.com/webpack/css-loader#composing-css-classes)

Does anyone have the same issue?

Different Markup in Client and Server

I am getting this warning message in the Chrome console:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) ght:40px;width:40px;-webkit-user-select:
(server) ght:40px;width:40px;user-select:none;bor

If I were to use the Mozilla browser, the client markup would be -moz-user-select instead of -webkit-user-select

I've isolated the different markup to originate from:
this content variable from the server:

    let content = React.renderToString(React.createElement(Handler));

this container argument from the client:

    render = Iso.bootstrap((state, _, container) => {...

I have modified very little from the boilerplate. I've basically only added an API call to display user information. This problem originates from me using a Material-UI React component as shown below from my repo

      <Avatar>gabriel</Avatar>

I don't know if it has anything to do with it, but the results I've described above is from firing up my local server and building my app using the npm run dev and npm run watch commands. If I instead use npm run devHotLoader and npm run watchHotLoader, my elements all seem to be there, but all CSS styling seems to be completely broken and not existent.

So my questions are:

1. Does the lack of styling when I am using the Hot Loader have to do with this line in routes.js where it seems like styling is removed? What can I do to fix this?

      html = html.replace("LINK", '');

2. What can I do to remove this warning and have consistent markup in the front and back ends? Is this more of a Material-UI or Iso package issue, or just a way React components are rendered? Would I manually alter the CSS?

Thanks!

How to transitionTo after login/create/etc?

Hi, I want to transition to a new page I've made after login, or after adding a topic (in the demo app), etc.

I've added the page to the routes.jsx section, and i can navigate to the page via URL no problem, or via ..

But, what i need to do is navigate to a page of my choosing after creating a topic (e.g. in TopicActions.js or TopicStore.js (which is better and how can I do it?))

Trouble running devhotloader

Running devHotLoader of a clean repo pull and opening up localhost:3000 gives me a error such as this:

Invariant Violation: renderToString(): You must pass a valid ReactElement.

I thought this was a peerdependency problem so I added react and reactdom into the devDependencies in Package.json but that didnt resolve the problem. Is the hot loader not running on 3000? I know the assets are proxied from 3001/assets

Why app.js weighs 1.34 MB

I did npm run build
then started in production mode npm start
and in the browser network I see that app.js weighs 1.34 Mb when in your demo it's 408 Kb.

Is step 3 in deploying to Heroku neccesary?

Run webpack . Commit and push the changes (I know, not the best idea).

I deployed right to Heroku without doing this and it seemed to work fine.

Images dissapear 2 seconds after page load

Upgrade to react-router beta 4

https://github.com/rackt/react-router/tree/master

'id' created clientside, mongodb '_id' ignored?

What's the reason for this?

Layout switching

How to create a new layout for admin here. What all are the changes needed in routes and webpack.config files.