使用Node搭建reactSSR服務端渲染架構
阿新 • • 發佈:2018-08-30
狀態 nod reac ESS 初始化 ant log4 ack 文件
如題;本文所講架構主要用到技術棧有: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
使用Node搭建reactSSR服務端渲染架構