虽然是一个服务端开发，在人手不足时也会写一些前端代码。当需要从零开始搭建前端项目时，一个好的前端 Starter 模板，往往事半功倍。
另外我也是一个 React 爱好者，本公众号里也分享过不少关于 React 及其生态的文章，比如：
今天介绍的 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 的安装与使用
-
首先，检出该项目到本地
git clone https://github.com/manuelbieh/react-ssr-setup.git
-
安装项目依赖
cd react-ssr-setup
yarn
-
启动项目
yarn start
启动完成，就能访问 http://localhost:8500 了。
-
将项目推到自己的仓库
通常你会需要将该项目作为起点，推到自己的仓库中进行开发。可以这么操作：
# 在 react-ssr-setup 文件夹下执行
git remote set-url origin <新的仓库地址>
git push -u origin master
接下来，我们熟悉一下项目结构。
react-ssr-setup 的文件结构
我们需要打交道的基本上是 src 目录下的这3个文件：
看名字即知:
-
client: 用来放浏览器端的文件 -
server: 用来放服务端的文件 -
shared: 用来放两端共用的文件
更多的文件用途，请自行检出了解。
react-ssr-setup 代码调试
因为项目是用 TypeScript 所写，且项目结构比较复杂，调试有一定复杂性。我是这么做的：
-
在 Jest 测试文件中调用需要测试的方法。 -
在 WebStorm 中，右键 debug 运行 package.json中的test项。 -
利用 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-alpine
WORKDIR /app
EXPOSE 8500
COPY ./package.json ./package-lock.json ./
RUN npm ci --production && npm cache clean --force
COPY ./build ./build
CMD ["node","build/server/server.js"]
好了，以上即是关键的几个步骤。
参考资料
manuelbieh/react-ssr-setup: https://github.com/manuelbieh/react-ssr-setup
原文始发于微信公众号（背井）：可能是今年遇到的最好的前端 Starter 模板
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/246593.html
