Yet Another Monorepo Example

Monorepo template for a fullstack TypeScript application based on React and Express.

Usage

yarn bootstrap installs all dependency and links the packages.

Production

yarn build transpiles all TypeScript files to JavaScript and bundles the frontend. The generated files are deleted using yarn clean.

• yarn backend:start starts the backend express serve and serves the rest endpoints and frontend on localhost:8000.

Development

The setup supports both reloading code and debugging using tsc, nodemon and webpack-dev-server.

yarn watch transpiles all TypeScript files to JavaScript and watches for changes in the source code.

• backend:serve serves the rest endpoints on localhost:8000 and restart the backend on file change.
• frontend:serve serves the frontend using the webpack-dev-server on localhost:8000 and reloads the application on file change using hot module replacement.

Tools

• Lerna & yarn links packages together and shares dependencies between them using yarn workspaces.
• TypeScript transpiles TypeScript sources to JavaScript.
• nodemon serves a node application and automatically restarts it when source files change.
• webpack bundles JavaScript, HTML and CSS files for the web.
• webpack-dev-server serves a webpack application and refreshes the browser on change.
• eslint reports common mistakes and tries to fix them using predefined rules.
• prettier formats code.

Technologies

Backend

• Express web framework for serving the backend.
• Ts.ED framework on top of express providing decorators for REST endpoints, dependency injection, swagger and mongodb.

Frontend

• React for building frontend user interfaces.
• Restful-React provides react hooks for interacting with backends exposing REST endpoints.