React: ใช้ Firebase จัดการ Server-Side Rendering ด้วย Cloud Functions กันเถอะ

1exports.generateThumbnail = functions.storage.object().onChange((event) => {
2  // ...
3})

1react-ssr
2  - books
3    - intro-to-angular
4      - desc: 'Learn one way to build applications with Ang...'
5      - id: 'intro-to-angular'
6      - title: 'Introduction to Angular'
7    - intro-to-react
8      - desc: 'React makes it painless to create interactiv...'
9      - id: 'intro-to-react'
10      - title: 'Introduction to React'
11    - intro-to-vue
12      - desc: 'React makes it painless to create interactive UIs....'
13      - id: 'intro-to-vue'
14      - title: 'Introduction to Vue'

1react-ssr << ชื่อโฟลเดอร์โปรเจค
2  - functions << โค้ด cloud functions จะบรรจุในนี้
3  - public << static content ของเราบรรจุในนี้แจ้
4  - src << เราจะใส่โค้ด React กันในนี้
5  - .firebaserc
6  - database.rules.json
7  - firebase.json

1{
2  "rules": {
3    ".read": true // เราต้องการให้ใครก็ได้ หมูหมากาไก่ สามารถอ่านข้อมูลจากฐานข้อมูลเราได้หมด
4  }
5}

1{
2  "hosting": {
3    "public": "public",
4    "rewrites": [
5      // เราไม่ต้องการให้เข้าถึง / แล้วไปเรียก index.html
6      // เราจะทำ SSR ดังนั้นเราจะส่งต่อการทำงานไปที่ cloud functions ที่ชื่อ app แทน
7      // ฟังก์ชัน app จะทำ SSR และสร้าง index.html ออกมาให้กับเราเอง
8      {
9        "source": "**",
10        "function": "app"
11      }
12    ]
13  },
14  "database": {
15    "rules": "database.rules.json"
16  }
17}

1{
2  "name": "functions",
3  "description": "Cloud Functions for Firebase",
4  "dependencies": {
5    "express": "^4.15.3", << เราจะจัดการกับ HTTP Request
6    "firebase": "^4.1.1",
7    "firebase-admin": "~4.2.1",
8    "firebase-functions": "^0.5.7",
9    "react": "^15.5.4", << และ Render React ทางฝั่ง Server
10    "react-dom": "^15.5.4",
11    "request": "^2.81.0"
12  },
13  "private": true
14}

1const firebase = global.firebase || require('firebase')
2
3// ส่วนนี้ใช้ init app ของเรา
4// จดๆไว้ก่อนว่าอยู่ในไฟล์นี้ เดียวเราจะมาเรียกใช้ภายหลัง
5function initializeApp(config) {
6  if (firebase.apps.length === 0) firebase.initializeApp(config)
7}
8
9// ดูดหนังสือทั้งกะบิออกมาจากฐานข้อมูล
10function getBooks() {
11  return firebase
12    .database()
13    .ref('/books')
14    .orderByChild('title')
15    .once('value')
16    .then((snapshot) => {
17      return { books: snapshot.val() }
18    })
19}
20
21// สนใจข้อมูลหนังสือแค่เล่มที่ ID ตรง
22function getBookById(id) {
23  return firebase
24    .database()
25    .ref(`/books/${id}`)
26    .orderByChild('title')
27    .once('value')
28    .then((snapshot) => {
29      return { currentBook: snapshot.val() }
30    })
31}
32
33// Export ออกไปให้เรียกใช้ได้ แม้อยู่ไกลยันดาวพลูโต
34module.exports = {
35  initializeApp,
36  getBooks,
37  getBookById,
38}

