Lego Starter Kit — Node.js & React isomorphic app creator (Node.js, Express, React.js, Babel, PostCSS, Webpack)


Keywords
babel, boilerplate, express, nodejs, postcss, react, starter-kit, webpack
License
MIT
Install
npm install lego-starter-kit@1.25.38

Documentation

LSK.js – lskjs

@lskjs/lskjs – LSK.js – command line interface scripts

LSK logo NPM version NPM downloads NPM Dependency count Have TypeScript types Have tree shaking NPM Package size Package size Ask us in Telegram


Table of contents

⌨️ Install

# yarn
yarn i @lskjs/lskjs 

# npm
npm i @lskjs/lskjs 

First principles

  • Асинхронность все везде
  • Ленивость всех операций
  • Декларативный подход для конечного программиста

Манифест

Стандарт бы и 5 лет назад, но авангардисты JS создали coffescript, babel и ts, потому что JS окостенел и не двигался. Так же как и ВКшники написали свой KPHP. 

В этом пути нет ничего постыдного, то что еще вчера считалось ебанистикой, завтра может захватить умы своим удобством.

У меня нет априорной аппеляции к авторитетам из ECMA. 

Я делаю среду комфортную для конечного программиста, который делает продукт для клиента. 
Если стандарт позволяет написать удобное решение — то придумаем как.
Если для этого придется переписать стандарт — значит перепишем. 
Благо babel максимальным образом позволяет писать собственные диалекты.

Не задача должна прогибаться под решением, а решение под задачу.

Вопросы на которые стоит ответить создателю:

  • Пример Api на бэке handler
  • Пример функции и как ее переопределить
  • Модели монго как подключить
  • Как достать, когда пишешь Api
  • Роутер добавление роута и страницы
  • CrudApi основные методы
  • Как оборачивать ответ сервера, чтобы вернулся объект
  • Как сделать свой стор
  • Как достать стор на странице

Как запускать любой lsk-образный проект

  1. git clone repo
  2. npm install
  3. npm run bootstrap
  • copy .env.js if needed
  • npm run dev or
  • cd packages/package && npm run dev

Packages included in this repo

