by James Y Rauhut

詹姆士·魯豪(James Y Rauhut)

如何使用Create React App DevOps自動化工作中所有無聊的部分 (How I automate all of the boring parts of my job with Create React App DevOps)

When you have responsibilities as one of the only designers — and possibly developer s— on your team, automation becomes your best friend.

當您作為團隊中僅有的設計師(甚至是開發人員)之一負責時，自動化將成為您最好的朋友。

At work, I have both responsibilities as a designer and sometimes as a lone developer. This means that there is not much time to configure the dev environment I am working on. Time is also wasted when I have to manually update the apps to their online environment.

在工作中，我既擔負設計師的職責，有時也承擔著獨自開發的職責。這意味著沒有太多時間來配置我正在開發的開發環境。當我不得不手動將應用程序更新到其在線環境時，也浪費了時間。

Thankfully, there are free tools that help us prototype and release in no time: Create React App, Bluemix, GitHub, and Travis CI. I’m going to share with you how I use all of these to automate all of the boring parts of my job with Create React App DevOps.

值得慶幸的是，有免費的工具可以幫助我們立即進行原型設計和發布：創建React App，Bluemix，GitHub和Travis CI。我將與您分享如何使用所有這些通過Create React App DevOps自動執行工作中所有無聊的部分。

Update March 3rd, 2017: Thanks to a heads up from a commenter, I was warned not to use Babel-Node in production (on Bluemix). Create React App DevOps now reflects that with v1.1.0!
2017年3月3日更新：感謝評論者的注意，警告我不要在生產中使用Babel-Node(在Bluemix上)。現在，使用v1.1.0可以創建React App DevOps ！

There are three ways you can adapt this process yourself:

您可以通過三種方式自己調整此過程：

Follow along with this post as we write the project together
在我們一起編寫項目時，跟隨這篇文章
Inspect the comparison between the initial Create React App use and the final commit: Github Comparison Between First and Last Commit
檢查最初的Create React App使用和最終提交之間的比較： Github第一次提交和最后一次提交之間的比較
Fork the repo and follow the instructions below: Fork Create React App DevOps
分叉倉庫，并按照以下說明進行操作：分叉創建React App DevOps

Check out the app live at: https://create-react-app-devops.mybluemix.net/

通過以下網址實時查看該應用程序：https ：//create-react-app-devops.mybluemix.net/

If you want to know the guts of the project, then continue reading to make it with me! There will be six sections:

如果您想了解該項目的精髓，請繼續閱讀以與我合作！將分為六個部分：

Use Create React App to Get the UI Up
使用Create React App來建立UI
Setup Your Server with Node, Express, and Babel
使用Node，Express和Babel設置服務器
Run the App on the Web with Bluemix
使用Bluemix在Web上運行應用程序
Automagically Deploy from Github with Travis CI
使用Travis CI從Github自動部署
Fetch API Data While Keeping Keys Secure
在保持密鑰安全的同時獲取API數據
Create a Staging App for Experimentation
創建暫存應用進行實驗

使用Create React App來建立UI (Use Create React App to Get the UI Up)

When I first started using React for front-end projects, I wasted a lot of time. A lot of that time was configuring Webpack and various plug-ins. Thankfully, Create React App was created to keep your projects configured properly. There is an option to “eject” your Create React App projects, but I avoid ejecting. That is so that I can continue receiving Facebook’s updates to the project.

當我第一次開始將React用于前端項目時，我浪費了很多時間。大部分時間是配置Webpack和各種插件。幸運的是，創建React應用程序是為了保持您的項目正確配置。有一個選項可以“彈出”您的Create React App項目，但是我避免彈出。這樣一來，我就可以繼續接收Facebook對項目的更新。

