Automated delivery React / Vue app for each Pull Request.

Would you like to speed up the development process of your React / Vue application? Make it more predictable and transparent for clients and teammates? Well, continue reading. In this article, I want to describe a set of tools that will make your life easier.

Online “snapshot” for Pull Request #

Continuous Integration (CI) is a practice when developers merge their changes to the main branch as often as possible. Every developer commits daily to a shared repository. Every commit creates a build and runs automated tests.

Continuous Deployment (CD) is an extension of CI. It means that besides the automated tests you also have an automated release process and you can deploy your application at any time point.

It’s needed for 2 reasons: everyone who makes code review can easily check implementation without pulling branch and testing locally; the client can see progress at any time at any feature, and test it manually, without waiting for a production release, so it’s really useful.

There are ready-made SaaS solutions, such as Heroku Review Apps, but not all of them are always suitable. We saw a lot of examples where default SaaS platforms are very complicated and doing a lot of stuff that you don’t need at all. So, We want to show you how we can integrate CI with a custom CD.

It will give you a possibility to find and solve problems faster, release more stable and higher quality products. Here we will use CircleCI, but you can use whatever you need (Jenkins, Travis CI, GitLab CI).

Custom deployment JavaScript app #

Let’s assume you have set up on CI with installing dependencies, running tests and linting code. Here is an example of our configuration for ReactXP.

      - run: cd tv && yarn install
      - run: cd tv && yarn lint
      - run: cd tv && yarn test
      - run: sudo yarn global add surge
      - deploy:
          name: Deploy TV version on web
          command: cd tv && ./bin/deploy_web
      - run:
          name: Post link to app in PR
          command: cd tv && ./bin/github_message

Build & Deploy #

We add the delivery stage after passing tests and linter checks. To deploy an app, we need to build it for the production environment first.

#!/bin/sh

echo "== Deploy TV version on web =="

yarn webpack -p
surge -p ./ -d ${LYOUTUBE_CLIENT_URL:-lyoutube-tv.surge.sh}

We need to have a unique name per each PR to differentiate the builds. In order to release an app with a unique name, we are using PR number from CircleCI and deploy it via Surge service.

Posting review link to GitHub #

Here is how to make notification in GitHub. We publish a comment with a link inside:

const apisauce = require('apisauce');
const api = apisauce.create({
  baseURL: `https://api.github.com/repos/${owner}/${repositoryName}`,
  headers: {
    'Authorization': `token ${token}`
  }
});

/* Getting all comments from a particular PR, we need this for updating our link */
const getComments = () => api.get(`/issues/${prNumber}/comments`);

/* Instead of spamming, we remove old comments */
const removeOldComments = (comments, message) => {
  comments
    .filter(comment => comment.body == message)
    .forEach(comment => api.delete(`/issues/comments/${comment.id}`))
}

const addComment = message => api.post(`/issues/${prNumber}/comments`, { body: message });

/* Posting/Updating deployed link */
const message = `Deployed to https://${appUrl}`;
getComments()
  .then(response => removeOldComments(response.data, message))
  .then(() => addComment(message))

Conclusion #

In this article, we have discovered how to create our own JS app Delivery without using a SaaS solution that can not fit your requirements. And you can verify it wasn’t so hard. Using auto-deployments, we have reduced bugs appearing up to 50% because of easier functional testing, and the price is just a small script!

Paul Keen is an Open Source Contributor and a Chief Technology Officer at JetThoughts. Follow him on LinkedIn or GitHub.