React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

Relay by Facebook + examples

redux by Dan Abramov

flux by Facebook + examples

alt by Josh Perez + examples

reflux by Mikael Brassman + examples

flummox (deprecated) by Andrew Clark

fluxible by Yahoo

fluxxor by Brandon Tilley + examples

marty.js by James Hollingworth + examples

fynx by Alan Plum

McFly by Ken Wheeler + example

DeLorean.js by Fatih Kadir Akın + examples

fluxify by Javier Márquez

Comparison: https://github.com/voronianski/flux-comparison

You are writing about Bootstrap but I don't see implementation of this frontend framework inside your starter-kit app htmls/css/less files. This is not just installing bootstrap but also changes in current layout.

1. Are you going to use it in new version?
2. Am I right - to use bootstrap,jquery or other frontend/view libraries with React we should use Bower?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Got this error.

/Users/corto/mega/MyApp/node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:24
    throw new Error('Please install sqlite3 package manually');
          ^
Error: Please install sqlite3 package manually
    at new ConnectionManager (/Users/corto/mega/MyApp/node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:24:11)
    at new SqliteDialect (/Users/corto/mega/MyApp/node_modules/sequelize/lib/dialects/sqlite/index.js:12:28)
    at new Sequelize (/Users/corto/mega/MyApp/node_modules/sequelize/lib/sequelize.js:233:18)
    at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/data/sequelize.js:13:19)
    at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
    at Object.module.exports.Object.defineProperty.value (/Users/corto/mega/MyApp/build/webpack:/data/models/index.js:10:1)
    at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
    at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/core/passport.js:18:1)
    at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
    at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/server.js:21:1)
    at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
    at /Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:39:1
    at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:39:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)

OSX 10.11 x64 No matter - node v4 or v5 still got this error

Child.js

import s from './Child.css';

class Child extends Component {
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }
}

export default withStyles(s)(Child);

Parent.js

class Parent extends Component {
 render() {
  onClick() {
    this.refs.child.getAlert() // undefined
  }
  return (
    <div>
      <Child ref="child" />
      <button onClick={this.onClick.bind(this)}>Click</button>
    </div>
  );
 }
}

Use react-router instead of react-routing library.

As per #345

Update. Here is a live version with react-router https://limitless-wave-36322.herokuapp.com/

This change is

How do you feel about using react-router instead of a custom basic routing approach? It seems to be getting super popular and the fact that it's build for react makes me like it a lot more anyways

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Has anyone done this recently? I see that around Sept of 2014 it switched from director to react-router and now it's on react-routing. There doesn't seem to be a lot of documentation around that, furthermore, most people seem to be using react-router instead.

Is anyone else in the same boat I am? I'd rather use something that has a bit more community around it if possible.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Hello, i have published page and saw there is delaya on initial load the page and i do not mean in data load from database. I just used pingdom and saw there is delay. If check ur demo site demosite You will see the orange one wait 153ms. In my site it is 4.08 sec.

Also like ur and mine first page is too big In ur Demosite -> 4.4 MB because of Script 1.33 MB In my site -> 5.1 MB script 2.15

Also is normal for vendor.js be 1.6MB? Any suggestion or guideline where to look or check this better?

We have solution for absolute path, like this:

import MyComponent from 'src/components/MyComponent'

It is work fine for yarn start, but for yarn lint:

Unable to resolve path to module 'src/components/MyComponent'     import/no-unresolved

I have solution for my other project (no RSK) with WebStorm:

1. project_dir - Mark Directory as > Resource Root

2. yarn add eslint-import-resolver-webpack -D

3. config/default.js

...
	resolve: {
		// We can now require('file') instead of require('file.jsx')
		extensions: ['', '.js', '.jsx', '.scss'],
		alias: {
			src: path.resolve(__dirname, '../src')
		}
	},
...

4. .eslintrc.js

/* global __dirname */

const path = require('path');

...
	settings: {
		'import/resolver': {
			webpack: {
				config: path.join(__dirname, '/config', 'default.js')
			}
		}
	}
...

How to solve this issue for RSK? Please help me.

It seems to be that the router in this project isn't configured the same standard way all the tutorials and documentation out there do.

e.g. server.js uses a dispatch event, I can't find any sample code elsewhere that uses this method, even in the API docs for react-router.

server.get('*', async (req, res, next) => {
    ...

    await Router.dispatch({ path: req.path, context }, (state, component) => {
      data.body = ReactDOM.renderToString(component);
      data.css = css.join('');
    });

    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
    res.status(statusCode).send('<!doctype html>\n' + html);

  ...
});

I'm trying to configure the router to load routes lazily in a similar way to this example project.

In that huge-apps example code you can asynchonouly chose which routes to load in a route config

module.exports = {
  path: 'course/:courseId',

  getChildRoutes(location, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades')
      ])
    })
  },

  ...
}

I can't figure out how to apply the same thing to the way routing is done in this starter kit, anyone got similar experiences or can share their knowledge?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@koistya mind giving an example of how to setup an auth flow with the current setup? One of the biggest perks of switching to react-router is the out of box support for auth by using nested routes. thanks! ref #21

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

This is just a quick demo branch demonstrating the usage of a shared module (Yarn package) — core that is referenced in the front-end app (app). When you run the app locally (via yarn start) and make changes to the core package, Vite picks up changes from the referenced package (core) without a need to compile it first, as well as pulling just the changed file.