Awesome Open Source
Awesome Open Source

Demo on Heroku

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

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 [email protected] 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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,534,674
Reactjs (75,452
Redux (13,303
Webpack (9,732
Boilerplate (5,599
Rest (4,145
Jest (3,683
Axios (3,550
React Router (3,341
Redux Saga (1,300
Postcss (1,252
Server Side Rendering (820
Immutablejs (182
Es2017 (129
React Css Modules (17
Related Projects