本文通过一个简单示例,介绍了如何使用Nodejs创建后端应用,如何使用React创建前端应用,最后将React前端应用build后的静态界面,集成到后端应用中,实现了前端、后端独立开发与集成。
1. 创建项目目录
创建工程目录demo,接下来我们后端应用app和前端应用client将放到此目录中
mkdir demo
cd demo
2.基于Nodejs/Express/TypeScript的后端开发
使用Nodejs的web框架Express创建一个后端应用app,有关Express框架使用,大家可以参照Express官网,本文不再赘述,接下来我们将进行以下工作。
-
初始化Nodejs工程
-
安装express及express-generator
-
创建后端应用app
-
安装工程依赖模块
-
启动后端应用
2.1. 初始化Nodejs工程
cd demo
npm init -y
# 此时目录结构如下
demo
└─package.json
2.2. 安装express及express-generator
进入demo工程目录,执行一下命令,安装Express框架及Express应用生成器
cd demo
npm i express -save
npm i body-parser -save
npm i express-generator -g
npm i nodemon -save-dev
# 此时目录结构如下
demo
└─node_modules
└─package.json
└─package-lock.json
2.3. 创建后端应用app
使用Express应用生成器,快速创建一个后端应用,我们把它命名为app
express --view=pug app
# 此时目录结构如下:
demo
└─app
└─bin
├─public
│ ├─images
│ ├─javascripts
│ └─stylesheets
├─routes
└─views
└─app.js
└─package.json
└─package.json
└─package-lock.json
为了便于前端、后端工程管理,本文删除了app/package.json,并将app/package.json中的内容合并到dem