73 lines
2.1 KiB
Markdown
73 lines
2.1 KiB
Markdown
# 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.
|
|
|