This repository has been archived by the owner. It is now read-only.
A starter kyt with React, Redux, SSR and data fetching.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook Adding default Storybook config to the project Feb 22, 2017
src run eslint --fix Oct 9, 2017
stories Adding default Storybook config to the project Feb 22, 2017
.babelrc Adds examples of redux reducer tests (#25) Apr 4, 2017
.eslintrc.json Makes sure tests don't fail May 5, 2017
.gitignore Updates React router to version 3 which removes some PropTypes warnings May 10, 2017
.travis.yml Feature/e2e testing (#29) Apr 20, 2017
CONTRIBUTING.md Adds a contributing.md section which fixes #18 Mar 28, 2017
Dockerfile Use Node Alpine for smaller images May 9, 2017
Dockerfile-production Remove production flag for npm install in dockerfile May 9, 2017
LICENSE First commit Feb 1, 2017
README.md Add deprecation message Jul 4, 2018
codeship-services.yml Add Codeship settings to test deployment with Codeship May 9, 2017
codeship-steps.yml Add Codeship settings to test deployment with Codeship May 9, 2017
deploy.sh Change Docker examples to new, official cleverfranke Docker cloud pub… May 2, 2017
docker-compose-production.yml Use Node Alpine for smaller images May 9, 2017
docker-compose.yml Split up dev and production environments in two seperate containers. … May 1, 2017
e2e.sh Feature/e2e testing (#29) Apr 20, 2017
kyt.config.js run eslint --fix Oct 9, 2017
kyt.config.production.js Changed port of production server to 8000 Feb 16, 2017
package.json fix(package): update redux-promise-middleware to version 5.1.0 (#105) Apr 23, 2018
prototype.js First commit Feb 1, 2017
sw-precache-config.js Changed port of production server to 8000 Feb 16, 2017

README.md

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.

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

Build Status codecov Dependencies devDependencies Status Greenkeeper badge

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:

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