Introduction
Nowadays, web projects need continuous updates of installed packages. Moreover, new libraries and frameworks are emerging every day. And these are a better version of the previous release that contains new features and even bug fixes. Therefore, keeping up could be troublesome for many projects, and missing those new versions can delay your projects as well.
If you want to automate the process, there are numerous external services to solve this problem. However, we are going to focus on Renovate here. I hope you are excited. OK, then let’s get started.
Disclaimer
I received a request to explore and experiment with WhiteSource Renovate as a free tool. The fact I got this request, it has not influenced the review in any way.
Table Of Contents
Background
Before we go deep dive into this article’s main meat, the developer must appreciate the importance of dependency updates. It is because most developers tend to see this as boring. Thus, this topic is most often neglected and put aside and severely affects most software-projects in the end. Don’t wait to sabotage your project; an automated tool will surely save your day, so keep reading till the end.
What Is Renovate?
Now, let me introduce you to this tool, WhiteSource Renovate. According to their website: “Save time and reduce risk by automating dependency updates in software projects. Fully customizable with a setting to suit every workflow.” A promising statement, isn’t it? That’s why we’ll demonstrate Renovate if it can continuously keep your software-project up to date. I’m hoping you’re excited.
To get started, according to their website, you can use Renovate on different platforms. Please, see the screenshot below to see the other platforms that Renovate supports. However, this article will be using GitHub for our demos; I hope you are excited. See you in the next section.
Why Use Renovate?
Let say, given a scenario, you have these packages installed within your project.
If you wanted to check if there any outdated package, you type “npm outdate” at the terminal.
And if you wanted to install the latest and greatest, you will end up typing this “ncu” at the terminal every day.
You can install ncu if you don’t have it yet in your system by typing “npm install -g npm-check-updates” at the terminal.
Try to imagine doing this every single day. You may even create a script for this to automate the commands but still tedious. Why not automate the process? Why not have something that checks our dependencies and ideally makes a pull request for us. Thereby, this is where Renovate comes into the picture; let Renovate automate this manual update.
We’ll see more in the next section.
Getting Started With Renovate Using Github
Prerequisites
For us to utilized Renovate, we need to install some related GitHub Apps.
See the list that needs to be installed:
- a CI pipeline for your GitHub repository (in our case, Azure pipeline).
- Renovate GitHub Apps.
For your guidance, you can go here to choose your suitable Continuous Integration (CI) pipeline. In our case, I have chosen the Azure pipeline. Steps to install an Azure pipeline will be shown in the next section.
Once you have successfully installed it to your GitHub repositories, you will eventually see something like this if you wanted to revisit it within the marketplace.
To install Renovate, you can go here. And click Renovate and follow through the steps.
To verify everything has been installed using your GitHub account, go here. See the sample image below.
Steps to Install Renovate in GitHub
You can skip this section if you are familiar with the installation or have installed Renovate in GitHub.
- Setup a plan by going here.
2. Install it for free.
3. Complete your order
Steps to Create an Azure Pipeline
This assumes that you are authenticated into your Azure DevOps account. Although, you can skip this section if you have a CI pipeline in your project.
- Create a new pipeline
Steps to Create a Project That Supports Renovate
1. Setup a GitHub Repository.
To set up your new repository. Don’t forget to check the Azure Pipelines and Renovate to trigger your build and pull requests at the bottom of the page.
I purposely ignored the README file and license, but you can configure it on your end. Lastly, the .gitignore file set to Node template because the Azure pipeline is using Node.js.
Once done, you can then click the “Create repository” green button. And see the sample output below.
2. Setup a basic configuration for our project.
Even before we create our first pull request and see how the Renovate bot will behave, let’s first set up our basic project configuration.
First, let us open our GitHub repository-project inside Visual Studio Code. Once ready, open the terminal and type “npm init -y” and hit enter. This will initialize our repository by adding the package.json file (see JSON File Configuration).
JSON File Configuration
{
"name": "renovate_demo_article",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "echo 'build script executed'"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jindeveloper/renovate_demo_article.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jindeveloper/renovate_demo_article/issues"
},
"homepage": "https://github.com/jindeveloper/renovate_demo_article#readme",
"dependencies": {
"ansi-colors": "^3.2.4"
}
Second, let us have one package in our project, but you can install more on your side. Let’s install ansi-color, open your terminal and type “npm i ansi-colors@3.2.4”, then press enter. After the successful installation, it will install a package-lock.json.
Third, do not forget to add this “"build": "echo 'build script executed'” within the package.json file under the scripts section or your build might fail.
3. Renovate first PR Configure/Renovate.
Things to remember after your first pull request:
- The Renovate bot will create a branch named renovate/configure.
- A pull request titled Configure Renovate.
After the merge, the Renovate bot will create a new pull request.
How cool is that? This pull request reminds us that we can configure Renovate with the use of renovate.json. See the full details within your pull request or see the image below.
4. Automatic update of your dependencies
Nice, you have gone this far. After we have merged, the first pull request of Renovate will be expecting another pull request. This time it will be about our dependencies. And it is expected because we intentionally installed an older version of ansi-color, and the version is 3.2.4 to see if Renovate will live up to its promise. See the full detail of the pull request below.
Great! How about a merge from this automatic dependency update? See the screenshot below.
Summary
In this post, we have seen why Renovate is vital for our software-projects. Moreover, we have seen the needed prerequisites to use Renovate in GitHub with the integration of the Azure pipeline. Lastly, we have seen a step by step procedure to test if Renovate keeps its promise when it comes to automation.
Jin's Tech Blog 