Install Node to manage the packages we use and server.
安裝Node來管理我們使用的軟件包和服務器。
Install Yarn (optional) to speed up the installation of packages. If you choose not to, just keep in mind that terminal commands like yarn run --- are usually npm run ---.
安裝紗線 (可選)以加快軟件包的安裝。如果您選擇不這樣做，則請記住，諸如yarn run ---類的終端命令通常是npm run --- 。
It is time to open up your terminal. Install Create React App globally: yarn global add create-react-app
現在是時候打開您的終端了。全局安裝Create React App： yarn global add create-react-app
Now let Create React App make your project or you and navigate into it: create-react-app <app-name>; and cd <app-name>
現在，讓Create React App創建您的項目或進入您的項目： create-react-app <app-na me> ; and cd < ; and cd <應用程序名稱>

Side Note: Anytime you see “<app-name>” in this write-up, you can replace it with a unique name for your project like “super-cool-app”.

旁注：只要在本文中看到“ <app-name>”，就可以用項目的唯一名稱替換它，例如“ super-cool-app”。

?????? (?????)

You can now work on all of the client-side (user interface) code! Run yarn start and Create React App will open a tab in your browser to show you the UI. Anytime you edit the client-side code in the <app-name>;/src/, the browser will refresh with the changes!?????

現在，您可以處理所有客戶端(用戶界面)代碼！運行yarn start ，Create React App將在瀏覽器中打開一個標簽，向您顯示UI。每當您在<app-name> ; / src /中編輯客戶端代碼時，瀏覽器都會刷新所做的更改！

使用Node，Express和Babel設置服務器 (Setup Your Server with Node, Express, and Babel)

Now let’s get a server running so that you can host the app online. Controlling your own Node server will also be important later to fetch data with an API from services like Github.

現在，讓服務器運行，以便您可以在線托管應用程序。稍后，控制自己的Node服務器對于從Github之類的服務中使用API??獲取數據也很重要。

Let’s add all of the packages for a Node server. The Babel related packages will allow you to use the latest Javascript functionality: yarn add babel-cli babel-preset-es2015 babel-preset-stage-2 compression express
讓我們為節點服務器添加所有軟件包。與Babel相關的軟件包將允許您使用最新的Javascript功能： yarn add babel-cli babel-preset-es2015 babel-preset-stage-2 compression express
Now make an index.js file in the root of the project folder to represent our Node server:
現在，在項目文件夾的根目錄中創建一個index.js文件，以表示我們的節點服務器：

import compression from 'compression';import express from 'express'; const app = express();const port = process.env.PORT || 8080;app.use(compression()); app.use(express.static('./build')); app.listen(port, (err) => { if (err) {   console.log(err);   return; }

console.log(`Server is live at http://localhost:${port}`);});

3. You can now see all of the dependencies we installed in package.json. Let’s add a script called “bluemix” to run the server and section called “babel” to configure Babel:

3.現在，您可以看到我們在package.json安裝的所有依賴項。讓我們添加一個名為“ bluemix”的腳本來運行服務器，并添加一個名為“ babel”的部分來配置Babel：

