Sambell Save

wake me when it's quitting time

Project README


This project is deprecated. Use next.js, etc.

:new_moon::new_moon::new_moon: sambell :new_moon::new_moon::new_moon:

create performant server-rendered React applications with no build configuration; 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.

What will my app look like?!?

Check out the template!


yarn global add sambell
sambell new app
cd app
yarn start


Dev experience

  • Everything you (or at least, I) want without setting anything up!
  • Client side SPA with react-router version 4.
  • 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).


  • React 16
  • Server side rendering. Universal.
  • Critical styles with styled-jsx.
  • Async loading of routes with react-loadable (forked version @humblespark/react-loadable).
  • Async (<script async />) loading of all webpack scripts.
  • Webpack build optimized for production.

Async components

  • Full client & server side support for async loading components, with react-loadable
  • Forked version (@humblespark/react-loadable) to work with server side webpack build & a fix for checksum mismatch.
const Moon = Loadable(() => import(/* webpackChunkName: "components/Moon" */'components/Moon'));

Webpack / Babel

  • 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.
  • Babel Presets: es2015, stage-1, react
  • Babel Plugins: styled-jsx
  • Polyfills: isomorphic-fetch, babel-polyfill


*gerty.js (basic configuration to control where stuff goes)

module.exports = {
  clientEntry: 'client',
  serverEntry: 'server',
  clientOutputDirectory: '.sambell/client',
  serverOutputDirectory: '.sambell/server',
  publicPath: '/static/webpack/',
  webpack: config => config,

:rocket: -> :no_entry_sign: :earth_americas:


Open Source Agenda is not affiliated with "Sambell" Project. README Source: ndreckshage/sambell
Open Issues
Last Commit
1 year ago

Open Source Agenda Badge

Open Source Agenda Rating