React + Express を活用したモノレポ環境構築ガイド：Turborepoで効率的な開発を実現

mkdir Documents/workspace/react-express-graphql-turborepo
cd Documents/workspace/react-express-graphql-turborepo
npm init -y

npm install turbo -D

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

{
  "name": "react-express-graphql-turborepo",
+ "workspaces": ["apps/*", "packages/*"],
  "version": "1.0.0",
  "description": "",
- "main": "index.js",
+ "packageManager": "npm@10.9.2",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "turbo": "^2.4.0"
  }
}

mkdir apps
cd apps
npm create vite@latest frontend

{
-  "name": "frontend",
+  "name": "@react-express-graphql-turborepo/frontend",
  "private": true,

cd apps/frontend
npm install

npm run dev

 VITE v6.1.0  ready in 319 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

mkdir apps/backend && cd apps/backend
npm init -y
npm i express cors dotenv
npm i -D  typescript ts-node @types/node @types/express @types/cors

{
- "name": "backend",
+ "name": "@react-express-graphql-turborepo/backend",
  "version": "1.0.0",

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "module": "CommonJS",
    "target": "ES6",
    "esModuleInterop": true
  }
}

import express from "express";
import cors from "cors";

const app = express();
const PORT = process.env.PORT || 4000;

app.use(cors());
app.use(express.json());

app.get("/", (req, res) => {
  res.send("Hello from Express!");
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

- "main": "index.js",
+ "main": "index.ts",
  "scripts": {
+   "dev": "ts-node src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

npm run dev

Server is running on http://localhost:4000

curl http://localhost:4000

Hello from Express!

import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("http://localhost:4000")
      .then((res) => res.text())
      .then((data) => setMessage(data));
  }, []);

  return (
    <div>
      <h1>React + Express</h1>
      <p>API Response: {message}</p>
    </div>
  );
}

export default App;

rm apps/frontend/src/index.css
rm apps/frontend/src/App.css

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
- import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

npm run dev

tree -I node_modules -I .git -I .turbo --dirsfirst -a

.
├── apps
│   ├── backend
│   │   ├── src
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── tsconfig.json
│   └── frontend
│       ├── dist
│       │   ├── assets
│       │   │   ├── index-D5Y6grW-.js
│       │   │   └── index-kQJbKSsj.css
│       │   ├── index.html
│       │   └── vite.svg
│       ├── public
│       │   └── vite.svg
│       ├── src
│       │   ├── assets
│       │   │   └── react.svg
│       │   ├── App.tsx
│       │   ├── main.tsx
│       │   └── vite-env.d.ts
│       ├── .gitignore
│       ├── README.md
│       ├── eslint.config.js
│       ├── index.html
│       ├── package.json
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.node.json
│       └── vite.config.ts
├── package-lock.json
├── package.json
└── turbo.json