CLEVER°FRANKE Universal React starter-kyt

=============================

NOTICE

This package is no longer being maintained. We now internally use create-react-app coupled with react-app-rewired. We find that combination suitable for most of our internal and client projects.

If you absolutely need server-side rendering, depending on your needs we suggest looking at Next.js or Gatsby.js.

=============================

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.

1. Go to the folder where you want to install the starter-kyt.
2. npm init Use your own settings or press enter until it's done
3. npm install kyt-cli -D
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

npm run dev

Develop components in isolation within Storybook

npm run storybook

Create a static version of Storybook for deployment

npm run build-storybook

Start a production server

npm build && npm start

Running in Docker

We've added Dockerfiles and Docker Compose files for easier deployments.

Development in Docker

You can run the application in a Docker container in development mode. This container supports hot reloading, redux devtools, file syncing, pretty much anything you want and have when you run Docker in development mode locally as well. docker-compose up

Production mode

Eventually you'll want to run your app in production mode on some server. In a nutshell, deployment looks like this:

1. Create a new production ready image of your applications
2. Push the images to your own Docker Repository
3. Pull the images from the repository to your server
4. Start the containers on your server

Make sure to edit deploy.sh to target your own Docker Repository.

If you want to run production locally you can use the following command: docker-compose -f docker-compose-production.yml up

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. Please note the Perf Addons will be removed in React when Fibers is introduced to the world.

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

Changelog

See the releases on Github