1{
2  "name": "react-ssr",
3  "version": "1.0.0",
4  "main": "index.js",
5  "license": "MIT",
6  "scripts": {
7    "build:client": "webpack --config ./webpack.client.js",
8    "build:server": "webpack --config ./webpack.server.js",
9    "build": "npm-run-all --parallel build:client build:server"
10  },
11  "dependencies": {
12    "firebase": "^4.1.1",
13    "react": "^15.5.4",
14    "react-dom": "^15.5.4",
15    "react-router": "^4.1.1",
16    "react-router-dom": "^4.1.1"
17  },
18  "devDependencies": {
19    "babel-core": "^6.24.1",
20    "babel-loader": "^7.0.0",
21    "babel-plugin-transform-class-properties": "^6.24.1",
22    "babel-plugin-transform-object-rest-spread": "^6.23.0",
23    "babel-preset-env": "^1.5.1",
24    "babel-preset-react": "^6.24.1",
25    "npm-run-all": "^4.0.2",
26    "webpack": "^2.6.1"
27  },
28  "babel": {
29    "presets": [
30      [
31        "env",
32        {
33          "targets": {
34            "browsers": ["last 2 versions"]
35          },
36          "modules": false
37        }
38      ],
39      "react"
40    ],
41    "plugins": ["transform-object-rest-spread", "transform-class-properties"]
42  }
43}

1const path = require('path')
2const webpack = require('webpack')
3
4module.exports = {
5  resolve: {
6    extensions: ['.js'],
7    alias: {
8      // จดๆๆ ต่อไปนี้ถ้าเราบอกว่า `firebase-database` นั่นหมายถึงเรากล่าวถึง firebase-database.js
9      'firebase-database': path.resolve(
10        __dirname,
11        '../functions/firebase-database'
12      ),
13    },
14  },
15  module: {
16    rules: [
17      {
18        test: /\.(js|jsx)$/,
19        exclude: /node_modules/,
20        loader: 'babel-loader',
21      },
22    ],
23  },
24  plugins: [
25    new webpack.DefinePlugin({
26      'process.env': {
27        NODE_ENV: JSON.stringify('production'),
28      },
29    }),
30  ],
31}

1const commonConfig = require('./webpack.common')
2const path = require('path')
3
4module.exports = Object.assign(
5  {},
6  {
7    // Entry เริ่มที่ Client.js จดๆๆไว้ก่อน
8    entry: './containers/Client.js',
9    output: {
10      // ผลลัพธืจากการ build จะอยู่ที่ public/assets/client.bundle.js
11      // ที่ต้องอยู่ใต้ public เพราะเราจะให้เข้าถึงได้จาก browser นั่นเอง
12      filename: 'client.bundle.js',
13      path: path.resolve(__dirname, '../public/assets'),
14    },
15  },
16  commonConfig
17)

1const commonConfig = require('./webpack.common')
2const path = require('path')
3
4module.exports = Object.assign(
5  {},
6  {
7    // เราต้องการนำไปใช้กับ node (cloud funtions)
8    target: 'node',
9    // Entry เริ่มที่ Server.js อันนี้ก็จดๆๆไว้ก่อน
10    entry: './containers/Server.js',
11    output: {
12      filename: 'server.bundle.js',
13      path: path.resolve(__dirname, '../functions/build'),
14      // ซึ่งถ้าเป็น commonjs ทั่วไปจะเป็น export.<xxx>
15      // แต่เราต้องการใช้กับ Node ที่มีลักษณะการใช้ module เป็น module.exports
16      // เราจึงใช้ commonjs2
17      // ไม่เข้าใจผ่านได้ครับ ตำรวจไม่จับ
18      libraryTarget: 'commonjs2',
19    },
20  },
21  commonConfig
22)

1src
2  - components
3    - Book.js << แสดงผลหนังสือ 1 เล่ม
4    - Books.js << แสดงรายการหนังสือทุกเล่ม
5    - index.js
6  - containers
7    - App.js
8    - Client.js << สำหรับ Client
9    - Server.js << สำหรับ Server

