Deploy React Sites to GitHub Pages

Workshop on how to use Travis-CI to continuously deploy based on commits

What do we need?

• Terminal with Git
• Internet Connection
• 2.5 hours of time

What well create?

A development workflow in which Travis-CI deploys our react website automatically based on our commits

How?

• Install Node.js
• Install Create-React-App
• Create GitHub Account
• Create GitHub Repository
• Deploy to GitHub Manually
• Create Travis CI Account
• Configure Travis CI
• Let Travis do the rest

Install Node

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Install Create-React-App

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

https://github.com/facebookincubator/create-react-app

Create a GitHub Repository

Manually Publish Initial App

Start with Travis CI

Configure .travis.yml

language: node_js

node_js:
  - "node"

after_success:
  - git config --global user.name "vijayabharathi"
  - git config --global user.email "vijayabharathib@users.noreply.github.com"
  - git remote rm origin
  - git remote add origin \
https://vijayabharathib:${GH_TOKEN}@github.com/pineboat/react-continuous-deployment.git
  - npm run deploy

Create GH_TOKEN

Change your app and commit to witness magic

Watch as your build progresses

The shiny badge in your repository

# React Continuous Deployment using Travis CI

[![Build Status]
(https://travis-ci.org/pineboat/react-continuous-deployment.svg?branch=master)]
(https://travis-ci.org/pineboat/react-continuous-deployment)

Quirks

• Ensure GH_TOKEN has right permissions
• Clear caches
• Mend to service workers

Go build the next Best, Thank you!