anechunaev / frontend-boilerplate

Modern Web Frontend Boilerplate with React + React Router + TypeScript + Express

Modern Web Frontend Boilerplate

Technologies

• Client-side: TypeScript v4, React v17
• Server-side: TypeScript v4, Node.js v10+
• Routing: Express v4, React-Router v5

Limitations and restrictions

Server-side:

• Node.js v.10+
• Npm v.6+
• TLS/SSL not supported, it should be implemented by platform router or reverse-proxy

Client-side:

• IE browser is not supported (we are modern, right?)

Docker repository

bungubot/frontend-boilerplate

Features

Build process

• Containerized build process with Docker
• Multi-stage build with Docker
• Generate compressed assets with gzip and brotli

Server-side application

• Graceful shutdown
• Web server response caching with Varnish
• Server-side rendering with critical CSS
• Above-the-fold CSS
• Internationalization support with Intl API for Node.js
• Use GraphQL to implement client-server-client messaging

Client-side application

• PWA
  • Web App Manifest
  • App icons
  • Offline mode with Service Workers
  • Client-side cache with Service Workers
• SPA with splitted chunks and async loading
• Dynamic styling and theming with JSS
• Use GraphQL to implement client-server-client messaging

Development tools

• Quality assurance tools
  • Integrate framework for unit-testing
  • Integrate framework for e2e testing
  • Coverage reports
  • Performance reports
  • Linters and code-style checkers
• Watcher
• Hot module replacement for client-side code
• Iterative assets building

How to build

Production build:

$ npm run build

Development build:

$ npm run dev:build

Start server:

$ npm start
# or
$ ./bin/start.sh