1import React, { Component } from 'react'
2import { Switch, Route } from 'react-router'
3import { Link } from 'react-router-dom'
4import { Books, Book } from '../components'
5// จำ alias ในคอนฟิคของ Webpack ได้ไหมเอ่ย
6import database from 'firebase-database'
7
8export default class extends Component {
9  constructor(props) {
10    super(props)
11
12    this.state = { books: {}, currentBook: {}, ...props.state }
13  }
14
15  loadBookById = (id) => {
16    database
17      .getBookById(id)
18      .then(({ currentBook }) => this.setState({ currentBook }))
19  }
20
21  loadBooks = () => {
22    database.getBooks().then(({ books }) => this.setState({ books }))
23  }
24
25  render() {
26    const { books, currentBook } = this.state
27
28    return (
29      <div>
30        <nav className="navbar navbar-light bg-faded mb-3">
31          <div className="container">
32            <div className="navbar-header">
33              <Link to="/books" className="navbar-brand">
34                Books
35              </Link>
36            </div>
37          </div>
38        </nav>
39        <Switch>
40          <Route
41            path="/books/:id"
42            render={(props) => (
43              <Book
44                {...props}
45                book={currentBook}
46                loadBookById={this.loadBookById}
47              />
48            )}
49          />
50          <Route
51            path="/books"
52            render={(props) => (
53              <Books
54                {...props}
55                key="books"
56                books={books}
57                loadBooks={this.loadBooks}
58              />
59            )}
60          />
61        </Switch>
62      </div>
63    )
64  }
65}

1import React, { Component } from 'react'
2import { Link } from 'react-router-dom'
3
4export default class extends Component {
5  componentDidMount() {
6    const { books, loadBooks } = this.props
7
8    if (Object.keys(books).length === 0) loadBooks()
9  }
10
11  render() {
12    const { books } = this.props
13
14    return (
15      <div className="container">
16        <ul className="list-group">
17          {Object.keys(books).map((slug) => {
18            const book = books[slug]
19
20            return (
21              <li key={slug} className="list-group-item">
22                <Link to={`/books/${book.id}`}>{book.title}</Link>
23              </li>
24            )
25          })}
26        </ul>
27      </div>
28    )
29  }
30}

1import React, { Component } from 'react'
2
3export default class extends Component {
4  componentDidMount() {
5    const {
6      book,
7      loadBookById,
8      match: { params },
9    } = this.props
10
11    if (Object.keys(book).length === 0) {
12      loadBookById(params.id)
13    }
14  }
15
16  componentWillReceiveProps(nextProps) {
17    const nextId = nextProps.match.params.id
18
19    if (nextId !== this.props.match.params.id) {
20      this.props.loadBookById(nextId)
21    }
22  }
23
24  render() {
25    const { title, desc } = this.props.book
26
27    return (
28      <div className="container">
29        <table className="table table-striped details-table">
30          <tbody>
31            <tr>
32              <td className="title">Title: </td>
33              <td>{title}</td>
34            </tr>
35            <tr>
36              <td className="title">Desc: </td>
37              <td>{desc}</td>
38            </tr>
39          </tbody>
40        </table>
41      </div>
42    )
43  }
44}

1export { default as Books } from './Books'
2export { default as Book } from './Book'

1import React from 'react'
2import ReactDOM from 'react-dom'
3import { BrowserRouter as Router } from 'react-router-dom'
4import App from './App'
5
6ReactDOM.render(
7  <Router>
8    <App state={window.__initialState} />
9  </Router>,
10  document.getElementById('root')
11)

