簡介

目前 create-react-app，在 typescript 已有良好好的支援性。你可以透過 create-react-app 快速建立一個前端所需的。本篇簡單紀錄如何建置前後端為 typescript 的開發環境 react + node 的應用程式。

步驟一

透過指令產生 typescript 版本的 create-react-app

$ npx create-react-app your_app_name --typescript

稍等指令完成後 react 的應用程式就能順利安裝完畢

步驟二

create-react-app 已搞定 react 內所有的細節，包含 typescript 的設定。因此我們要來處理由 node.js 作為的 server，host 我們 react 網站。

於應用程式中新增 server 的資料夾與 tsconfig.json, index.ts

//in your app folder
$ mkdir server

//in server folder
$ tocuh tsconfig.json && touch index.ts

tsconfig.json 中貼上以下

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "../dist",
    "lib": ["es6", "dom", "esnext"],
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "alwaysStrict": true,
    "sourceMap": false,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "pretty": true
  },
  "exclude": ["node_modules"]
}

步驟三

接下來安裝一些 server 會用到的 npm 套件

//in your app folder
yarn add body-parser cors express

並在 server.ts 中貼上

import * as express from "express";
import * as path from "path";
import * as bodyParser from "body-parser";

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "..", "build")));

app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "..", "build", "index.html"));
});

app.listen(9000);

其中 res.sendFile(path.join(__dirname, "..", "build", "index.html")); 就是讓 server 端所有的 get route 都讀取 create-react-app 打包好的代碼。

步驟四

接下來我們更新一下 package.json 的 scripts，其中 scripts 的區域更新為以下

"scripts": {
  "start": "node ./dist/index.js",
  "dev": "react-scripts start",
  "build": "react-scripts build && tsc -p server",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "server": "tsc -p server && node ./dist/index.js",
  "heroku-prebuild": "yarn && yarn build"
}

指令說明

start: 若部署至 Herkou 上，Heroku 將會預設 npm start 作為啟動應用程式的預設指令
dev: 開發 react 網頁時用的指令
build: 編譯 create-react-app 的代碼與 server 資料夾內的代碼。前端的部分會在根目錄中自動建立一個 build folder，而後端的 server 則會在根目錄中自動建立出 dist folder
server: 編譯 server 資料夾內的代碼，並啟動 server
heroku-prebuild: 在 herkou dependencies 前先安裝好 yarn 指令並先將代碼編譯完成

到此已經將 react & express 的 typescript 環境建置完成！代碼可參考此Github

補充

devDEpendencies & Heroku deploy error

若部分的 ts 定義檔安裝在在 devDependencies，部署 Heroku 可能會遇到定義檔找不到的問題，那是因為 heroku 預設下只安裝 dependencies 的套件，導指 ts 代碼中會找不到對應的定義。這時請到 heroku 後台將下方的環境變數寫入就可以將 devDependencies 內的套件一併安裝。

NPM_CONFIG_PRODUCTION = false

Deployment of create react app

本篇的方式是採用 client side render。任何路徑的請求都是回應相同的前端代碼，再由 react router 來處理網址行為與網站內容。更多的 deploy 方式可以參考官方的文件