LAPIS

Cutting edge starter kit optimized for development and production using latest tools available. It features optimized for rapid development config powered by happypack and various settings I've found to be optimal.

Features

React@v16-beta.05
React Router@v4 beta version
Webpack@3.5 for bundling
Express
Babel for ES6 and ES7 magic
Immutable.js for enforcing immutable redux store and functional programming
Redux
Redux Saga for handling async api requests
Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
ESLint to maintain a consistent code style
style-loader,
postcss-loader to use postcss with cssnext and various plugins
react-helmet to manage title and meta tag information on both server and client
babel-plugin-react-css-modules for better integration with css-modules without significant performance drop.
webpack-isomorphic-tools to allow require() work for statics both on client and server
webpack-dashboard for NASA style debugging
hard-source-webpack-plugin to speed up initial build time
axios for handling XHR calls.
prettier for consistent code.

Structure

client.js entry point for client rendering
server.js entry point for server rendering.
Html.js boilerplate html for clientside rendering and serverside rendering.
data folder is for anything related to handling api requests. index.js exports functions that return api calls wrapped in Promises. Right now axios is used for api client.
config folder is for configuration of client app.
screens folder is for routes. I use structure proposed by ryanflorence with some modifications and it works great with react-router@v4 declarative structure.
redux do i need to explain that to you?
css any css classes that is shared among components and can be used through CSSModules syntax (e.g. composes: a from 'css/helpers.css')

app
├── client.js
├── server.js
├── constants.js
├── ServerTemplate.js
├── ClientTemplate.js
├── Html.js
├── config
│   ├── routes.js
│   └── index.js
├── screens
│   └── App
│       ├── components
│       ├── screens
│       │   ├── Admin
│       │   │   ├── components
│       │   │   ├── screens
│       │   │   │   ├── Reports
│       │   │   │   │   ├── components
│       │   │   │   │   └── index.js
│       │   │   │   └── Users
│       │   │   │       ├── index.js
│       │   │   │       └── styles.css
│       │   │   ├── index.js
│       │   │   └── index.css
│       │   └── Course
│       │       ├── screens
│       │       │   └── Assignments
│       │       │       └── index.js
│       │       └── index.js
│       └── index.js
├── core
│   ├── utils
│   │    └── validation.js
│   ├── atoms
│   │   ├── Link
│   │   └── Icon
│   ├── molecules
│   │   └── IconLink
│   └── organisms
│       └── Header
├── redux
│   ├── createStore.js
│   ├── actions
│   │    ├── user.js
│   │    └── reports.js
│   ├── reducers
│   │    ├── user.js
│   │    └── reports.js
│   └── sagas
│        ├── user.js
│        └── reports.js
├── data
│   ├── apiClient.js
│   ├── user.js
│   └── index.js
└── css
    ├── global.css
    ├── variables.css
    └── helpers.css

TODO

Code splitting with System.import()
Write test examples

How to?

How to enable/disable SSR

Check bin/server.js executable and change DISABLE_SSR variable.

Installation

yarn

Running Dev Server

npm run dev-dll // Build libraries for faster webpack build
npm run dev

or with webpack-dashboard

npm run dev-dll // Build libraries for faster webpack build
npm run dev-dash

Building and Running Production Server

npm run build
npm run start

Thanks

Thanks to erikas for providing starting ground for my react learning. This starter resembles some code and a bit of structure from now outdated erikas's starter kit

codejunkienick/starter-lapis