wake me when it's quitting time
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin v7 Sep 15, 2017
scripts v7 Sep 15, 2017
template bump versions; new styled jsx Oct 20, 2017
webpack module res fix Sep 15, 2017
.gitignore updates, add polys Dec 19, 2016
LICENSE add license Dec 19, 2016
README.md Update README.md Sep 15, 2017
package.json bump versions; new styled jsx Oct 20, 2017
yarn.lock bump versions; new styled jsx Oct 20, 2017

README.md

🌑🌑🌑 sambell 🌑🌑🌑

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!

Install

yarn global add sambell
sambell new app
cd app
yarn start

Features

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).

Performant

  • 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

Configurable

*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,
};

🚀 -> 🚫 🌎

👽