Apol0x / create-react-app-devops

A guide on how to easily implement automated deployments, Node server, and an Express API around Create React App.

Create React App DevOps

See the app live at: https://create-react-app-devops.now.sh/

Looking for v1 that uses IBM Cloud (Bluemix)? Check it out here.

This is a repo that proves how easily it is to implement automated builds, Node servers, and Express APIs around Create React App. In this repo, we do the following (broken up by commits):

1. Use Create React App to get the UI up
2. Setup Your server with Node, Express, and Babel
3. Run the app on the web with Zeit Now
4. Fetch API data while keeping secrets secure
5. Automatic deployment from master branch pushes and tag releases using GitHub and Travis CI

This project was inspired by Create React PWA -a project that explains how to upgrade your Create React App project to a Progressive Web App.

Fork Instructions

1. Create accounts at Zeit (for app hosting), Github (for code hosting), and Travis CI (for autodeployment).

2. Install on your machine Zeit Now Desktop, Node, and Yarn.

3. Fork this repo in the top right corner and create a local clone to your computer

4. Change create-react-app-devops to a unique app name at:

   • now.json, line 2
   • now-staging.json, line 2 (Keep -staging at the end.)
   • package.json, line 2
   • package.json, line 30
   • package.json, line 32

5. Request a new personal access token with repo scope from GitHub and create a now-secrets.json file at the root of the repo like { "@github": "YOUR_ACCESS_TOKEN" }. This file will be gitignored, so it will never end up on GitHub to keep your token secure.

6. Run now secret add github YOUR_ACCESS_TOKEN so that Zeit Now knows your access token without receiving the secrets file.

7. Run yarn deploy:staging && yarn deploy:production to push a staging version and production version of your app. You should be able to access them at YOUR_UNIQUE_APP_NAME.now.sh and YOUR_UNIQUE_APP_NAME-staging.now.sh.

8. Get a token at Zeit. Then go to Travis CI, activate the repo, and add an environment variable called NOW_TOKEN with the token value you just received.

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 that can use any Babel presets and plugins you want to add to package.json. We pushed the app online with both a staging instance and production instance. Next, we have Travis updating the staging instance whenever you push to your master branch on GitHub with no downtime. And to update the production instance, all you have to do us make a release on the GitHub repo.

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 Zeit, Github, and Travis CI for their free tiers.