使用Node搭建reactSSR服務端渲染架構

如題；本文所講架構主要用到技術棧有：Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs,  log4js, scss，echarts，ant desige

使用Express初始化Node服務

開始本項目首先你的電腦要安裝有node，npm這個沒什麼好說的。其次本次Node服務用的框架是express；因此要安裝：express-generator

而後使用express your-project初始化你的express項目

npm install express-generator -g //執行這條命令全局安裝express-generator，若是你不想全局安裝把-g去掉便可

初始化express項目以後咱們開始把react，webpack整合到這個node服務上。

初始化React項目並整合webpack

這裏整合webpack使用的是webpack4的版本，若是你熟悉vue-cli(vue-cli3以前的版本)的話你應該會知道webpack配置有多少個文件，這裏參考了vue-cli生成的webpack配置。

添加src文件夾

src文件夾下的內容都是整個react的一些核心配置，如請求處理，css樣式，公共組件，路由，頁面，stores全局狀態數據。

配置.babelrc

由於用到ES6，ES7語法因此要配置.babelrc文件。這個文件東西很少下面直接貼出代碼

1 {
2   "presets": [["es2015", { "modules": false }], "react", "stage-0"],
3   "plugins": [
4     "transform-decorators-legacy",
5     ["import", { "libraryName": "antd", "style": "css" }],
6     "transform-runtime"
7   ]
8 }

修改Node服務app.js

其實主要是加上這句：app.use('/', reactSSR); 其就是爲了項目啓動的時候開啓熱更新並渲染views中reactSSR.ejs這個模板引擎文件從而達到服務端渲染的目的。

項目結構

這裏把項目主要的文件夾結構放到最後。

 

項目GitHub地址：https://github.com/Uwah/node-react

 

後期部署上服務器以後會找個時間更新博客，主要是用到pm2