React TypeScript Express SSR example

React ssr exmaple with typescript, babel, css-modules, react-router, redux, redux-thunk, ramda, webpack 4.

You can read more about the organizational strategy used in this app in this Medium post, or this post.

Contains

• React 16.8
• React Router 5.0
• Redux 4
• Redux-Thunk 2.3
• react-hot-loader 4.11
• Ramda 0.26
• express 4.17
• babel 7
• webpack 4.33
• webpack-dev-middleware 3.7
• webpack-hot-middleware 2.25

Aliases

• @client/* resolves to ./src/client/*
• @server/* resolves to ./src/server/*
• @core/* resolves to ./src/core/*

Routing

Routes in project are objects with the same properties as a <Route> with a couple differences:

• the only render prop it accepts is component (no render or children)
• introduces the routes key for sub routes
• introduces the preloadActions key for preFetch on server
• Consumers are free to add any additional props they'd like to a route, you can access props.route inside the component, this object is a reference to the object used to render and match.
• accepts key prop to prevent remounting component when transition was made from route with the same component and same key prop

const routes = [
  {
    component: Root,
    preloadActions: someAction('someProp'), // preloadActions: {type: 'someAction', payload: someProps}
    routes: [
      {
        path: '/',
        exact: true,
        component: Home,
        preloadActions: [someAction('someProp'), someSecondAction('someProps')]
      },
      {
        path: '/child/:id',
        component: Child,
        routes: [
          {
            path: '/child/:id/grand-child',
            component: GrandChild
          }
        ]
      }
    ]
  }
];

Note: Just like <Route>, relative paths are not (yet) supported. When it is supported there, it will be supported here.

Using CSS

It uses the usual SCSS css modules. You can find more information here

Render instead of hydrate in development mode

To be able to reload the page and see the latest code changes, you must set the "localStorage.useRender" value in development mode (the hydrate method will be replaced with the render)

Setup

$ npm install

Running

Start express development server

$ npm run start

Build

Build client for production

$ npm run build:client

Build server for production

$ npm run build:server

Or simply

$ npm run build

Build server and client for production

Analyze

Vendors Size (all node_modules)

$ npm run analyze:vendors

Bundle Size (all exclude node_modules)

$ npm run analyze:bundle

Or simply

$ npm run analyze

To see the size and bundle and vendors