全栈项目如何开始boilerplate

简单记录一下步骤

前端react vite

• create a react app using vite for client/frontend

npm create vite
cd client
npm install
npm run dev

• install material ui

  • default installation
  • robot fonts
  • icons

• delete all default css files so that we can define our own, leave App.jsx, index.jsx

后端node express js

npm init 
npm i express prisma @prisma/client cors
npm i ts-node typescript nodemon @types/cors @types/express @types/node --save-dev

通过以上命令安装以下依赖

"dependencies": {
  "@prisma/client": "^5.9.1",
  "cors": "^2.8.5",
  "express": "^4.18.2",
  "prisma": "^5.9.1"
},
"devDependencies": {
  "@types/cors": "^2.8.17",
  "@types/express": "^4.17.21",
  "@types/node": "^20.11.16",
  "nodemon": "^3.0.3",
  "ts-node": "^10.9.2",
  "typescript": "^5.3.3"
}

devDependencies和dependencies的区别？

devDependencies只用于developing阶段，而不用于build&deploy发布阶段。

--save-dev意思是install dev dependencies
ts-node: makes typescript development easier
@types/: type definitions that ts can use
@types/express : 使ts可以使用js的库

• start the server

"scripts": {
  "start": "npx nodemon"
},

在package.json里面这样配置，当terminal输入npm start 就可以通过nodemon访问index.ts。

开始创建项目node ts文件的时候配置tsconfig可参考《如何配置package.json和tsconfig》。

express app

新建一个文件index.ts

import express from 'express';
import cors from 'cors'

const app = express(); 
// create a new express app for us 

app.use(express.json());
// response / request into json

app.use(cors());

app.get("/api/movies/search", async (req, res) => {
    res.json({message: 'success!' });
})

// 一个async function，每次访问/api/movies/search路径的时候都会运行

app.listen(4000, () => {
    console.log("server running on localhost:4000");
})

通过package.json里面定义的start命令npm run startterminal运行server，浏览器输入localhost:4000/api/movies/search验证是否显示success。

后端配置数据库

elephant sql注册

prisma 连接

npx prisma init

读取env文件

npm i dotenv