Merge pull request #49 from JumboCode/myi/backend-deployment

deploying express backend on vercel

README.md

@@ -15,7 +15,7 @@ npm run client
 To run just server:
 ```
 npm run server  # in root folder
-npm run dev     # in backend folder
+npm run dev     # in api folder
 ```
 
 ## Git Commands Guide

backend/package.json → api/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "backend",
+  "name": "api",
   "version": "1.0.0",
   "description": "",
-  "main": "server.js",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js",
-    "dev": "nodemon server"
+    "start": "node index.js",
+    "dev": "nodemon index"
   },
   "keywords": [],
   "author": "",
@@ -22,4 +22,4 @@
   "devDependencies": {
     "nodemon": "^3.1.7"
   }
-}
+}

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "client": "vite",
-    "server": "npm run dev --prefix backend",
+    "server": "npm run dev --prefix api",
     "dev": "concurrently \"npm run client\" \"npm run server\" \"npm i\"",
     "build": "vite build",
     "lint": "eslint .",
@@ -40,6 +40,6 @@
     "vite": "^5.4.9"
   },
   "workspaces": [
-    "backend"
+    "api"
   ]
 }

src/api/class-wrapper.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-const apiUrl = (endpoint) => `${import.meta.env.VITE_API_URL}${endpoint}`
+const apiUrl = (endpoint) => `${endpoint}`
 
 // query should be a string
 const getClasses = async (query = "") => {

src/api/contact-wrapper.js

@@ -1,4 +1,4 @@
-const apiUrl = (endpoint) => `${import.meta.env.VITE_API_URL}${endpoint}`
+const apiUrl = (endpoint) => `${endpoint}`
 
 const postContact = async (body) => {
   try {

src/api/user-wrapper.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const apiUrl = (endpoint) => `${import.meta.env.VITE_API_URL}${endpoint}`
+const apiUrl = (endpoint) => `${endpoint}`
 
 const postUser = async (body) => {
   try {

src/pages/Levels.jsx

@@ -43,8 +43,8 @@ const Levels = () => {
           {levels.map((level, levelIndex) => {
             params.set("level", level.level)
             return (
-              <Link href={`/classes?${params.toString()}`}>
-                <Level key={levelIndex} level={level} />
+              <Link key={levelIndex} href={`/classes?${params.toString()}`}>
+                <Level level={level} />
               </Link>
             )
           })}

vercel.json

@@ -1,8 +1,35 @@
 {
-    "rewrites": [
-      {
-        "source": "/((?!api/)[^./]+)",
-        "destination": "/"
-      }
-    ]
-  }
+  "rewrites": [
+    {
+      "source": "/((?!api/)[^./]+)",
+      "destination": "/"
+    },
+    {
+      "source": "/api/(.*)",
+      "destination": "/api"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/api/(.*)",
+      "headers": [
+        {
+          "key": "Access-Control-Allow-Credentials",
+          "value": "true"
+        },
+        {
+          "key": "Access-Control-Allow-Origin",
+          "value": "*"
+        },
+        {
+          "key": "Access-Control-Allow-Methods",
+          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
+        },
+        {
+          "key": "Access-Control-Allow-Headers",
+          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
+        }
+      ]
+    }
+  ]
+}

vite.config.js

@@ -10,4 +10,9 @@ export default defineConfig({
       '@': path.resolve(__dirname, 'src'),
     },
   },
+  server: {
+    proxy: {
+      '/api': "http://localhost:4000",
+    },
+  },
 })