{
  "$type": "site.standard.document",
  "path": "/building-and-deploying-a-react-create-app-to-github-pages-using-travisci/",
  "publishedAt": "2017-10-13T01:33:00.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "travis-ci",
    "github",
    "continuous-integration"
  ],
  "textContent": "It is surprisingly simple to deploy a public react-create-app built project on GitHub. In this post, we will look at how to set up a continuous integration pipeline using TravisCI and GitHub Pages.\n\nSetting up Continuous Integration Builds\n\nContinuous integration (CI) makes deploying an updated app so simple you don't even have to think about it. After your commits are pushed to GitHub, a new build will get kicked off.\n\nYou will need to create a TravisCI account. After creating your account. You'll be able to select which of your GitHub projects.\n\n[Image: account.png]\n\nI'll be setting up this CI pipeline for my sudoku solver app. The first step is to enable builds for this project.\n\n[Image: project_on.png]\n\nNow that we have configured the project to be built. We have to tell TravisCI how to build our project. We will define how our project is built in a file called .travis.yml.\n\n[Embedded code (GitHub Gist)]\n\nCommit this file and push your changes to GitHub. In a few minutes, you'll see an automatic build kicked off.\n\n[Image: building.png]\n\nSetting up auto deployment to GitHub Pages\n\nNow that we have the app building on every commit, let's auto deploy it to GitHub Pages. You will need to create a GitHub access token with the repo security level in order for this to work. To create this token, login to GitHub and create a token here: https://github.com/settings/tokens/new\n\n[Image: create_token.png]\n\nCopy the value of this token. This is a private token that gives access to your GitHub repos. Never check this token into a public repo.\n\nNow we can tell TravisCI about this token. You can do so from the build screen. Navigate to settings and define a token called github_token setting the value to the token you created.\n\n[Image: token_set.png]\n\nNow we can add the deploy step to our .travis.yml.\n\n[Embedded code (GitHub Gist)]\n\nWe also need to let our app know what it's URL will be. This is done in the projects packages.json file. For my project this gets set to:\n\n[Code block]\n\nThe format is https://<usename>.github.io/<repository_name>/\n\nCommit and push these changes to your repository. Once the build is complete your application will be deployed.\n\nYou can see this in action here: https://github.com/brookslyrette/react-sudoku-solver\n\nIf you have any questions please leave them in the comments below. Happy Coding!\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/building-and-deploying-a-react-create-app-to-github-pages-using-travisci/",
  "title": "Building and Deploying a React Create App to GitHub Pages Using TravisCI"
}