https://github.com/anechunaev/frontend-boilerplate
Modern Web Frontend Boilerplate with React + React Router + TypeScript + Express
https://github.com/anechunaev/frontend-boilerplate
docker dynamic-styles express jss modern react ssr typescript varnish
Last synced: 3 months ago
JSON representation
Modern Web Frontend Boilerplate with React + React Router + TypeScript + Express
- Host: GitHub
- URL: https://github.com/anechunaev/frontend-boilerplate
- Owner: anechunaev
- License: mit
- Created: 2017-08-08T13:38:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:17:14.000Z (over 2 years ago)
- Last Synced: 2023-04-26T07:21:02.614Z (about 2 years ago)
- Topics: docker, dynamic-styles, express, jss, modern, react, ssr, typescript, varnish
- Language: TypeScript
- Homepage:
- Size: 657 KB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
- [x] Containerized build process with Docker
- [x] Multi-stage build with Docker
- [x] Generate compressed assets with gzip and [brotli](https://github.com/google/brotli)
### Server-side application
- [x] Graceful shutdown
- [x] Web server response caching with [Varnish](https://varnish-cache.org)
- [x] Server-side rendering with critical CSS
- [x] Above-the-fold CSS
- [x] Internationalization support with `Intl` API for Node.js
- [ ] Use GraphQL to implement client-server-client messaging
### Client-side application
- [x] PWA
- [x] Web App Manifest
- [x] App icons
- [ ] Offline mode with Service Workers
- [ ] Client-side cache with Service Workers
- [x] SPA with splitted chunks and async loading
- [x] 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:
```sh
$ npm run build
```
Development build:
```sh
$ npm run dev:build
```
Start server:
```sh
$ npm start
# or
$ ./bin/start.sh
```