Code reviews are essential before merging a pull request. It’s a common practice to have another engineer look through the code changes, and it’s even better if you have a continuous integration (CI) pipeline configured that runs linters and unit tests to catch issues automatically.
For UI changes, it’s also a great idea to visually inspect the changes in the app. Doing so may require the reviewer to check out the branch and run the app on their machine. Depending on the complexity of your app’s architecture, running the app locally may be trivial to do with a single command, or it may require several steps and a fair amount of time.
Pull request review apps help facilitate this process by deploying a version of the app with the pull request’s changes applied in a preview environment. Now the reviewer doesn’t need to pull down the code themselves!
Students of choice architecture and nudge theory know that if you want to increase the desired behavior, you need to make the desired behavior easy. PR review apps do just that! By making it simple to visually review changes, PR review apps make it more likely that code reviewers will do so.
In this article, we’ll look at how to configure PR review apps using Render, a platform as a service (PaaS) solution that allows you to build and run your apps in the cloud.
Now imagine that you want to make changes to our app. We will create a new branch, make our changes locally, push up that branch, and then create a pull request to merge it into the master branch.
If a reviewer wants to visually inspect our changes, they can pull down the branch and run the app locally on their machine by simply installing the dependencies with
npm install and starting the app with
To help make the visual review even easier, let’s configure our repo to create a review app each time a new pull request is submitted.
We’ll first want to create a new account with Render. I used my email to create an account and then later connected my GitHub account, but you can also authenticate with GitHub directly if you prefer.
Once you have an account created, you can choose to create a new static site:
Choosing this option will prompt us to enter the URL for the existing GitHub repository we wish to connect to:
master), the build command (
npm run build), and the output directory (
build). Then, we’ll click “Create Static Site” at the bottom of the form.
With that said, Render will build and deploy our app for the first time. It’s as simple as that! Our dungeon crawler app is now publicly available here.
Now that we have our repos connected and our app deployed with Render, let’s set up the PR review apps (or “Pull Request Previews”, as Render calls them). To do so, we can click on the “PRs” tab and then the “Enable Pull Request Previews” button.
Now, let’s make a new pull request to see this review app in action!
We’ll make a new branch, make a small change to the app’s header, commit and push the changes, and then make a new pull request to merge our changes into the master branch.
Once we’ve created a new pull request, Render will post a comment on the PR that they are creating a new review app for us. Once the review app has finished deploying, Render will post a second comment notifying us that the review app is ready to be viewed.
Once we approve and merge the pull request, the PR review app gets destroyed, as it’s no longer needed. After that, Render will see the new commit merged into the master branch and deploy the latest version of our app to the main URL: https://dungeon-crawler.onrender.com.
Please note that these PR review apps are great for static sites and for viewing the changes made to a single resource. If you have a more complex app that requires a full-blown test environment complete with a backend server, database, or other resources, you should take a look at Render’s preview environments, which can handle a more complex setup.
Within minutes we were able to deploy our app with Render and configure our repo to create review apps for every pull request. Not only was this process easy for us to set up, but it also made code reviews moving forward even easier for every developer working on the repo.
Our PR review apps make it simple to visually review changes by eliminating the friction of having to run the app locally. With a setup like this, we are subtly nudging code reviewers to be more thorough.
Also published here.