How we deploy every pull request to a seperate domain.

Here is your deployed pull request (source: https://unsplash.com/photos/3syTDiVAc7w)

But why?

On every pull request, we do the same thing during the review process.

  1. We build the project
  2. We test the build for errors
  3. Finally we review the code itself

What do you need?

If you wan’t to adopt the described workflow, your project must compile to static (HTML, JS and CSS) files. If it doesn’t, and you need a real server running, there are other, more advanced, options out there. Check out this great article by Carlos Ribeiro.

Let’s set it up!

Tokens

At first, we need to get all the required auth tokens. One for surge.sh to actually deploy the pull request. And another one for github, to comment back the deployed url.

GitHub token scopes

CI Server

For this tutorial, I will be using Travis CI, but you can use whatever CI-Server you prefer. The only requirement is, that you can run shell scripts on it. You also may need to adjust some variable names in the shell script, because I am using some Travis CI specific ones.

The Script

The actual script is pretty straight forward. We simply run npx surge to deploy the project and do a curl command to comment back the url.

#!/bin/bash# deploy to surge.sh
npx surge --project ${BUILD_DIR} --domain ${TRAVIS_PULL_REQUEST}.${SURGE_SUBDOMAIN}.surge.sh
# comment url to pull request
curl -H "Authorization: token ${GITHUB_TOKEN}" -X POST -d "{\"body\": \"❤️ I have deployed this pull-request for you: \nhttp://${TRAVIS_PULL_REQUEST}.${SURGE_SUBDOMAIN}.surge.sh\"}" "https://api.github.com/repos/${TRAVIS_REPO_SLUG}/issues/${TRAVIS_PULL_REQUEST}/comments"
travis ci environment variables

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store