Create react app npm create vite@latest - create react app with vite npx create-react-app my-app - create react app with webpack package.json
{
// package.json for Vite
"name": "quotation.app",
"private": true,
"version": "0.0.0",
"dependencies": {
"concurrently": "^7.2.1",
"express": "^4.18.1",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.28.0",
"@typescript-eslint/parser": "^5.28.0",
"@vitejs/plugin-react": "^1.3.0",
"eslint": "^8.17.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.2",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.0",
"nodemon": "^2.0.16",
"typescript": "^4.6.3",
"vite": "^2.9.9"
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"server": "nodemon server.js",
"all": "concurrently \"npm run server\" \"npm run dev\"",
"lint": "npx eslint . --ext .js,.ts,.tsx,.jsx",
"fix": "npx eslint . --ext .js,.ts,.tsx,.jsx --fix"
}
}
// package.json for Webpack
{
"name": "quotation.app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"concurrently": "^7.2.1",
"express": "^4.18.1",
"nodemon": "^2.0.16",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"client": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "nodemon server.js",
"all": "concurrently \"npm run server\" \"npm run client\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3001"
}
server.js
// server.js
const express = require("express")
const app = express()
app.get("/", (req, res) => {
res.send("This is from express.js")
})
app.get("/api", (req, res) => {
res.json({ message: "I am api!" })
})
// start express server on port 3001
app.listen(3001, () => {
console.log("server started on port 3001")
})
app.jsx
// src/App.jsx
import React from 'react'
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetch("/api")
.then((res) => res.json())
.then((data) => setData(data.message));
}, []);
return (
<>
<p>{!data ? "Loading..." : data}</p>
</>
);
}
export default App
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
server: {
proxy: {
'/api': 'http://localhost:3001/'
}
},
plugins: [
react()
]
})
Launch servers npm run all launch server and client dev