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!

Workshop - Deploy React Sites to GitHub Pages

By Vijayabharathi Balasubramanian

Workshop - Deploy React Sites to GitHub Pages

Using Travis-CI to continuously deploy changes to gh-pages

  • 313
Loading comments...

More from Vijayabharathi Balasubramanian