reactjs 彙整 - Cory Ma's Blog!

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

2019-09-01/在： IT /通過： Cory Ma

如果 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

2019-08-01/在： IT, Technical /通過： Cory Ma

除了上一篇 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 的畫面

Meteor + ReactJS 學習筆記（二）使用 Semantic UI

2019-05-30/在： IT, Technical /通過： Cory Ma

上一篇文章是說明怎麼建立一個基本的 Meteor 專案。本篇文章，的目的是紀錄如何在一個 Meteor+ ReactJS 專案中，使用 Semantic UI來建置 UI 元件

Step 1: 建立一個 Meteor project，前端使用 ReactJS

自 Meteor 1.8.0.2 版開始，meteor 中建立專案的指令 meteor create 新增了一個參數 –react，可以讓開發者很容易的就建立一個前端使用ReactJS 的 Meteor 專案
使用以下指令建立名為 meteor-react-hello 的 Meteor 專案

meteor create --react meteor-react-hello

cd meteor-react-hello

Step 2: 安裝 Semantic UI

一個好的 Web 應用，使用者第一眼看到的介面是很重要的，用傳統 HTML做出來的表單、按鈕、對話框…不免讓人覺得網站很老舊的感覺，所以建議還是去找尋比較好的 UI Framework 來使用。UI Framework的選擇很多，如果懶得自己去找，建議可以使用 Semantic UI

從 Atmosphere 安裝 Semantic UI

meteor add semantic:ui

移除 standard-minifier-css

meteor remove standard-minifier-css

安裝 less 與 juliancwirko:postcss

meteor add less juliancwirko:postcss

安裝 Semantic UI for React 及 postcss-load-config

meteor npm install --save semantic-ui-react postcss-load-config posts

修改 package.json，將 postcss 設定加入 package.json

打開 package.json，加入以下 json code

"devDependencies": {"autoprefixer": "^6.3.1"},"postcss": {

    "plugins": {

      "autoprefixer": {

        "browsers": ["last 2 versions"]

      }

    }

  }

安裝 autoprefixer NPM package

meteor npm install

建立一個空的 custom.semantic.json 檔

custom.semantic.json 使 Semantic UI 的設定檔，用來設定需要載入哪些 UI 元件，原則上就是要使用的元件設為 true，不使用的設為 false。完整的 custom.semantic.json 範例可參考 https://github.com/SilentCicero/meteor-dapp-builder/blob/master/.custom.semantic.json

輸入以下指令，建立一個空的 custom.semantic.json 檔

mkdir -p ./client/lib/semantic-ui

touch ./client/lib/semantic-ui/custom.semantic.json

打開 custom.semantic.json，複製貼上以下的 json code

{

  "definitions": {

    "site": true,

    "container": true,

    "button": true,

    "segment": true,

    "form": true,

    "grid": true,

    "header": true,

    "image": true,

    "message": true,

    "flag": true

  },

  "themes": {

    "basic": true,

    "default": true

  }

}

Step 3:啟動 meteor project

輸入以下指令，啟動 meteor 專案

meteor

Step 4:使用瀏覽器打開 Web 應用

使用以下網址打開 Web 應用
http://localhost:3000

你會看到如下圖畫面。這時候 Click Me 按鈕還是用預設的 HTML button，我們必須在程式碼中加入我們要使用的 Semantic UI Button

Step 6: 修改 Hello.jsx

Hello.jsx 的位址在 imports/ui/Hello.jsx

打開 Hello.jsx，在程式的最上方加入以下程式碼，引入 Button 模塊

import { Button } from 'semantic-ui-react'

將程式中原本

<button onClick={() => this.increment()}>Click Me</button>

將 button 改為 Button

<Button onClick={() => this.increment()}>Click Me</Button>

再次瀏覽 http://localhost:3000 ，按鈕已換成 Semantic UI Button 了

文章

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

Step 2: 建立一個 Meteor + ReactJS project

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

Step 4: 建立 Heroku instance

Step 5: 指定使用 Meteor Buildpack

Step 6: 建立 MongoDB

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

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

Step 9: 部署至Heroku

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

使用官方 Salesforce Lightning Design System for React

Step 1: 建立一個 Meteor + ReactJS project

Step 2: 安裝 Salesforce Lightning Design System for React

Step 3: 複製 CSS 檔

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

Step 5: 使用方式範例

client/main.jsx

imports/ui/App.jsx

Step 6: 啟動 meteor 專案

使用 Propertybase React Lightning Design System

Step 1: 建立一個 Meteor + ReactJS project

Step 2: 安裝相關模組

Step 3: 複製 CSS 檔

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

Step 5: 使用方式範例

client/main.jsx

imports/ui/App.jsx

imports/ui/AssetPathProvider.jsx

Step 6: 啟動 meteor 專案

Step 1: 建立一個 Meteor project，前端使用 ReactJS

Step 2: 安裝 Semantic UI

從 Atmosphere 安裝 Semantic UI

移除 standard-minifier-css

安裝 less 與 juliancwirko:postcss

安裝 Semantic UI for React 及 postcss-load-config

修改 package.json，將 postcss 設定加入 package.json

安裝 autoprefixer NPM package

建立一個空的 custom.semantic.json 檔

Step 3:啟動 meteor project

Step 4:使用瀏覽器打開 Web 應用

Step 6: 修改 Hello.jsx

彙整

分類

標籤

Step 6: 修改 Hello.jsx