Package Description Activity Version Bundle Package Size
apiquery http/s + websockets api client for Web, Node.js and React Native throw fetch or axios NPM Badge NPM Badge NPM Badge install size
apm LSK.js – apm – module Node.js agent for Elastic APM NPM Badge NPM Badge NPM Badge install size
auth LSK.js – auth – module for authorization by login and password and singup through social networks NPM Badge NPM Badge NPM Badge install size
autobind LSK ux subrepo: autobind NPM Badge NPM Badge NPM Badge install size
billing LSK.js module for adding billing in cabinet NPM Badge NPM Badge NPM Badge install size
bots LSK.js module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-base LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-plugin LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-plugin-debug LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-plugin-menu LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-plugin-notify LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-plugin-polundra LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-plugin-portal LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-clubhouse LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-discord LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-instagram LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-slack LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-telegram LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-twitter LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-vk LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-provider-whatsapp LSK.js plugin for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
bots-router LSK.js router for @lskjs/bots module for telegram, slack, discord, whatsapp, twitter, instagram and vk bots creation NPM Badge NPM Badge NPM Badge install size
build-locales CLI for build i18 locales from Google spreadsheet NPM Badge NPM Badge NPM Badge install size
bunyan Light weight bunyan logger for a JSON logging library for node.js services without dtrace NPM Badge NPM Badge NPM Badge install size
config LSK config. NPM Badge NPM Badge NPM Badge install size
db LSK.js module for working with mongodb database NPM Badge NPM Badge NPM Badge install size
elastic LSK.js module for elastic search NPM Badge NPM Badge NPM Badge install size
event LSK module for event. NPM Badge NPM Badge NPM Badge install size
getspreadsheet LSK getspreadsheet. NPM Badge NPM Badge NPM Badge install size
grant LSK module for grant. NPM Badge NPM Badge NPM Badge install size
i18 LSK module for internationalization with i18next. NPM Badge NPM Badge NPM Badge install size
kafka LSK module for kafka. NPM Badge NPM Badge NPM Badge install size
launcher LSK Launcher. NPM Badge NPM Badge NPM Badge install size
linkall LSK link all. NPM Badge NPM Badge NPM Badge install size
log LSK log. NPM Badge NPM Badge NPM Badge install size
log Логгер совмещающий лучшие черты morgan, winston, bunyan, logrus. debug. Базируется на debug-level. NPM Badge NPM Badge NPM Badge install size
mailer LSK module for send and receive emails. NPM Badge NPM Badge NPM Badge install size
mobx LSK module for mobx. NPM Badge NPM Badge NPM Badge install size
module Module system with dependency injection, event emitter, logger and submodules tree NPM Badge NPM Badge NPM Badge install size
permit LSK module for one time codes and permits. NPM Badge NPM Badge NPM Badge install size
proxy LSK module for proxy. NPM Badge NPM Badge NPM Badge install size
rabbit LSK module for rabbit. NPM Badge NPM Badge NPM Badge install size
reactapp LSK ux subrepo: reactapp NPM Badge NPM Badge NPM Badge install size
rlog LSK module for remote logger. NPM Badge NPM Badge NPM Badge install size
scylla LSK module for scylla. NPM Badge NPM Badge NPM Badge install size
sequelize LSK module for sequelize. NPM Badge NPM Badge NPM Badge install size
server LSK server. NPM Badge NPM Badge NPM Badge install size
server-api LSK server-api. NPM Badge NPM Badge NPM Badge install size
sh LSK ux subrepo: sh NPM Badge NPM Badge NPM Badge install size
sms LSK module for sms. NPM Badge NPM Badge NPM Badge install size
tbot LSK module. NPM Badge NPM Badge NPM Badge install size
uapp LSK universal react app wrapper NPM Badge NPM Badge NPM Badge install size
upload LSK module for uploading files. NPM Badge NPM Badge NPM Badge install size
utils LSK.js – utils – helpers and functions NPM Badge NPM Badge NPM Badge install size
worker LSK module for worker. NPM Badge NPM Badge NPM Badge install size
add-to-calendar LSK ux subrepo: extra NPM Badge NPM Badge NPM Badge install size
article LSK ux subrepo: article NPM Badge NPM Badge NPM Badge install size
avatar LSK ux subrepo: avatar NPM Badge NPM Badge NPM Badge install size
button LSK ux subrepo: button NPM Badge NPM Badge NPM Badge install size
button2 LSK ux subrepo: button NPM Badge NPM Badge NPM Badge install size
chat LSK ux subrepo: chat NPM Badge NPM Badge NPM Badge install size
cookie-consent LSK ux subrepo: cookie-consent NPM Badge NPM Badge NPM Badge install size
css LSK ux subrepo: css NPM Badge NPM Badge NPM Badge install size
dash LSK.js – Dash – React components for your own dashboard NPM Badge NPM Badge NPM Badge install size
dashboard LSK ux subrepo: dashboard NPM Badge NPM Badge NPM Badge install size
dev LSK ux subrepo: ui-dev NPM Badge NPM Badge NPM Badge install size
docs lskjs docs NPM Badge NPM Badge NPM Badge install size
downloads LSK ux subrepo: download NPM Badge NPM Badge NPM Badge install size
extra LSK ux subrepo: extra NPM Badge NPM Badge NPM Badge install size
flag LSK ux subrepo: flag NPM Badge NPM Badge NPM Badge install size
form LSK ux subrepo: form NPM Badge NPM Badge NPM Badge install size
grid LSK ux subrepo: grid NPM Badge NPM Badge NPM Badge install size
gridtable LSK ux subrepo: gridtable NPM Badge NPM Badge NPM Badge install size
image LSK ux subrepo: image NPM Badge NPM Badge NPM Badge install size
landing LSK ux subrepo: landing NPM Badge NPM Badge NPM Badge install size
link LSK ux subrepo: link NPM Badge NPM Badge NPM Badge install size
list LSK ux subrepo: list NPM Badge NPM Badge NPM Badge install size
modal LSK ux subrepo: modal NPM Badge NPM Badge NPM Badge install size
navbar LSK ux subrepo: navbar NPM Badge NPM Badge NPM Badge install size
notification LSK ux subrepo: notification NPM Badge NPM Badge NPM Badge install size
page LSK ux subrepo: page NPM Badge NPM Badge NPM Badge install size
progress LSK ux subrepo: progress NPM Badge NPM Badge NPM Badge install size
scroll LSK ux subrepo: scroll NPM Badge NPM Badge NPM Badge install size
slide LSK ux subrepo: slide NPM Badge NPM Badge NPM Badge install size
t LSK ux subrepo: t NPM Badge NPM Badge NPM Badge install size
tag LSK ux subrepo: tag NPM Badge NPM Badge NPM Badge install size
theme LSK ux subrepo: theme NPM Badge NPM Badge NPM Badge install size
typo LSK ux subrepo: typo NPM Badge NPM Badge NPM Badge install size
ui LSK ux subrepo: ui NPM Badge NPM Badge NPM Badge install size
ui2 LSK ux subrepo: ui2 NPM Badge NPM Badge NPM Badge install size

