React 16 TypeScript Isomorphic Starter

with rxjs v5.4.3 + Immutable v4.0.0-rc.4

This system was created for start any project on NodeJs and React.

Built using

For styles

• Webpack v3.6.0
• SCSS + sass-loader v6.0.6
• bootstrap v4.0.0-beta
• autoprefixer v7.1.4
• cssnano v3.10.0 (only Environment production)
• BEM System

---

For frontend side

• TypeScript v2.5.3 + awesome-typescript-loader v3.2.3
• React v16.0.0
• redux v3.7.2
• Webpack v3.6.0

Other

• classnames v2.2.5
• socket.io v2.0.3
• React-redux v5.0.6
• redux-observable v0.16.0
• React-router v4.2.0
• React-router-redux v5.0.0-alpha.6
• react-helmet v5.2.0

Babel

• babel-loader v7.1.2
• babel-plugin-transform-runtime v6.23.0
• babel-preset-es2015 v6.24.1
• babel-preset-stage-0 v6.24.1
• babel-plugin-dynamic-import-webpack v1.0.1

---

For backend side

• TypeScript v2.5.3
• React v16.0.0
• Koa v2.3.0
• koa-router v7.2.1

DataBase and Memory

• mongoose v4.12.0
• moize v4.0.0

For user system

• bcryptjs v2.4.3
• jsonwebtoken v8.0.1

For SVG

• svg-sprite-loader v3.2.5
• gulp-svgo v1.2.5

Logging

• pino v4.7.2

Other

• ioredis v3.1.4
• elasticsearch v13.3.1
• classnames v2.2.5
• socket.io v2.0.3
• redux v3.7.2
• React-redux v5.0.6
• React-router v4.2.0
• React-router-redux v5.0.0-alpha.6
• react-helmet v5.2.0

##Progressive Web App

• offline-plugin v4.8.4

##Production process manager for Node.js

• PM2 v2.7.1

Testing system

• Jest v21.2.1
• TS-Jest v21.0.1

---

Other variants of project:

• redux-thunk + redux-promise
• redux-saga + immutable

---

Getting Started

Requirement:

• NodeJS 8+
• MongoDB 3.4+
• Redis 4.0+
• Elasticsearch 5.6+

Install dependencies:

$ yarn install

$ npm install

Running development server

#####Run webpack watcher backend changes:

npm run backend-watch

#####Run webpack watcher frontend changes (for assets) and run dev-server:

npm run dev-server

#####Run backend side

gulp backend

Visit http://localhost:3000/.

Running production server

This will build the assets for you on the first run. For subsequent starts, you should run:

npm run production

#####Run server:

npm start

Visit http://localhost:1337/.

#####Restart server:

npm restart

#####Stop server:

npm stop

#####Kill process:

npm run kill

#####Show logs:

npm run logs

Linting Test

Style

$ gem install scss_lint

$ npm run scss-lint

TypeScript

$ npm run lint-typescript

All

$ npm run lint

##Task lists

• Create isomorphic application
• Connect React & Redux & Router
• Add database - MongoDB
• Add Redis.io v4+
• Connect socket.io with Redis
• Add ServiceWorker and AppCache
• PM2 Start server
• SVG sprite generator
• Load images from static
• Tinypng for images
• Authorization Token System System has JWT module
• Update React to v16
• Add pipelines testing Travis CI
• Add testing

Folder Structure Conventions

.
├── .awcache                # Cached build files
├── __tests__               # Folder with test files
├── client                  # Client load application
├── dist                    # Compiled files
├── route                   # Files for routing application
├── server                  # Server load applicaton
├── static                  # Static files
├── store                   # Redux store
├── styles                  # Application styles
├── view                    # React view components
├── webpack                 # Config for compilation
├── tools                   # Tools and utilities
├── .gitignore
├── .scss-lint.yml
├── .travis.yml             # Config file for Travis CI
├── ecosystem.json          # Config file for PM2
├── gulpfile.js
├── jestconfig.json         # Config file for Jest
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

Folder Structure Compiled Files

.
└── dist
    ├── public               # Assets folder
    └── server               # Server application