Tales from a n00b: CI for Flutter using Jenkins and Docker: Episode 1

As a software developer, having a Continuous Integration solution in your projects can be beneficial in delivering quality code, identify problems quickly and solve them. You can learn more about the benefits of Continuous Integration from this great article.

I have been using Flutter for about 4 months now and I think it is an amazing framework. There are some niche out-of-the-box CI solutions for Flutter including Travis CI, Cirrus CI, NeverCode etc., but then you would ask what’s the purpose of this article? Let me give you some background - I work for a small company within a University and we use the enterprise of Github. This scenario brings a lot of red tape, in turn making the use of these out-of-the-box CI solutions infeasible. For this reason I started exploring Jenkins for my Flutter builds and testing. However, being a newbie I had no idea where to start and how to approach this problem. In this post I will share my experiences exploring the unknown, and lessons I learned along the way.

Jenkins on local machine

Being an impulsive person I wanted to approach the problem head-on, leading me to download the Jenkins WAR and, running it on a local Windows machine using java -jar jenkins.war. Good news: Jenkins application was up and the machine already had Flutter setup so I was able to run flutter test. This approach would have worked perfectly if I was the only one accessing Jenkins or I was working alone. But, in reality, teams never work this way. In my case, an intern and the QA team would like to make use of Jenkins for code review and looking at code coverage metrics. Bad news: With the current approach it would mean that other people on my team would have to setup Jenkins and Flutter on their local machines and that would take additional time and not setups will be uniform. Lesson learned: My approach was little too impulsive! Hey come on now, we have all been there. This left me wondering how do I create a Jenkins setup with Flutter installed such that my team-mates or anyone else would not have to worry about the setup.

Docker to the rescue

Thinking more about my problem (which basically translates to reading more documentation), I found that a Docker image with Jenkins and Flutter installed could be a potential solution. I could create an image and share it on Docker Hub and people could readily use it or improve on it. My team would not have to worry about setting up Jenkins or Flutter and their relevant versions. They could run these images as local docker instances and still be on same page as me. I can go on but that is not the purpose of this post, you can read about the benefits of docker here.

Getting started with Docker image

I started by lurking around Docker Hub to find that one Docker image that would come with Jenkins and Flutter already installed. I found few images (1, 2)but they were not exactly what I needed or were missing few pieces. I needed the ability of configuring Jenkins (through UI) to scan my git repo for commits, starting test build, collecting code coverage and then showing the code coverage on the UI.

To accommodate my needs I decided on creating my own docker image, which would have things configured as per my needs. But where to start, the interweb told me to start with a Dockerfile and so I did. This the code for my Dockerfile:

Let’s quickly walk through the Dockerfile.

FROM jenkins/jenkins:lts

I am specifying which Docker image to be used as the base for my image.

RUN apt-get update && apt-get install -y — force-yes git wget unzip libgconf-2–4 gdb libstdc++6 libglu1-mesa fonts-droid-fallback lib32stdc++6 python3 \ 
&& apt-get clean \

Here I am installing the different dependencies that are required for installing Flutter using apt-get

git clone -b beta https://github.com/flutter/flutter.git /usr/local/flutter \ && chown -R jenkins:jenkins /usr/local/flutter

Now I am cloning the flutter repo from Github to /usr/local/flutter and using the beta channel. I am also giving permissions to jenkins user to /usr/local/flutter.

ENV PATH=”/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}”

Finally I am setting PATH so that flutter and dart sdk tools are accessible through the terminal.

Once this is done all I had to do was create a docker image based on the Dockerfile. This was done by:

docker build -t jenkinsflutter .

I am providing a friendly informative name to my image.

So far so good. Now time to run my container based on the image I just created. Looking at the documents from Jenkins image it seemed that all I had to do was:

docker run -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home jenkinsflutter

Which is basically running the container and exposing port 8080 for the UI. Also, in order to not lose my Jenkins configuration on restarting the container, I provided jenkins_home.

And boom! we have our Jenkins instance running. Going to localhost:8080 on the web browser will display this page.

Jenkins launch page

Now the only thing required is to install suggested plugins and to create a user.

Wooh, we came a long way! But you guys might complain that we didn’t do anything Flutter as the title suggested. So as Master Yoda once said

I promise the next part will have Flutter, and we will actually configure Jenkins to run flutter test for every commit on our git repo. For now I will let you guys follow the instructions to have a running Jenkins server and I will go read more documentation!

LINK TO EPISODE 2: https://medium.com/@sudhanshu0203/tales-from-a-n00b-ci-for-flutter-using-jenkins-and-docker-episode-2-30ce894c93cc

References/Resources:

Installing Jenkins: https://jenkins.io/doc/book/installing/
Getting started with Docker: https://docs.docker.com/get-started/
lcov-to-cobertura-xml: https://github.com/eriwen/lcov-to-cobertura-xml
Docker image with Jenkins and Flutter: https://hub.docker.com/r/ssiddh/jenkinsflutter/