Вдохновлен:

this.useMiddlewares()
this.useRoutes()
this.useDefaultRoute()

А также:

  • Express async router
  • Json Web Token
  • Bunyan logger with updated view

Auth

Токен можно прикладывать следующими методами

  • в Header Authorization: Bearer %USER_TOKEN%
  • в Header X-Access-Token: %USER_TOKEN%
  • в Cookie: token=%USER_TOKEN%
  • в GET параметр: ?token=%USER_TOKEN%

Bunyan log levels

LSKit принимает стоковый Bunyan логгер

log.trace('Starting method');

if (!req.user) {
  log.fatal('Cannot get User');
  throw new Error('Cannot get User')
}

log.info('Method success');

Log levels

  • fatal
  • error
  • warn
  • info
  • debug
  • trace

Что еще нужно дописать

  • Что из себя представляет модуль
  • Что такое мидлвара?
  • Что такое ресурс? Resource ENDPOINT
  • Универсальная модель?
  • Документация со swagger

Getting Started

Requirements

  • Mac OS X, Windows, or Linux
  • Node.js v6.5 or newer
  • npm v3.10 or newer (new to npm?)
  • node-gyp prerequisites mentioned here
  • Text editor or IDE pre-configured with React/JSX/Flow/ESlint (learn more)

Структура проекта

Before you start, take a moment to see how the project structure looks like:

.
├── /build/                     # Директория в которую билдится проект
├── /node_modules/              # Сторонние библиотеки и утилиты
├── /src/                       # Исходный код приложения
│   ├── /CoreApp/               # Базовое приложение
│   │   ├── /api/               # Интерфейс клиент-серверного взаимодействия
│   │   ├── /middlewares/       # Среднии слои express
│   │   ├── /models/            # Модели базы данных
│   │   ├── /resourses/         # Ресурсы
│   │   ├── CoreApp.js          # Класс-реализация базового приложения
│   │   ├── requests.js         # Реквесты приложения
│   │   └── responses.js        # Респонсы приложения
│   ├── /ReactApp/              # Базовое приложение
│   │   ├── /compoents/         # React компоненты
│   │   ├── /Html/              # Класс-реализа
│   │   ├── /Html/              # Класс-реализа
│   │   ├── /Html/              # Класс-реализа
│   │   ├── /routes/            # Роутер с страницами\экранами, которые являются React компонентами
│   │   ├── /models/            # Модели базы данных
│   │   ├── /resourses/         # Ресурсы
│   │   ├── /routes/            # Роутер с страницами\экранами, которые являются React компонентами
│   │   ├── /stores/            # Сторы React приложения
│   │   ├   └── /AppStore.js    # Главный стор React приложения
│   │   ├── ReactApp.client.js  # Класс-реализация базового приложения на клиенте
│   │   ├── ReactApp.server.js  # Класс-реализация базового приложения на сервере
│   │   ├── requests.js         # Реквесты приложения
│   │   └── responses.js        # Респонсы приложения
│   ├── /client.js              # Точка входа Клиентского приложения
│   ├── /config                 # Общие настройки проекта
│   └── /server.js              # Точка входа Серверного приложения
├── /test/                      # Модульные и интеграционные тесты
├── /tools/                     # Скрипты и утилиты для автоматизации сборки проекта
│   ├── /config.js              # Конфигурация сборки проекта
│   ├── /run.js                 # Система запуска сборки
│   └── /webpack.config.js      # Конфигурация Вебпака для клинстких и серверных бандлов
└── package.json                # Список сторонних библиотек и утилит

