/starter-lapis

Cutting edge starter kit

Primary LanguageJavaScript

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 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