markhaasjes/cf-kyt-starter-universal-redux

A starter kyt with React, Redux, SSR and data fetching.

CLEVER°FRANKE Universal React starter-kyt

This starter-kyt should serve as the base for an advanced, server and client-rendered React Redux app. It is based on NYT's Universal React starter-kyt but with the addition of some tools we found useful, most importantly the addition of Redux, Redux-Thunks, Storybook and Async data loading on the server.

It is assumed you know what kyt is and why you should use it.

Installation

Generally speaking we feel it's a better idea to install packages locally than globally. That's why our setup instructions differ a little bit from the kyt general installation instructions. If you find any bug try to see if installing the official way helps and please let us know by submitting an issue.

The instructions assume you have Yarn already installed. If not, install Yarn. Most of us use Homebrew for stuff like that.

1. Go to the folder where you want to install the starter-kyt.
2. yarn init Use your own settings or press enter until it's done
3. yarn add kyt-cli --dev
4. node_modules/.bin/kyt-cli setup -r https://github.com/cleverfranke/cf-kyt-starter-universal-redux.git

After installation these commands are useful to learn

Start a development server

yarn dev

Develop components in isolation within Storybook

yarn storybook

Create a static version of Storybook for deployment

yarn build-storybook

Start a production server

yarn build && yarn start

Tools

The following are some of the tools included in this starter-kyt:

• Express - Server-side rendering
• React - Component library
• React Router - Server and client routing
• Sass Modules - CSS Modules with a Sass pre-processor for styles
• Enzyme - React component testing

Added by CLEVER°FRANKE

The libraries listed here are not present by default in the NYT React Universal Starter Kyt. We added them because we believe they are useful to the majority of the applications we develop.

• Redux and Redux DevTools - State management. Press CTRL-H to see the DevTools Monitor.
• Storybook - Isolated component development and component library
• Redux-Thunks - Thunk middleware for React Redux
• Helmet - This reusable React component will manage all of your changes to the document head with support for document title, meta, link, style, script, noscript, and base tags.
• React SVG loader - Used to load SVG files with Webpack and use them as React Components. This inlines the SVG and allows us to style it with CSS and keep our code clean and 'dry'.
• Perf Addons - React Perf Addons for easy debugging of your web applications performance. We recommend using something like the React Perf extension to hook into the Perf Addons and perform your tests.

Architecture changes

• We modified the Express configuration to return 404 status codes when showing a 404 NotFound component.
• We modified the Express configuration to detect Async methods on route components and delay returning HTML until the promise is resolved and optionally the store is populated with the response of these Async requests.
• We modified the build scripts to automatically generate a service worker file with the help of sw-precache
• You can check if you are working in a server or client environment by checking the __SERVER__ and __CLIENT__ variables.
• You can check if you are working in a production environment by checking the __PRODUCTION__ variable.

Changelog

See the releases on Github