# 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.