1const template = function (opts) {
2  return `
3  <!DOCTYLE html>
4  <html>
5    <head>
6      <title>Books</title>
7      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
8    </head>
9    <body>
10      <div id="root">${opts.body}</div>
11    </body>
12    <script>
13      <!-- ดูกันไปยาวๆ~ ว่าเราจะเอา state มาเซ็ตได้ยังไง -->
14      window.__initialState = ${opts.initialState}
15    </script>
16    <!-- ภายใต้ Firebase เราสามารถอ้างอิงถึง lib เหล่านี้ได้ *สังเกตจะมี /__/ ขึ้นก่อน -->
17    <script src="/__/firebase/4.1.1/firebase-app.js"></script>
18    <script src="/__/firebase/4.1.1/firebase-database.js"></script>
19    <script src="/__/firebase/init.js"></script>
20    <!-- เรา build ได้ client.bundle.js ก็เอามาใส่ไว้ตรงนี้ โค้ดของเราจะได้ทำงานบน client ได้ -->
21    <!-- มีเพียง request แรกที่มาหา server เท่านั้นที่เราจะทำ SSR -->
22    <!-- หลังจากนั้นจะไม่ทำละ ผลักภาระให้ JavaScript ดำเนินการกับแอพต่อเอง เราจึงต้องมีไฟล์นี้ -->
23    <script src='/assets/client.bundle.js'></script>
24  </html>
25  `
26}
27
28module.exports = template

1const functions = require('firebase-functions')
2const firebase = require('firebase')
3const app = require('express')()
4const React = require('react')
5const ReactDOMServer = require('react-dom/server')
6
7// ความลับที่ทำให้เราปลุก Server.js มารับ state ไปแสดงผลได้
8const ServerApp = React.createFactory(
9  require('./build/server.bundle.js').default
10)
11const template = require('./template')
12
13// จะเห็นได้ว่าในแอพพลิเคชันของเรา ไม่ต้องมีการกำหนด config ของ Firebase เลย
14// เราสามารถเข้าถึง config ได้ผ่าน Cound Functions ได้โดยตรง
15// ทำไมหนะหรอ? ก็บริการนี้มันอยู่ฝั่ง Server อยู่แล้วไงละ มันจึงรู้ config ของตัวมันเองอยู่แล้ว
16const appConfig = functions.config().firebase
17const database = require('./firebase-database')
18database.initializeApp(appConfig)
19
20function renderApplication(url, res, initialState) {
21  const html = ReactDOMServer.renderToString(
22    // ด้วยการโยน initialState เข้าไปเป็น state ของแอพพลิเคชัน
23    ServerApp({ url: url, context: {}, initialState, appConfig })
24  )
25
26  // แล้วจึงจัดการสร้าง HTML ตาม template ที่ได้เตรียมไว้
27  const templatedHtml = template({
28    body: html,
29    initialState: JSON.stringify(initialState),
30  })
31
32  res.send(templatedHtml)
33}
34
35app.get('/favicon.ico', function (req, res) {
36  res.send(204)
37})
38
39// จัดการ Route ที่มี path เป็น /books หรือ /books/:id
40app.get('/books/:bookId?', (req, res) => {
41  res.set('Cache-Control', 'public, max-age=60, s-maxage=180')
42
43  if (req.params.bookId) {
44    database.getBookById(req.params.bookId).then((resp) => {
45      renderApplication(req.url, res, resp)
46    })
47  } else {
48    database.getBooks().then((resp) => {
49      renderApplication(req.url, res, resp)
50    })
51  }
52})
53
54// ใช้ Cloud Functions เพื่อคุม Request ที่เข้ามา
55exports.app = functions.https.onRequest(app)

1import React, { Component } from 'react'
2import ReactDOM from 'react-dom'
3import { StaticRouter as Router } from 'react-router'
4import App from './App'
5import database from 'firebase-database'
6
7export default class extends Component {
8  constructor(props) {
9    super(props)
10    // รับมาจาก functions/index.js ไง
11    database.initializeApp(props.appConfig)
12  }
13
14  render() {
15    const { url, context, initialState } = this.props
16
17    return (
18      <Router location={url} context={context}>
19        <App state={initialState} />
20      </Router>
21    )
22  }
23}

1cd src
2yarn run build
3cd ..
4firebase deploy