Currently, I am in the process of transitioning a frontend React/Typescript project created with Vite into a MERN stack project by incorporating a backend. To achieve this, I have relocated all frontend files to a "client folder" and established an empty "server" folder.
Prior to proceeding further, my intention is to ensure that the frontend functions correctly. However, when utilizing "npm run dev," which has been my standard practice until now, an error arises indicating the inability to locate a webpage on localhost:3000.
To address this issue, I made modifications to my "vite.config.ts" file as follows:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
root: './client',
base: '/',
plugins: [react()],
server: {
port: 3000
}
})
Furthermore, here is the current state of my package.json within the client folder:
{
"name": "vite-number-conversion",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.8.1"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7",
"typescript": "^4.9.3",
"vite": "^4.1.0"
}
}
It seems probable that adjustments need to be made within the package.json file, yet I am uncertain about the correct course of action. I would greatly appreciate any guidance provided!