Make a monorepo with express

index.html

@@ -12,7 +12,7 @@
       import React from "react";
       import { createRoot } from "react-dom/client";
 
-      import App from "./src/app.jsx";
+      import App from "./src/client/app.jsx";
 
       createRoot(document.getElementById("root")).render(
         React.createElement(

package.json

@@ -1,11 +1,21 @@
 {
   "type": "module",
+  "scripts": {
+    "dev": "concurrently 'npm run dev:client' 'npm run dev:server'",
+    "dev:client": "vite --open",
+    "dev:server": "nodemon src/server/server.js",
+    "build": "vite build",
+    "start": "node src/server/server.js"
+  },
   "dependencies": {
+    "express": "^4.19.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
+    "nodemon": "^3.1.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
     "prettier-plugin-css-order": "^2.1.2",

src/app.jsx

@@ -1,3 +0,0 @@
-export default () => (
-  <h1 className="text-4xl font-extrabold">Using React and Tailwind</h1>
-);

src/client/app.jsx

@@ -0,0 +1,17 @@
+export default () => {
+  return (
+    <>
+      <h1 className="text-4xl font-extrabold">React + Express + Tailwind</h1>
+      <button
+        className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+        onClick={() => {
+          fetch("/api")
+            .then((response) => response.text())
+            .then((data) => alert(data));
+        }}
+      >
+        Click me!
+      </button>
+    </>
+  );
+};

src/server/app.js

@@ -0,0 +1,10 @@
+import express from "express";
+const app = express();
+
+const rootRouter = express.Router();
+rootRouter.get("/", (_, res) => res.send("Backend is working!"));
+
+app.use(express.static("dist"));
+app.use("/api", rootRouter);
+
+export default app;

src/server/server.js

@@ -0,0 +1,3 @@
+import app from "./app.js";
+
+app.listen(3000);

vite.config.js

@@ -1,6 +1,11 @@
 import { defineConfig } from "vite";
 
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": "http://localhost:3000",
+    },
+  },
   esbuild: {
     jsxInject: `import React from 'react'`,
   },