Скачать или смотреть Monorepo - 02 - React

Welcome back to Cheese CODE by Roman Dmitri!

In this video , we dive deeper into building the perfect monorepo by adding our first real frontend service: a React application using TypeScript, Webpack, and Yarn.

Join Roman Dmitri as we explore how to integrate React seamlessly into the "stubb" monorepo project. We'll cover the entire setup, from the basic React/TypeScript foundation to configuring Webpack for efficient bundling and development. Learn how to set up a local development environment using Docker, ensuring smooth workflows and tackling common challenges like filesystem permissions.

Key topics covered in this tutorial:

Setting up a React service (stubb-react) within a monorepo.
Configuring TypeScript (tsconfig.json) for type safety and absolute import paths.
Leveraging Webpack for bundling, including environment-specific configs and managing environment variables.
Achieving functional hot reload through an Nginx proxy (stubb-proxy) using WebSockets, even on different devices on your network!
Using Docker (Dockerfile.local, docker-compose.local.yml) for containerized local development.
Managing build and run commands with Makefiles.
Updating the stubb-proxy (Nginx) to correctly route traffic and WebSocket connections to the new React service.
Introducing `stubb-design` for managing design assets.
Demonstrating the setup in action, including the blazing-fast hot reload feature.

Get the code for this video (v0.1.0) from the stubb repository:
https://gitlab.com/cheese-code/stubb/...

This video is part of the "Monorepo - Let's build the perfect monorepo!" playlist. Watch the full series:
   • Monorepo - Let's build the perfect monorepo!  

We're just getting started! Future videos will cover adding backend services, databases, schema migrations, and data seeding – all manageable with a single command.

If you found this informative, please give it a thumbs up, leave your questions or comments below, and subscribe for more content on building robust development setups!

Thanks for watching, and have a sunny day!

#cheesecode #romandmitri #monorepo #react #typescript #webpack #docker #dockercompose #nginx #linux #commandline #hotreload #localdevelopment #webdevelopment #javascript #proxy #softwaredevelopment #softwarearchitecture

Repository
https://gitlab.com/cheese-code/stubb
https://gitlab.com/cheese-code/stubb/...

Channels
‪@cheese-code‬
‪@cheese-make‬
‪@cheese-moto‬
‪@cheese-wood‬

Chapters
00:00 Introduction
00:53 Services - stubb-design
01:20 Services - stubb-react
07:17 Services - stubb-proxy
10:04 Demonstration
12:07 Conclusion