文章

Meteor + ReactJS 學習筆記（四）部署至 Heroku

/在： /通過：

如果 Web 應用是要在 Internet 存取的，或是這個應用是要 24 小時存取但是你並不想要維護一台機器，也不想要擔心資安及防火牆的問題。當然你可以選擇到 AWS、Azure、Google上租個主機，然後架設 Meteor，但是這樣花費的成本是比較高的，最快且節省成本的方式是直接使用 PaaS (Platform As A Service) 服務。各大雲端廠商都有 PaaS，比較知名的有 Google App Engine、AWS、IBM Cloud (從前叫做 Bluemix)、Microsoft Azure、RedHat OpenShift。本篇採用的是2011年被Salesforce 所併購的老牌 PaaS 平台 Heroku 來做說明如何將Meteor專案 部署至Heroku

Step 1: 安裝 Heroku CLI (Command Line Interface)

Mac 使用者可使用以下指令安裝

brew tap heroku/brew && brew install heroku

Windows 使用者可點選下面連結下載安裝檔
The Heroku CLI Windows Installer

Step 2: 建立一個 Meteor + ReactJS project

可參考上一篇說明。請自行選擇一個專案名，不要跟 meteor-heroku-demo 重複

meteor create --react meteor-heroku-demo

cd meteor-heroku-demo

Step 3: 將專案目錄進行 git 儲存庫的初始化 

git init

git add .

git commit -m "My first commit!"

Step 4: 建立 Heroku instance 

heroku login

heroku apps:create <你的專案名>

Step 5: 指定使用 Meteor Buildpack

在 Heroku 上面，執行不同程式語言的專案，有不同的 Buildpack，Buildpack 是用來將建置專案會使用到的相關資源及 Scripts 轉換成 slug，slug 是執行在 Heroku 和行 dyno 之上，裡面包含專案的 source code、相依的模組及資源、特定程式語言的 run time。
以下指令是執定 heroku 使用 admithub/meteor-horse 這個 buildpack，而 admithub/meteor-horse 是由 AdmitHub 所開發，用來生成 meteor 專案的 buildpack

heroku buildpacks:set admithub/meteor-horse

Step 6: 建立 MongoDB

Meteor 的 Server 端是使用 MongoDB，所以必須也在 Heroku 上設定好 Mongo 的環境，Heroku上提供 500MB 免費的 MongoDB ，可透過以下指令設定

heroku addons:create mongolab

或是使用以下指令設定你自己的 MongoDB

heroku config:add MONGO_URL=<your mongodb URL>

Step 7: 設定你的 Meteor app 執行在 Heroku 上 

heroku config:add ROOT_URL=https://<你的專案名>.herokuapp.com

Step 8: 確認 heroku 指令是沒問題的 

git remote -v

//應該會出現以下回覆

heroku https://git.heroku.com/meteor-heroku-demo.git (fetch)

heroku https://git.heroku.com/meteor-heroku-demo.git (push)

Step 9: 部署至Heroku 

git push heroku master

當出現類似以下畫面，代表建置完成

Step 10: 使用瀏覽器確認 App 是否執行

使用瀏覽器打開 https://<你的專案名>.herokuapp.com

Meteor + ReactJS 學習筆記（三）使用 Salesforce Lightning Design System

/在： , /通過：

除了上一篇 Meteor + ReactJS 學習筆記（二）使用 Semantic UI 所介紹的 Semantic UI，也可以選擇 Salesforce 所開發的 Salesforce Lightning Design System   來作為 ReactJS Web 應用中的 UI 元件。要讓 Meteor + ReactJS 搭配使用 Lighting Design System 有兩種方法，一種是直接使用官方的 design-system-react ，另一個方法是使用 Propertybase 這家公司基於官方的 Salesforce Lighting Design System  所開發的   React LDS 。

使用官方 Salesforce Lightning Design System for React

