.. | ||
README2.md | ||
README3.md | ||
README4.md | ||
README5.md | ||
README.md |
Project Scaffold
- Initialize a node project to be able to install npm dependencies
npm init
- Install the following backend dependencies that we will need
App Dependencies Dev Dependencies express nodemon morgan concurrently multer csvtojson openai - Initialize a Vite React Project into a new subfolder called frontend
npm create vite@latest frontend --template react
cd
into the frontend directory and install dependencies
npm install
- 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/, ''),
}
}
}
})
- Add the following script to the root package.json file.
"dev": "concurrently \"nodemon app.js\" \"cd frontend && npm run dev\""
- 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}`)
})
-
You can now start the backend and frontend server with the same command
npm run dev
from the root of your project. -
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.