a sample of server side rendering using typescript + react + redux + react-router + redux-saga + react-helmet + loadable-components + recompose + styled-components + apollo + express + webpack etc..
Switch branches/tags
Nothing to show
Clone or download

README.md

A sample of Server-Side-Rendering and Single-Page-Application

Travis (.org) Codecov

This repository shows you how to write SSR and SPA code using TypeScript.

Articles

業務で使える簡単な SSR + SPA のテンプレートを公開した

Feature

  • how to render at server side using Node.js (/src/server)
    • express
    • redux-saga (side effects)
    • styled-components (css)
    • react-helmet (head)
    • loadable-components (dynamic import)
  • how to realize single page application (/src/client)
    • react-router
    • recompose (error handling, etc...)
    • App Shell and Content (PWA)
  • how to use Apollo(GraphQL) with SSR and SPA
    • apollo-boost
    • apollo-server-express
    • react-apollo
  • how to write test code and storybook
    • express, react, redux, redux-saga, react-router, etc...
  • how to develop in the development env and how to run the production env
    • HMR of webpack
    • dotenv
    • manifest
    • load distribution
    • dynamic import
  • how to measure application performance
    • why-did-you-update
    • autocannon
    • clinic

Libraries

Purpose Name CSR SSR
view react yes yes
architecure redux yes yes
head tag react-helmet yes yes
HOC recompose yes yes
side effects redux-saga yes yes
css styled-components yes yes
dynamic import loadable-components yes yes
GraphQL apollo-boost yes yes
web server express N/A yes
Purpose Name
language typescript, ts-node
bundler webpack
preview storybook
test runner jest
service worker workbox
benchmarking tool autocannon
performance profiling clinic

Setup

$ git clone git@github.com:hiroppy/ssr-sample.git
$ npm i
$ npm start

Development

$ npm start # use 3000
$ open http://localhost:3000
$ npm run start:storybook # use 6006
$ open http://localhost:6006

GraphQL Playground

$ npm start
$ open http://localhost:3000/graphql

Test

$ npm test

Production

$ npm run build # for client codes
$ npm run start:prod # run server and use 3000
$ open http://localhost8080

Deploy

$ npm run deploy:storybook

Note

This repository shows how to write and so does not introduce Atomic Design.