可能是今年遇到的最好的前端 Starter 模板

虽然是一个服务端开发，在人手不足时也会写一些前端代码。当需要从零开始搭建前端项目时，一个好的前端 Starter 模板，往往事半功倍。

另外我也是一个 React 爱好者，本公众号里也分享过不少关于 React 及其生态的文章，比如：

1. 使用React Hook加载图片
2. React useEffect：每个开发者都应该知道的4个小技巧
3. 24行代码实现一个Redux

今天介绍的 Starter 模板即是基于 React 的 —— manuelbieh/react-ssr-setup^[1]。

该模板几乎囊括了当下火热的各种前端技术：

• 🔥 Babel 7
• 📦 Webpack 4
• 🔥 ESLint 7 (with a set of custom rules which may be mostly identical to AirBnB with some personal flavor added)
• 🔥 TypeScript (via Babel)
• 🔥 Prettier
• 🔥 Jest
• 🐐 React Testing Library
• ✅ React i18next for multi language support
• ✅ Server Side Rendering with Express
• 🏎 React Fast Refresh
• ✅ CSS Modules
• ✅ PostCSS
• ✅ Precommit hooks via lint-staged + Husky
• ✅ Optional static build without the need for Node.js on the server
• 📕 Support for Storybook (>= 5.0.0)

刚好新的项目中需要一个管理后台，我就拿它试手了，下面是使用效果：

UI库我用的是 Ant Design。

下面介绍一下该模板的使用。

1react-ssr-setup 的安装与使用

1. 首先，检出该项目到本地

git clone https://github.com/manuelbieh/react-ssr-setup.git

1. 安装项目依赖

cd react-ssr-setupyarn

1. 启动项目

yarn start

启动完成，就能访问 http://localhost:8500 了。

1. 将项目推到自己的仓库

通常你会需要将该项目作为起点，推到自己的仓库中进行开发。可以这么操作：

# 在 react-ssr-setup 文件夹下执行git remote set-url origin <新的仓库地址>git push -u origin master

接下来，我们熟悉一下项目结构。

react-ssr-setup 的文件结构

我们需要打交道的基本上是 src
目录下的这3个文件：

看名字即知:

1. client
   : 用来放浏览器端的文件
2. server
   : 用来放服务端的文件
3. shared
   : 用来放两端共用的文件

更多的文件用途，请自行检出了解。

react-ssr-setup 代码调试

因为项目是用 TypeScript 所写，且项目结构比较复杂，调试有一定复杂性。我是这么做的：

1. 在 Jest 测试文件中调用需要测试的方法。
2. 在 WebStorm 中，右键 debug 运行 package.json
   中的 test
   项。
3. 利用 Jest 支持的选择性测试(比如 Press t to filter by a test name regex pattern)，运行指定的测试文件，并对该文件打断点。

如下图，就能成功拦截到方法的执行了：

另外，在开发过程中如果需要访问其它项目的 RESTFUL 接口，可以使用 http-proxy-middleware
包进行配置(修改 src/server/index.ts
，加入该 middleware)。

react-ssr-setup 打包部署

待项目开发完成后，执行 yarn build
进行打包，此时 build
文件夹下会出现打包后的文件。

为了方便，我是直接通过 Docker 部署的：

FROM node:14-alpineWORKDIR /appEXPOSE 8500COPY ./package.json ./package-lock.json ./
RUN npm ci --production && npm cache clean --force
COPY ./build ./build
CMD ["node","build/server/server.js"]

好了，以上即是关键的几个步骤。

参考资料