Skip to content

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

License

Notifications You must be signed in to change notification settings

anechunaev/frontend-boilerplate

Repository files navigation

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