AI-Quickstart/instructions

Project Scaffold

1. Initialize a node project to be able to install npm dependencies

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

npm create vite@latest frontend --template react

4. cd into the frontend directory and install dependencies

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.

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.

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

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.