From f33dd2056938bdd2b4dc9256c7e195f8fecdffec Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <hadeedji@gmail.com>
Date: Wed, 1 May 2024 11:08:21 +0500
Subject: [PATCH] Make a monorepo with express

---
 index.html           |  2 +-
 package.json         | 10 ++++++++++
 src/app.jsx          |  3 ---
 src/client/app.jsx   | 17 +++++++++++++++++
 src/server/app.js    | 10 ++++++++++
 src/server/server.js |  3 +++
 vite.config.js       |  5 +++++
 7 files changed, 46 insertions(+), 4 deletions(-)
 delete mode 100644 src/app.jsx
 create mode 100644 src/client/app.jsx
 create mode 100644 src/server/app.js
 create mode 100644 src/server/server.js

diff --git a/index.html b/index.html
index 4e4db53..1cc8584 100644
--- a/index.html
+++ b/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(
diff --git a/package.json b/package.json
index 04b54de..58a0291 100644
--- a/package.json
+++ b/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",
diff --git a/src/app.jsx b/src/app.jsx
deleted file mode 100644
index 040a07e..0000000
--- a/src/app.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default () => (
-  <h1 className="text-4xl font-extrabold">Using React and Tailwind</h1>
-);
diff --git a/src/client/app.jsx b/src/client/app.jsx
new file mode 100644
index 0000000..d2a05e0
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/src/server/app.js b/src/server/app.js
new file mode 100644
index 0000000..9c5fc21
--- /dev/null
+++ b/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;
diff --git a/src/server/server.js b/src/server/server.js
new file mode 100644
index 0000000..50b8fc3
--- /dev/null
+++ b/src/server/server.js
@@ -0,0 +1,3 @@
+import app from "./app.js";
+
+app.listen(3000);
diff --git a/vite.config.js b/vite.config.js
index 4cece00..76d152c 100644
--- a/vite.config.js
+++ b/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'`,
   },