Skip to content

This template demonstrates integrating a React frontend with a Drogon C++ backend, offering a pre-configured setup with build scripts for streamlined development and deployment of web applications.

License

Notifications You must be signed in to change notification settings

Koshkej/react-drogon-setup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 

Repository files navigation

banner

Automated script for rapid fullstack project initialization with modern stack:

  • Frontend: React 18 (Webpack 5 + Babel 7)
  • Backend: Drogon Framework (C++20 HTTP-server)
  • Infrastructure: Automated build and deployment

What does this script do?

About Drogon

Drogon is a high-performance C++17/20 HTTP application framework. Key features:

  • Async/non-blocking architecture
  • Built-in HTTP/1.1 and WebSocket support
  • Cross-platform (Linux/macOS/Windows)
  • ORM and template engine support
  • Used in production by Tencent, Alibaba, and others

Official Resources:

Core Features

🟣 Creates 3-in-1 project structure:

  • /frontend - React app with preconfigured setup
  • /backend - Drogon server with proper CMake configuration
  • /deploy - Shared directory for production artifacts

🟣 Automatic configuration:

  • Installs Drogon (if missing)
  • Configures Webpack for production/development builds
  • Generates basic React components (App, index)
  • Sets up CORS and static file serving through Drogon

🟣 Workflow optimization:

  • Configures output directory for Drogon binaries
  • Creates HTML template for React app
  • Generates convenient NPM scripts

Why use this?

✔️ Saves time of initial setup
✔️ Eliminates configuration errors
✔️ Production-ready template
✔️ Modern toolchain integration
✔️ Optimal build configurations

Complete Guide

Requirements

Ubuntu/Debian or compatible, Node.js 16.x+, npm 8.x+, CMake 3.15+, gcc/g++ 11.x+
Sudo privileges for Drogon installation

Installation

[1] Download script:

wget https://your-domain.com/path/to/bush

[2] Make executable:

chmod +x bush

[3] (Optional) Add to PATH:

sudo mv bush /usr/local/bin/

Usage

Basic execution:

create-react-drogon my_project

After completion you'll see:

✅ Project "my_project" created successfully!

Next steps to run your project:

1. Build the React application:
   cd my_project/frontend && npm run build
   This will compile your React code and output 'main.js' into the deploy directory.

2. Build the Drogon project:
   cd my_project/backend && mkdir -p build && cd build && cmake .. && make
   The server executable will be placed in the deploy directory.

3. Run the Drogon server:
   From the deploy directory, run the executable (e.g., ./your_executable_name).

4. Open your browser and navigate to: http://localhost:5555/
   You should see the React application served by Drogon.

Creation Process Details

Script executes sequentially:

[1] Argument validation:

  • Checks project name presence
  • Verifies directory doesn't exist

[2] Structure creation:

my_project/
├── frontend/
│   ├── src/              # React sources
│   ├── webpack.config.js # Production optimizations
│   └── babel.config.json # JSX support
├── backend/
│   ├── CMakeLists.txt    # Pre-configured build
│   └── main.cc           # Server listening on :5555
└── deploy/
    ├── index.html        # Entry point
    ├── main.js           # ReactJS compiled app
    └── my_project        # Compiled executable

[3] Drogon setup:

  • Auto-install via apt
  • CMake patching for /deploy output
  • Basic HTTP server example

[4] React initialization:

  • Dependency installation (react, webpack, babel)
  • Preconfigured JSX rules
  • Ready-to-use npm scripts

Project Workflow

Frontend Development

Start dev server with hot reload:

cd frontend
npm run dev

Features:

  • Auto-rebuild on changes
  • Source maps for debugging
  • API request proxying to Drogon

Backend Development

Build and run:

cd backend
mkdir -p build && cd build
cmake ..
make

Production Build

[1] Build frontend:

cd frontend
npm run build # ⇒ /deploy/main.js

[2] Build backend:

cd backend/build
make clean && make

[3] Run server:

cd deploy
./my_project

About

This template demonstrates integrating a React frontend with a Drogon C++ backend, offering a pre-configured setup with build scripts for streamlined development and deployment of web applications.

Topics

Resources

License

Stars

Watchers

Forks

Languages