wake me when it's quitting time


sambell is a minimal framework for server-rendered React applications, ideal for universal react-router projects.

Both create-react-app and next.js are great projects, try them! I like aspects of both. But you don’t get a universal react-router application out of the box.

Why not Next?

I think next.js is great, with one big flaw: you don’t get a layout file. The entire application re-renders on route changes. This makes things like animated transitions impossible. But even something simple like a material design ink button link won’t work, because the re-render kills the button animation. I think react-router is fundamentally more powerful, and opt for that.

When out of beta?

As soon as React Router v4 is.

What will my app look like?!?

Check out the template!

3 files. <100 loc total for a universal single page app.


yarn global add sambell
sambell new my-app
cd my-app
yarn start



  • Server side rendering. Universal.
  • Critical styles with styled-jsx
  • Webpack build optimized for production.


  • Webpack 2 (code splitting, tree shaking, etc).
  • Webpack runs for both client and server code.
  • Minimal loaders (only a JS loader). But it is configurable if you want to add more.
  • absolute path requires from your project root. import App from 'App'
  • Sourcemaps for client & server


  • Presets: es2015, stage-1, react
  • Plugins: styled-jsx


  • Client side SPA with react-router version 4.
  • Easy to add non-v4 react-router if you prefer that. But v4 is really nice if starting a new project.


  • styled-jsx is a great feature of Next.js that I bring in here. I find it to be more pleasant than css-modules, and eaiser to work with for a universal application (critical styles, etc).


  • import { CLIENT_ENTRY, CLIENT_OUTPUT_DIR, WEBPACK_PUBLIC_PATH } from 'sambell/env'; to make creating your html template easy in server.js.


  • Polyfills: isomorphic-fetch, babel-polyfill


  • You get a server.js file. You have full control over client and server.
  • Add a gerty.js file to your project root.
  • Currently, webpack only function that it called. called with:
    • config (base config from sambell). for you to overrides
    • settings ({ dev, node }) to conditionally alter config
    • webpack webpack instance for you to use if needed.


// @NOTE optional!
// @NOTE this file is not compiled, use only whats available in your node version!

module.exports = {
  // full webpack overrides
  webpack: (config, { dev, node }, webpack) => {
    config.devtool = 'eval';
    return config;

Related Repositories



wake me when it's quitting time ...