|
1 | 1 | # Create React App DevOps
|
2 | 2 |
|
3 |
| -This is a repo that proves how easily it is to implement automated builds around [Create React App](https://github.com/facebookincubator/create-react-app). In this repo, we do the following: |
| 3 | +See the app live at: http://create-react-app-devops.mybluemix.net/ |
4 | 4 |
|
5 |
| -1. Use Create React App to Get the UI Up |
6 |
| -2. Setup Your Server with Node, Express, and Babel |
7 |
| -3. Run the App on the Web with Bluemix |
8 |
| -4. Automagically Deploy from Github with Travis CI |
9 |
| -5. Fetch API Data While Keeping Keys Secure |
10 |
| -6. Create a Staging App for Experimentation |
| 5 | +This is a repo that proves how easily it is to implement automated builds around [Create React App](https://github.com/facebookincubator/create-react-app). In this repo, we do the following (broken up by commits): |
| 6 | + |
| 7 | +1. [Use Create React App to Get the UI Up](https://github.com/seejamescode/create-react-app-devops/commit/0dbaf64a02f0eeedba2e5a134d472a58b3fc55a5) |
| 8 | +2. [Setup Your Server with Node, Express, and Babel](https://github.com/seejamescode/create-react-app-devops/commit/aafd7e34b43906814b7bb49e0a3d33e211e81281) |
| 9 | +3. [Run the App on the Web with Bluemix](https://github.com/seejamescode/create-react-app-devops/commit/3d61ec57acdbd0988c4aadf402415d290cf9c064) |
| 10 | +4. [Automagically Deploy from Github with Travis CI](https://github.com/seejamescode/create-react-app-devops/commit/0a624c089cdf19c966c431d49aeaa2ea9992941f) |
| 11 | +5. [Fetch API Data While Keeping Keys Secure](https://github.com/seejamescode/create-react-app-devops/commit/2a4fe33006f46b4f036f1846874ef869243d5743) |
| 12 | +6. [Create a Staging App for Experimentation](https://github.com/seejamescode/create-react-app-devops/commit/e792b417e6a6b843516fd485668587bc9f513c04) |
11 | 13 |
|
12 | 14 | There are three ways to implement this in your own Create React App project:
|
13 | 15 |
|
14 |
| -- Follow along with the Medium story to make it yourself |
15 |
| -- Inspect the git diff between the initial Create React App use and the final commit |
16 |
| -- Fork this repo and follow the instructions below |
| 16 | +- Follow along with the Medium story to make it yourself: [Let's Write Create React App DevOps Together](https://medium.com/@seejamescode/lets-write-create-react-app-devops-together-dc19512c6fbb#.un9m9z1qn) |
| 17 | +- Inspect the comparison between the initial Create React App use and the final commit: [Github Comparison Between First and Last Commit](https://github.com/seejamescode/create-react-app-devops/compare/0dbaf64a02f0eeedba2e5a134d472a58b3fc55a5...master) |
| 18 | +- Fork this repo and follow the instructions below: [Fork Create React App DevOps](https://github.com/seejamescode/create-react-app-devops#fork-destination-box) |
| 19 | + |
| 20 | +This project was inspired by [Create React PWA](https://github.com/jeffposnick/create-react-pwa) -a project that explains how to upgrade your Create React App project to a Progressive Web App. |
| 21 | + |
| 22 | +## Fork Instructions |
| 23 | + |
| 24 | +1) Create accounts at [Bluemix](https://bluemix.net/), [Github](https://console.ng.bluemix.net/), and [Travis CI](https://travis-ci.org/). |
| 25 | + |
| 26 | +2) Install on your machine the [Cloud Foundry CLI](https://docs.cloudfoundry.org/cf-cli/install-go-cli.html), [Node](https://docs.npmjs.com/getting-started/installing-node), and [Yarn](https://yarnpkg.com/lang/en/docs/install/#mac-tab). |
| 27 | + |
| 28 | +3) You will change `create-react-app-devops` to a unique app name on: |
| 29 | + - [.travis.yml](https://github.com/seejamescode/create-react-app-devops/blob/master/.travis.yml) - Lines 24 and 30. Also, change to your Bluemix email on lines 11 and 12. |
| 30 | + - [manifest-staging.yml](https://github.com/seejamescode/create-react-app-devops/blob/master/manifest-staging.yml) - Line 3 |
| 31 | + - [manifest.yml](https://github.com/seejamescode/create-react-app-devops/blob/master/manifest.yml) - Line 3 |
| 32 | + - [package.json](https://github.com/seejamescode/create-react-app-devops/blob/master/package.json) - Line 2 |
| 33 | + |
| 34 | +4) Add your Bluemix account email to lines 11 and 12 of [.travis.yml](https://github.com/seejamescode/create-react-app-devops/blob/master/.travis.yml) |
| 35 | + |
| 36 | +5) Login into Bluemix from your terminal with `cf login -a https://api.ng.bluemix.net` |
| 37 | + |
| 38 | +6) Run `cf push <your-app-name> -f manifest.yml` to push the production version of your app. |
| 39 | + |
| 40 | +7) Run `cf push <your-app-name>-staging -f manifest-staging.yml` to push the staging version of your app. |
| 41 | + |
| 42 | +8) Request a new access token from github: https://github.com/settings/tokens/new |
| 43 | + |
| 44 | +9) Set that access token in `keys.json` in the root of your repo: |
| 45 | +``` |
| 46 | +{ |
| 47 | + "github": "<your-github-key>" |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +10) Run `cf cups keys -p keys.json` to upload your key to a Bluemix service. |
| 52 | + |
| 53 | +11) Commit and push your repo to Github. |
| 54 | + |
| 55 | +12) Access Travis CI and go to your repo's settings on there. Add an environment variable called `BLUEMIX_PASSWORD` and set it to your Bluemix password. |
| 56 | + |
| 57 | +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. Lastly, we also set up a staging app so that we could test pre-release. |
| 58 | + |
| 59 | +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. |
| 60 | + |
| 61 | +I hope this project has helped make your workflow easier as you make epic web apps! A big 🙏 goes to the contributors of [Babel](https://github.com/babel/babel/graphs/contributors), [Create React App](https://github.com/facebookincubator/create-react-app/graphs/contributors), [Express](https://github.com/expressjs/express/graphs/contributors), [Node](https://github.com/nodejs/node/graphs/contributors), and all other packages used. Also, all the ❤️️ goes to Bluemix, Github, and Travis CI for their free tiers. |
0 commit comments