"scripts": {  "bluemix": "babel-node index.js",  "start": "react-scripts start",  "build": "react-scripts build",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject",},"babel": {  "presets": [    "es2015",    "stage-2"  ]}

4. yarn build && yarn bluemix will build the app and run the server. However, we want to add a dev mode to the server similar to our client-side code. This way we see changes from just saving index.js when we are coding. Let’s add some dependencies that will let us do this: yarn add babel-watch concurrently --dev

4. yarn build && yarn bluemix將構建應用程序并運行服務器。但是，我們希望向服務器添加類似于客戶端代碼的開發模式。通過這種方式，我們看到了在編碼時僅保存index.js變化。讓我們添加一些依賴關系，讓我們做到這一點： yarn add babel-watch concurrently --dev

5. Now update the “start” script in package.json so that we run Create React App’s dev mode and our server. We will also add a “proxy” line. This line tells Create React App that a server can take requests that are not found in the client-side code:

5.現在更新package.json中的“ start”腳本，以便我們運行Create React App的dev模式和我們的服務器。我們還將添加“代理”行。此行告訴Create React App服務器可以接受客戶端代碼中未找到的請求：

"proxy": "http://localhost:8081","scripts": {  "bluemix": "babel-node index.js",  "start": "concurrently \"PORT=8080 react-scripts start\" \"PORT=8081 babel-watch index.js\"",  "build": "react-scripts build",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject",},

?????? (?????)

You can now work on the server-side code in index.js! Run yarn start and both the Create React App dev mode and our server will respond to changes saved!?????

您現在可以在index.js的服務器端代碼上工作了！運行yarn start和Create React App dev模式，我們的服務器將響應保存的更改！

使用Bluemix在Web上運行應用程序 (Run the App on the Web with Bluemix)

Since I work at IBM, Bluemix is our go-to hosting platform. Not only do we host our final products on Bluemix, but we also host any prototypes to share with peers and user test. I also use Bluemix for personal projects like this one because it has a solid free tier.

自從我在IBM工作以來，Bluemix是我們的首選托管平臺。我們不僅將最終產品托管在Bluemix上，而且還托管任何原型以與同行和用戶測試共享。我還將Bluemix用于這樣的個人項目，因為它具有可靠的免費層。

Create a free account on Bluemix.
在Bluemix上創建一個免費帳戶。
Install the Cloud Foundry CLI. Since Bluemix is built on top of an open-source project called Cloud Foundry, you will see “cf” in a lot of our commands.
安裝Cloud Foundry CLI 。由于Bluemix是建立在一個名為Cloud Foundry的開源項目之上的，因此您會在許多命令中看到“ cf”。
Similar to .gitignore files, we should make a file to prevent unnecessary files from being uploaded to Bluemix. Make .cfignore in the project’s root folder to do this:
與.gitignore文件類似，我們應該制作一個文件，以防止將不必要的文件上傳到Bluemix。在項目的根文件夾.cfignore為執行以下操作：

/node_modules .DS_Store npm-debug.log* yarn-debug.log* yarn-error.log*

4. Now we can tell Bluemix all of our app’s settings for the deploy with a manifest.yml file in the root of the project:

4.現在，我們可以在項目根目錄中使用manifest.yml文件來告訴Bluemix我們所有應用程序的設置設置：

---applications:- name: <app-name>  buildpack: https://github.com/cloudfoundry/nodejs-buildpack  command: npm run bluemix  disk_quota: 256MB  memory: 128MB

5. Finally, login into Bluemix from your terminal with cf login -a https://api.ng.bluemix.net, build your app with yarn build, and then push your app into the world with cf push.

5.最后，使用cf login -a https://api.ng.bluemix.net從您的終端登錄Bluemix，使用yarn build構建您的應用程序，然后使用cf push將您的應用程序推向世界。

?????? (?????)

After about five minutes, your terminal should say the app is live at <app-name>.mybluemix.net! Now the world can see it. A common error is that your app name has already been taken on Bluemix. Simply choose a more unique name and it should work!?????

大約五分鐘后，您的終端應顯示該應用程序已在<app-name> .mybluemix.net上運行！現在世界可以看到它。一個常見的錯誤是您的應用程序名稱已在Bluemix上獲取。只需選擇一個更獨特的名稱，它就可以工作！

使用Travis CI從Github自動部署 (Automagically Deploy from Github with Travis CI)

One of the most tedious parts of managing an app is deploying it every time you have changes ready. I would even get lazy and batch my deploys whenever I finally felt like doing it. Thanks to Travis CI (Continuous Integration), deploying can become as simple as managing your Github repo.

每次準備好進行更改時，管理應用程序中最繁瑣的工作之一就是對其進行部署。每當我最終想做的時候，我什至會變得懶惰并批處理我的部署。借助Travis CI(持續集成)，部署可以像管理Github倉庫一樣簡單。

First, you need to make a Github account and set up the Git on your computer.
首先，您需要注冊一個Github帳戶并在計算機上設置Git 。
Next, create a new repo on Github.com and then follow the terminal instructions provided to push your project to Github:
接下來，在Github.com上創建一個新的倉庫，然后按照提供的終端說明將項目推送到Github：

git initgit add .git commit -m 'Initial commit'git remote add origin https://github.com/<github-username/<app-name>.gitgit push -u origin master

3. Now head over to Travis CI to login with your Github credentials. Hit the “+” icon to activate your new repo. If you do not see the repo you just created, click “Sync account” and then it should show up.

3.現在轉到Travis CI ，使用您的Github憑據登錄。點擊“ +”圖標激活您的新倉庫。如果沒有看到您剛剛創建的存儲庫，請單擊“同步帳戶”，然后它將顯示。

4. Then click on the project’s settings in Travis to choose the following options:

4.然后在Travis中單擊項目的設置以選擇以下選項：

Build only if .travis.yml is present = OnBuild pushes = OnLimit concurrent jobs = OffBuild pull requests = On (This will allow Github to still run any automated tests you add in the future for opened PRs.)Environment Variables: BLUEMIX_PASSWORD = <Your-bluemix-password>

僅當存在.travis.yml時才進行構建= OnBuild推送= OnLimit并發作業= OffBuild拉取請求= On(這將使Github仍可以運行您將來為打開的PR添加的任何自動化測試。)環境變量： BLUEMIX_PASSWORD = <Your-bluemix-passwo rd>

5. The biggest step here is adding the blueprint for Travis as a .travis.yml file in the project’s root:

5.這里最大的步驟是將Travis的藍圖作為.travis.yml文件添加到項目根目錄中：

sudo: truelanguage: node_jsnode_js:- '5.7'cache:  yarn: true  directories:    - node_modulesenv:  global:  - CF_API=https://api.ng.bluemix.net/  - CF_USERNAME=<Your-bluemix-email>  - CF_ORG=<Your-bluemix-email>  - CF_SPACE=devbefore_deploy:  - wget https://s3.amazonaws.com/go-cli/releases/v6.12.4/cf-cli_amd64.deb -qO temp.deb && sudo dpkg -i temp.deb  - rm temp.deb  - cf login -a ${CF_API} -u ${CF_USERNAME} -p ${BLUEMIX_PASSWORD} -o ${CF_ORG} -s ${CF_SPACE}  - cf install-plugin autopilot -r CF-Community  - yarn builddeploy:  - edge: true    provider: script    script: if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then cf zero-downtime-push <My-app> -f ./manifest.yml; else echo "PR skip deploy"; fi    skip_cleanup: true    on:      branch: master

Important: Notice that there two places where you insert your Bluemix email and one place where you insert the name of the app on Bluemix!

重要：請注意，有兩個地方可以插入您的Bluemix電子郵件，一個地方可以在Bluemix上插入應用程序的名稱！

There is a lot going on here. So I will try to summarize it: In the before_deploy section, Travis is building the app, logging into Bluemix as you, and then downloading a Cloud Foundry plugin called Autopilot. Then in the deploy section, Travis decides if the deploy is an open pull request or an actual commit to the Github master branch. If it is an actual commit, run Autopilot to deploy the app.

這里有很多事情。因此，我將嘗試總結一下：在before_deploy部分中，Travis正在構建應用程序，以您的身份登錄到Bluemix，然后下載一個名為Autopilot的Cloud Foundry插件。然后，在“部署”部分中，Travis決定部署是開放拉取請求還是對Github master分支的實際提交。如果是實際提交，請運行Autopilot部署應用程序。

Autopilot practices Blue-Green Deployment. This means that the new version of your app will be given the name <my-app>-venerable on Bluemix. If the new version builds and runs successfully, the old version of the app is deleted and the new version renames itself to the original name. If the deploy fails, <my-app&gt;-venerable stays up so that you can debug the logs and the old version of the app keeps running so your users see zero downtime!

自動駕駛儀實行藍綠色部署。這意味著您的應用程序的新版本將被命名為<my-app>-ven在Bluemix上具有較高的聲譽。如果新版本生成并成功運行，則該應用的舊版本將被刪除，新版本會將其自身重命名為原始名稱。如果部署ails, <my-app&g t; -venerable會保持運行狀態，以便您可以調試日志，并且舊版本的應用程序將繼續運行，從而使用戶看到的停機時間為零！

?????? (?????)

Dope DevOps, Batman! Navigate to https://travis-ci.org/<github-username>/<app-name>/builds and you should see a Travis build about to happen. If you click into it, you can watch it start and follow it deploying for you!?????

Dope DevOps，蝙蝠俠！導航至https://travis-ci.org/<github-username>/<app-nam e> / builds，您應該看到Travis構建即將發生。如果單擊它，您可以觀看它的啟動并為您部署它！

在保持密鑰安全的同時獲取API數據 (Fetch API Data While Keeping Keys Secure)

Most apps use data from different sources to put together their offerring. For an app to get external data, they use an API to fetch the data. For the API to make sure the right app is fetching data, the app is given a key to identify itself. We need to keep this key secret from our Github repo though!

大多數應用程序使用來自不同來源的數據來匯總其報價。為了使應用程序獲取外部數據，他們使用API??來獲取數據。為了使API確保正確的應用程序正在獲取數據，將為該應用程序提供一個用于標識自身的密鑰。不過，我們需要從我們的Github存儲庫中保守這個關鍵秘密！

First, let’s ask the Github API for a key. Under “Select scopes”, we will check public_repo to get your repo information. Click “Generate token” and then you will get a key next to a green checkmark!
首先，讓我們向Github API索要密鑰。在“選擇范圍”下，我們將檢查public_repo以獲取您的回購信息。單擊“生成令牌”，然后您將在綠色復選標記旁邊看到一個密鑰！
It is time to add the key to our project locally as keys.json in the root of our project:
現在是時候在項目根目錄中將key作為keys.json本地添加到我們的項目中了：

{  "github": "<your-github-key>"}

However, we do not want your precious key to be uploaded to your Github repo. So, add this file to your .gitignore file:

但是，我們不希望將您的寶貴密鑰上傳到您的Github存儲庫中。因此，將此文件添加到您的.gitignore文件中：

# misc.DS_Store.envnpm-debug.log*yarn-debug.log*yarn-error.log*keys.json

3. Now that we have your key, we can add a server request. Install Request to your project with yarn add request and then edit your server’s index.js:

3.現在我們有了您的密鑰，我們可以添加服務器請求。使用yarn add request將Request安裝到項目中，然后編輯服務器的index.js ：

import compression from 'compression';import express from 'express';import fs from 'fs';import request from 'request';

const app = express();const port = process.env.PORT || 8080;app.use(compression());

let keys;if (fs.existsSync('./keys.json')) {  keys = require('./keys.json');} else {  keys = JSON.parse(process.env.VCAP_SERVICES)['user-provided'][0].credentials;}

app.get('/github', (req, res) => {  request({    url: `https://api.github.com/user/repos?affiliation=owner,collaborator&access_token=${keys.github}`,    headers: {      'user-agent': 'node.js',    },  }, (err, response, body) => {    if (!err && response.statusCode === 200) {      res.send(body);    }  });});

app.use(express.static('./build'));

app.listen(port, (err) => {  if (err) {    console.log(err);    return;  }  console.log(`Server is live at http://localhost:${port}`);});

You will first notice an if statement checking if we have the local keys.json file. The “else” in that statement will cover when the app is on Bluemix later. We then have an endpoint where pinging http://localhost:8080/github will return your profile’s repos!

您將首先注意到一條if語句，用于檢查我們是否具有本地keys.json文件。該語句中的“其他”將覆蓋應用程序稍后在Bluemix上使用的時間。然后，我們有了一個終結點，在該終結點上ping http://localhost:8080/github將返回您的配置文件的存儲庫！

4. Open up src/App.js to fetch that data to your UI from your server. After these additions, yarn start should show all of your project’s repos listed :

4.打開src/App.js以將數據從服務器獲取到UI中。添加完這些之后， yarn start應該會列出您項目的所有存儲庫：

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';

class App extends Component {

state = {    repos: [],  }

componentDidMount() {    fetch('/github')    .then(response => response.json())    .then((data) => {      const repos = data.map((repo) =>        <p key={repo.id}>{repo.name}</p>      );

this.setState({ repos })    });  }

render() {    return (      <div className="App">        <div className="App-header">          <img src={logo} className="App-logo" alt="logo" />          <h2>Welcome to React</h2>        </div>        <p className="App-intro">          To get started, edit <code>src/App.js&lt;/code> and save to reload.        </p>        <h3>App Creator's Repos:</h3>        {this.state.repos}      </div>    );  }}

export default App;

5. Now that we can use the Github API securely in dev mode, let’s make sure your Bluemix app can also get the API key. We are going to create a user-provided service on Bluemix in the terminal: cf cups keys -p keys.json. Then tell the manifest.json that the app should always bind itself to that service:

5.現在我們可以在開發人員模式下安全地使用Github API，讓我們確保您的Bluemix應用程序也可以獲取API密鑰。我們將在終端上的Bluemix上創建一個用戶提供的服務： cf cups keys -p keys.json 。然后告訴manifest.json應用程序應始終將自身綁定到該服務：

---applications:- name: <app-name>  buildpack: https://github.com/cloudfoundry/nodejs-buildpack  command: npm run bluemix  disk_quota: 256MB  memory: 128MB  services:     - keys

Side Note: If you ever need to update the keys on Bluemix, you can run cf uups keys -p keys.json!

旁注：如果需要更新Bluemix上的鍵，則可以運行cf uups keys -p keys.json ！

?????? (?????)

After Travis updates your Bluemix app, you should see the UI fetching all of your repos live on the web! We did go through a lot of trouble keeping the keys off of github.com. This is because other devs can abuse your API keys if they get a lot of them.?????

Travis更新您的Bluemix應用程序之后，您應該會看到UI實時在網絡上獲取所有存儲庫！在將密鑰保留在github.com上的過程中，我們確實遇到了很多麻煩。這是因為其他開發人員如果得到很多，則會濫用您的API密鑰。

創建暫存應用進行實驗 (Create a Staging App for Experimentation)

Now that our production version of the app has DevOps set up, let’s build a staging app. This will help us share works-in-progress for user testing and peer review!

現在我們的應用程序生產版本已設置DevOps，讓我們構建一個臨時應用程序。這將幫助我們共享正在進行的工作，以進行用戶測試和同行評審！

We need to make a manifest file for Bluemix that specifies our new staging app now. In the root of your project, make a manifest-staging.yml file:
我們需要為Bluemix創建一個清單文件，該清單文件現在指定我們的新暫存應用程序。在項目的根目錄中，創建一個manifest-staging.yml文件：

---applications:- name: <my-app>-staging  buildpack: https://github.com/cloudfoundry/nodejs-buildpack  command: npm run bluemix  disk_quota: 256MB  memory: 128MB  services:     - keys

2. Go ahead and deploy this staging app directly to Bluemix with the new manifest file: cf push -f manifest-staging.yml

2.繼續，使用新的清單文件將這個登臺應用程序直接部署到Bluemix： cf push -f manifest-staging.yml

3. Then we are going to edit the deploy scripts in .travis.yml. We need to change the original deploy script for when we commit to master to update the new staging app. We also need to add a new deploy script for the original production app:

3.然后，我們將在.travis.yml編輯部署腳本。當我們承諾掌握更新新的登臺應用程序時，我們需要更改原始的部署腳本。我們還需要為原始生產應用添加新的部署腳本：

deploy:  - edge: true    provider: script    script: if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then cf zero-downtime-push <my-app>-staging -f ./manifest-staging.yml; else echo "PR skip deploy"; fi    skip_cleanup: true    on:      branch: master  - edge: true    provider: script    script: if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then cf zero-downtime-push <my-app> -f ./manifest.yml; else echo "PR skip deploy"; fi    skip_cleanup: true    on:      tags: true

So now that we update the staging app by committing to the Github master branch, how do we update the production app? You will use Github’s Releases functionality as if your app is a real offerring. ?

因此，現在我們通過提交到Github master分支來更新登臺應用程序，我們如何更新生產應用程序？您將使用Github的Releases功能，就好像您的應用程序是真正的產品一樣。？

4. Go ahead and push your latest changes to Github! Then navigate to “Releases” on the Github repo and create a new release.

4.繼續并將最新更改推送到Github！然后導航到Github存儲庫上的“發布”并創建一個新版本。

?????? (?????)

Based on the last step, you should see two builds in queue on Travis CI. One will be the staging app updating because of the latest commit. The other will be your production app updating because of the new release!?????

基于最后一步，您應該在Travis CI上看到兩個構建隊列。其中之一將是登臺應用程序更新，因為最新的提交。另一個將是由于新版本而更新您的生產應用程序！

DevOps的最終，最重要的價值 (The Final, Most Important Value of DevOps)

I want to end this write-up by stressing the most important part of DevOps: automated testing. Whenever Travis runs, including in opened pull requests, it will check that the command yarn test passes before taking action. Create React App already has yarn test configured with Jest. However, you can add accessibility, linting, and any other testing framework you are familiar with!

我想通過強調DevOps的最重要部分： 自動化測試來結束本文。每當Travis運行時，包括在打開的拉取請求中，它將在執行操作之前檢查命令yarn test通過。 Create React App已經使用Jest配置了yarn test 。但是，您可以添加可訪問性，棉絨和您熟悉的任何其他測試框架！

To recap what we have done: First, we quickly got our React project configured thanks to Create React App. Then we built a simple server. We pushed the app into the world. Next, we got Travis deploying the app (with zero downtime) for any of our changes. Then we used the Github API while keeping our key away from public eyes. Lastly, we also set up a staging app so that we could test pre-release.

回顧一下我們所做的事情：首先，借助Create React App，我們快速配置了React項目。然后，我們構建了一個簡單的服務器。我們將應用程序推向了世界。接下來，我們讓Travis為我們的任何更改部署了應用程序(停機時間為零)。然后，我們使用Github API，同時使我們的密鑰遠離公眾。最后，我們還設置了一個臨時應用程序，以便我們可以測試預發布版本。

I hope this project has helped make your workflow easier as you make epic web apps! A big ? goes to the contributors of Babel, Create React App, Express, Node, and all other packages used. Also, all the ??? goes to Bluemix, Github, and Travis CI for their free tiers.

我希望這個項目可以幫助您在制作史詩般的Web應用程序時簡化工作流程！一個大的？歸功于 B abel， C reate React App， Express， N ode和所有其他使用的軟件包的貢獻者。而且，所有???都可以免費獲得Bluemix，Github和Travis CI。

Please share in the comments or tweet me if this helped you! I also would love to hear of different workflows!

請分享評論或通過推特發給我，如果這對您有幫助！我也很想聽聽不同的工作流程！

You can also contact me by leaving a comment, emailing me, or tweeting to @seejamescode. I work in ATX for IBM Design, and always love conversations with the web design community.

您還可以通過發表評論，給我發送電子郵件或發推文到@seejamescode來與我聯系。我在ATX for IBM Design工作，并且一直喜歡與Web設計社區的對話。