TUX

Create content-driven React websites with SSR and a plug-and-play configuration.

Tux uses add-ons, containing Neutrino and React Chain middlewares, to configure the build and render pipeline respectively.

Note: Tux is still in an experimental development stage. The documentation is not complete or may be out of date. If you have questions, feel free to reach out on Twitter or Slack.

Quick start

yarn create tux-app hello-tux

cd hello-tux/
npm start

Then open http://localhost:5000/ to see your app.

When you're ready to deploy to production, run npm run build to build production bundles, then npm run serve to serve those bundles. If you don't need SSR, you can ship build/static to your favourite HTTP server.

What you get

• React app with server side rendering.
• Modern Babel compilation supporting ES modules, last 2 major browser versions (Node.js 6.9+), async functions, dynamic imports, JSX and object rest spread syntax.
• Webpack loaders for importing HTML, CSS, images, icons, and fonts.
• Environment variables to detect BROWSER, SERVER and ADMIN builds and remove unused code.
• Automatic and overridable creation of the HTML page using the React Document component.
• Development:
  • Webpack Dev Server during development.
  • Excellent error handling during development. See stack traces with code snippets in the browser.
  • Hot Module Replacement support with React Hot Loader.
  • Hot reload on server.
• Production
  • Tree-shaking to create smaller bundle.
  • Production-optimised bundles with Babili minification and easy chunking.
  • Use environment variables to remove server dependencies in browser build.
  • Extracted css in production builds.
  • Long term browser caching with automatic cache invalidation.

The following features (and more) are just an add-on away, properly configured for SSR.

• React Router v4.
• Async components with code splitting.
• Data fetching.
• React Helmet to configure meta tags for better SEO.
• CSS in JS.
• Integrated admin for headless CMS data.

How tux works

Your src/app.js file defines a series of middlewares that compile and run differently on browser and server. The last middleware usually returns the main app component while previous middlewares wrap it or influence how it is rendered. Here are some examples of things middlewares can do:

• Wrap your app with a Provider component, eg BrowserRouter in the browser and StaticRouter on the server.
• Pre-render the app, eg to fetch data that is needed for initial render.
• Track rendered components, styles and chunks.

Middlewares can add tags to the html Document on the server. They can also write data into a script tag and use it for the first render in the browser.

Topics

• Add-ons
• Dev Server (Coming soon)
• Admin (Coming soon)

License

MIT