This project is a discussion web application (based on Github Discussions), designed with a clear architecture and understandable code organization. The purpose is to provide a reference implementation for monolithic applications with React and React Router.
The application code is organized in two main folders:
core
: This contain the core application logic and data access, and integration with other services like mailing, queues etc.web
: This contains all web specific code, like session management and UI code
Some essential services like database, file storage and mailing are abstracted away from the main application code. This has two main benefits:
- A service can be reused across various routes;
- We can easily change the service implementation without changing code in various routes
The UI routes are implemented with manual configuration for two reasons:
- Sub components colocation: file system based routing doesn't provide much flexibility for colocating sub components next to the route where it is used;
- Confusing file name patterns: UI routes may use a lot of special patterns, like optional segments, pathless layouts, layoutless paths etc, translating this to the file system makes the filename complex.
Install the dependencies:
npm install
Start the development server with HMR:
npm run dev
Your application will be available at http://localhost:5173
.
Create a production build:
npm run build
This template includes three Dockerfiles optimized for different package managers:
Dockerfile
- for npmDockerfile.pnpm
- for pnpmDockerfile.bun
- for bun
To build and run using Docker:
# For npm
docker build -t my-app .
# For pnpm
docker build -f Dockerfile.pnpm -t my-app .
# For bun
docker build -f Dockerfile.bun -t my-app .
# Run the container
docker run -p 3000:3000 my-app
The containerized application can be deployed to any platform that supports Docker, including:
- AWS ECS
- Google Cloud Run
- Azure Container Apps
- Digital Ocean App Platform
- Fly.io
- Railway
If you're familiar with deploying Node applications, the built-in app server is production-ready.
Make sure to deploy the output of npm run build
├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│ ├── client/ # Static assets
│ └── server/ # Server-side code
Built with ❤️ using React Router.