Step 1: 建立一個 Meteor + ReactJS project

meteor create --react meteor-slds-demo

cd meteor-slds-demo

Step 2: 安裝 Salesforce Lightning Design System for React 

meteor npm install --save @salesforce-ux/design-system @salesforce/design-system-react

Step 3: 複製 CSS 檔

cp node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css client/

Step 4: 複製 Lightning Design System 所需要的圖示及字型檔

mkdir public

cp -r node_modules/@salesforce-ux/design-system/assets/icons public/

cp -r node_modules/@salesforce-ux/design-system/assets/fonts public/

Step 5: 使用方式範例

必須在 client/main.jsx 中引入 salesforce-lightning-design-system.min.css
於 client/main.jsx 一開頭，加入以下程式碼

client/main.jsx
import "./salesforce-lightning-design-system.min.css";

可使用元件及範例可參考官方網站的說明文件
以下是使用 Icon Button 的範例

imports/ui/App.jsx
import React from "react";

import { Button, IconSettings } from "@salesforce/design-system-react";

const App = () => (

  <div>

    <IconSettings iconPath="/icons">

      <Button

        iconCategory="utility"

        iconName="download"

        iconPosition="left"

        label="Click Me"

      />

    </IconSettings>

  </div>

);

export default App;

Step 6: 啟動 meteor 專案

meteor

於瀏覽器瀏覽 http://localhost:3000 會得到以下使用 Button UI 的畫面

使用 Propertybase React Lightning Design System

Step 1: 建立一個 Meteor + ReactJS project

meteor create --react meteor-plds-demo

cd meteor-plds-demo

Propertybase React Lightning Design System 跑在 Meteor 1.8.1 之前的版本會有些問題，所以需要把 Meteor 升級到至少 1.8.2 版，升級的指令如下（目前(2019/09) 1.8.2 還只有 beta 版)

meteor update --release 1.8.2-beta.16

Step 2: 安裝相關模組 

meteor npm install --save react-dom moment moment-timezone moment-range

meteor npm install --save react-lds

Step 3: 複製 CSS 檔

cp node_modules/react-lds/react-lds/assets/styles/salesforce-lightning-design-system.min.css client/

Step 4: 複製 Lightning Design System 所需要的圖示及字型檔

mkdir public

cp -r node_modules/react-lds/react-lds/assets/icons public/

cp -r node_modules/react-lds/react-lds/assets/fonts public/

Step 5: 使用方式範例

必須在 client/main.jsx 中引入 salesforce-lightning-design-system.min.css
於 client/main.jsx 一開頭，加入以下程式碼

client/main.jsx
import "./salesforce-lightning-design-system.min.css";

可使用元件及範例可參考官方網站的說明文件
以下是使用 Icon Button 的範例

imports/ui/App.jsx
import React from "react";

import { Button, Badge } from "react-lds";

import AssetPathProvider from "./AssetPathProvider.jsx";

const App = () => (

  <div>

    <h1>Welcome to Meteor!</h1>

    <AssetPathProvider>

      <Button icon="download" sprite="utility" title="Hover Me">

        Click Me

      </Button>

      <Badge theme="warning">1234</Badge>

    </AssetPathProvider>

  </div>

);

export default App;

imports/ui/AssetPathProvider.jsx
import { Component } from "react";

import React from "react";

import PropTypes from "prop-types";

class AssetPathProvider extends Component {

  getChildContext() {

    return {

      assetBasePath: "assets/"

    };

  }

  render() {

    const { children } = this.props;

    return <div>{children}</div>;

  }

}

AssetPathProvider.propTypes = {

  children: PropTypes.node.isRequired

};

AssetPathProvider.childContextTypes = {

  assetBasePath: PropTypes.string

};

export default AssetPathProvider;

Step 6: 啟動 meteor 專案

meteor

於瀏覽器瀏覽 http://localhost:3000 會得到以下使用 Button UI 的畫面