Archive Commit

instructions/README.md

@@ -0,0 +1,72 @@
+# Project Scaffold
+
+1. Initialize a node project to be able to install npm dependencies
+```bash
+npm init
+```
+2. Install the following backend dependencies that we will need
+    | App Dependencies | Dev Dependencies |
+    | - | - |
+    | express | nodemon |
+    | morgan | concurrently |
+    | multer | |
+    | csvtojson | |
+    | openai | |
+3. Initialize a Vite React Project into a new subfolder called frontend
+```bash
+npm create vite@latest frontend --template react
+```
+4. `cd` into the frontend directory and install dependencies
+```bash
+npm install
+```
+5. In the frontend directory update vite.config.js to be as follows. This will allow us to proxy requests at `/api/`from our frontend to the backend. 
+```js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server:{
+    proxy:{
+      "/api" : {
+        target: 'http://localhost:3000/api/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      }
+    }
+  }
+})
+```
+6. Add the following script to the root package.json file.
+```json
+"dev": "concurrently \"nodemon app.js\" \"cd frontend && npm run dev\""
+```
+7. Make an `app.js` in the root directory and make a boilerplate express app that will work with our frontend. 
+```js
+const path = require('path')
+const express = require('express')
+const logger = require('morgan')
+const app = express()
+const port = 3000
+
+app.use(express.json())
+app.use(logger('dev'))
+
+app.get('/api/hello', (req, res) => {
+  res.send(
+    `<h1>Hello World</h1>`
+  )
+})
+
+app.use('/', express.static(path.join(__dirname, 'public')))
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`)
+})
+```
+8. You can now start the backend and frontend server with the same command `npm run dev` from the root of your project. 
+
+9. Open the url that Vite reports (should be something along the lines of `http://127.0.0.1:<port>`) and the default Vite app should render. Add `/api/hello` to the url and you should see the header from our express server route. This means we have successfully bootstrapped our project. 
+