ptzagk / starter-lapis

Cutting edge starter kit

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

• [email protected]
• React Router@v4 beta version
• [email protected] 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