Note: The current version of RSK does not contain a Flux implementation. It can be easily integrated with any Flux library of your choice. The most commonly used Flux libraries are Flux, Redux, and Relay.

Quick Start

1. Get the latest version

You can start by cloning the latest version of React Starter Kit (RSK) on your local machine by running:

$ git clone -o lego-starter-kit -b master --single-branch \
      https://github.com/isuvorov/lego-starter-kit.git MyApp
$ cd MyApp

Alternatively, you can start a new project based on RSK right from WebStorm IDE, or by using Yeoman generator.

2. Run npm install

This will install both run-time project dependencies and developer tools listed in package.json file.

3. Run npm start

This command will build the app from the source files (/src) into the output /build folder. As soon as the initial build completes, it will start the Node.js server (node build/server.js) and Browsersync with HMR on top of it.

http://localhost:3000/ — Node.js server (build/server.js)
http://localhost:3000/graphql — GraphQL server and IDE
http://localhost:3001/ — BrowserSync proxy with HMR, React Hot Transform
http://localhost:3002/ — BrowserSync control panel (UI)

Now you can open your web app in a browser, on mobile devices and start hacking. Whenever you modify any of the source files inside the /src folder, the module bundler (Webpack) will recompile the app on the fly and refresh all the connected browsers.

browsersync

Note that the npm start command launches the app in development mode, the compiled output files are not optimized and minimized in this case. You can use --release command line argument to check how your app works in release (production) mode:

$ npm start -- --release

NOTE: double dashes are required

How to Build, Test, Deploy

If you need just to build the app (without running a dev server), simply run:

$ npm run build

or, for a production build:

$ npm run build -- --release

or, for a production docker build:

$ npm run build -- --release --docker

NOTE: double dashes are required

After running this command, the /build folder will contain the compiled version of the app. For example, you can launch Node.js server normally by running node build/server.js.

To check the source code for syntax errors and potential issues run:

$ npm run lint

To launch unit tests:

$ npm test              # Run unit tests with Mocha
$ npm run test:watch    # Launch unit test runner and start watching for changes

By default, Mocha test runner is looking for test files matching the src/**/*.test.js pattern. Take a look at src/components/Layout/Layout.test.js as an example.

To deploy the app, run:

$ npm run deploy

The deployment script tools/deploy.js is configured to push the contents of the /build folder to a remote server via Git. You can easily deploy your app to Azure Web Apps, or Heroku this way. Both will execute npm install --production upon receiving new files from you. Note, you should only deploy the contents of the /build folder to a remote server.

How to Update

If you need to keep your project up to date with the recent changes made to RSK, you can always fetch and merge them from this repo back into your own project by running:

$ git checkout master
$ git fetch lego-starter-kit
$ git merge lego-starter-kit/master
$ npm install

📖 License

This project is licensed under the MIT License - see the LICENSE file for details

👥 Contributors


Igor Suvorov

💻 🎨 🤔

👏 Contributing

  1. Fork it (https://github.com/yourname/yourproject/fork)
  2. Create your feature branch (git checkout -b features/fooBar)
  3. Commit your changes (git commit -am 'feat(image): Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

📮 Any questions? Always welcome :)