: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.
- similar to create-react-app, but server side rendering.
- similar to next.js, but with react-router.
sambellcame first! commit history proof :stuck_out_tongue_closed_eyes:
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,
};
:rocket: -> :no_entry_sign: :earth_americas:
:alien: