Containerizing a workflow: using Docker to ​“Build A Banner”

We use a cus­tom-built ani­ma­tion work­flow at JMX2 that we’ve con­tainer­ized with Dock­er to ensure it runs con­sis­tent­ly on any machine we work on. We’ll go over that process in this post.

The background

At JMX2, we build a lot of ani­mat­ed adver­tis­ing ban­ners. (You’re wel­come! :winking_​face:) In 2015, we cre­at­ed a Yeo­man gen­er­a­tor called ​“Build A Ban­ner” to quick­ly cre­ate a con­sis­tent start­ing point for each project. This required hav­ing Yeo­man, Node, Gulp.js, and Sass installed on the devel­op­ment machine.

Before we dive in fur­ther, let’s get some ter­mi­nol­o­gy out of the way. Yeo­man is a scaf­fold­ing tool that cre­ates and cus­tomizes files to help start near­ly any type of project. Gulp.js is an automa­tion tool writ­ten in Javascript. Sass is a CSS pre­proces­sor that adds help­ful things like nest­ing, mix­ins, and inher­i­tance.

The Yeo­man Build a Ban­ner gen­er­a­tor, which we refer to as BAB, asks a series of ques­tions, like the dimen­sions of the ani­ma­tion, the adver­tis­ing plat­form, the nam­ing con­ven­tion you’d like to use, and more. These val­ues cus­tomize the gen­er­at­ed files. For exam­ple, you could start with a set of files cus­tomized to cre­ate a 300×250 ad for use with Google Ad Words.

A ​“gen­er­a­tor” is the set of instruc­tions that can gen­er­ate any type of project. For exam­ple, my friend, Andrew Welch, has cre­at­ed a Yeo­man gen­er­a­tor, gen­er­a­tor-craft­plu­g­in that scaf­folds out the start­ing point for a mod­ule or plu­g­in for Craft CMS. A Craft plu­g­in com­bines PHP, HTML, Javascript, and CSS. Microsoft has a Yeo­man gen­er­a­tor that scaf­folds out a start­ing point for a VSCode exten­sion, vscode-gen­er­a­tor-code. There’s even a gen­er­a­tor, called gen­er­a­tor-gen­er­a­tor to help you cre­ate new Yeo­man gen­er­a­tors!

The Build a Ban­ner gen­er­a­tor, gen­er­a­tor-build­a­ban­ner, scaf­folds out a project that com­bines Javascript, includ­ing the Greensock ani­ma­tion library, HTML, and Sass for CSS gen­er­a­tion. Once a project has been gen­er­at­ed, it uses Gulp.js to spin up a devel­op­ment serv­er with live-reload dur­ing devel­op­ment. It also uses Gulp.js in a build process to mini­fy the files in the cor­rect for­mat that media com­pa­nies expect to receive an ani­mat­ed. When you’ve com­plet­ed a project, it uses Gulp to cre­ate a small archive file of the ban­ner files for long-term stor­age.

You can see the BAB project on npm here. If you look at the releas­es page, you’ll see there have been 57 releas­es at the time I write this.

We use a cus­­tom-built ani­ma­tion work­flow at JMX2 that we’ve con­tainer­ized with Dock­er to ensure it runs con­sis­tent­ly on any machine we work on. We’ll go over that process in this post.

The back­ground #

At JMX2, we build a lot of ani­mat­ed adver­tis­ing ban­ners. (You’re wel­come! :winking_​face:) In 2015, we cre­at­ed a Yeo­man gen­er­a­tor called ​“Build A Ban­ner” to quick­ly cre­ate a con­sis­tent start­ing point for each project. This required hav­ing Yeo­man, Node, Gulp.js, and Sass installed on the devel­op­ment machine.

Before we dive in fur­ther, let’s get some ter­mi­nol­o­gy out of the way. Yeo­man is a scaf­fold­ing tool that cre­ates and cus­tomizes files to help start near­ly any type of project. Gulp.js is an automa­tion tool writ­ten in Javascript. Sass is a CSS pre­proces­sor that adds help­ful things like nest­ing, mix­ins, and inher­i­tance.

The Yeo­man Build a Ban­ner gen­er­a­tor, which we refer to as BAB, asks a series of ques­tions, like the dimen­sions of the ani­ma­tion, the adver­tis­ing plat­form, the nam­ing con­ven­tion you’d like to use, and more. These val­ues cus­tomize the gen­er­at­ed files. For exam­ple, you could start with a set of files cus­tomized to cre­ate a 300×250 ad for use with Google Ad Words. 

A ​“gen­er­a­tor” is the set of instruc­tions that can gen­er­ate any type of project. For exam­ple, my friend, Andrew Welch, has cre­at­ed a Yeo­man gen­er­a­tor, gen­er­a­­tor-craft­­plu­g­in that scaf­folds out the start­ing point for a mod­ule or plu­g­in for Craft CMS. A Craft plu­g­in com­bines PHP, HTML, Javascript, and CSS. Microsoft has a Yeo­man gen­er­a­tor that scaf­folds out a start­ing point for a VSCode exten­sion, vscode-gen­er­a­­tor-code. There’s even a gen­er­a­tor, called gen­er­a­­tor-gen­er­a­­tor to help you cre­ate new Yeo­man gen­er­a­tors!

The Build a Ban­ner gen­er­a­tor, gen­er­a­­tor-build­a­ban­n­er, scaf­folds out a project that com­bines Javascript, includ­ing the Greensock ani­ma­tion library, HTML, and Sass for CSS gen­er­a­tion. Once a project has been gen­er­at­ed, it uses Gulp.js to spin up a devel­op­ment serv­er with live-reload dur­ing devel­op­ment. It also uses Gulp.js in a build process to mini­fy the files in the cor­rect for­mat that media com­pa­nies expect to receive an ani­mat­ed. When you’ve com­plet­ed a project, it uses Gulp to cre­ate a small archive file of the ban­ner files for long-term stor­age. 

You can see the BAB project on npm here. If you look at the releas­es page, you’ll see there have been 57 releas­es at the time I write this.

The problem we’re trying to solve

We’ve installed Yeo­man and BAB on many dif­fer­ent com­put­ers since 2015. We’ve had to debug instal­la­tions quite a few times along the way, and these instal­la­tion issues typ­i­cal­ly revolved around the Node instal­la­tion, per­mis­sion prob­lems, or con­flict­ing ver­sions of oth­er soft­ware.

In 2022, we’re at the point where we’ve updat­ed our com­put­ers again, and instead of debug­ging anoth­er instal­la­tion of Node, Gulp, Yeo­man, we’ve cre­at­ed a Dock­er image that con­tains all the pieces of the BAB project.

Mov­ing the work­flow to a Dock­er image has changed the require­ments of run­ning Build A Ban­ner. The new set­up requires Dock­er Desk­top, and that’s the only require­ment. It doesn’t mat­ter what ver­sion of Node you have installed because it isn’t need­ed to use BAB. No node? No prob­lem! (Hey, I should write that down!)

Once Dock­er Desk­top is on your com­put­er, you can pull the BAB image and run the con­tain­er. The con­tain­er has the need­ed ver­sions of Node, Gulp, and Sass already installed. You don’t need to install them on your own machine.

Try it yourself

Con­firm that Dock­er is installed and run­ning. Now open up your ter­mi­nal and cre­ate a new emp­ty direc­to­ry some­where on your filesys­tem and then cd into that direc­to­ry. Then run the fol­low­ing com­mand.

docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it --rm johnfmorton/yo-buildabanner

You should see the image down­load and run when it’s ready. Then you will see a com­mand prompt again. You’re no longer in ​“your” com­put­er, though; you’re now inside the cus­tom Dock­er con­tain­er with Yeo­man and Build A Ban­ner installed and con­fig­ured. The com­mand prompt is cus­tomized to make it easy to rec­og­nize that you are inside the con­tain­er.

The prob­lem we’re try­ing to solve #

We’ve installed Yeo­man and BAB on many dif­fer­ent com­put­ers since 2015. We’ve had to debug instal­la­tions quite a few times along the way, and these instal­la­tion issues typ­i­cal­ly revolved around the Node instal­la­tion, per­mis­sion prob­lems, or con­flict­ing ver­sions of oth­er soft­ware.

In 2022, we’re at the point where we’ve updat­ed our com­put­ers again, and instead of debug­ging anoth­er instal­la­tion of Node, Gulp, Yeo­man, we’ve cre­at­ed a Dock­er image that con­tains all the pieces of the BAB project. 

Mov­ing the work­flow to a Dock­er image has changed the require­ments of run­ning Build A Ban­ner. The new set­up requires Dock­er Desk­top, and that’s the only require­ment. It doesn’t mat­ter what ver­sion of Node you have installed because it isn’t need­ed to use BAB. No node? No prob­lem! (Hey, I should write that down!)

Once Dock­er Desk­top is on your com­put­er, you can pull the BAB image and run the con­tain­er. The con­tain­er has the need­ed ver­sions of Node, Gulp, and Sass already installed. You don’t need to install them on your own machine.

Try it your­self #

Con­firm that Dock­er is installed and run­ning. Now open up your ter­mi­nal and cre­ate a new emp­ty direc­to­ry some­where on your filesys­tem and then cd into that direc­to­ry. Then run the fol­low­ing com­mand.

docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it --rm johnfmorton/yo-buildabanner

You should see the image down­load and run when it’s ready. Then you will see a com­mand prompt again. You’re no longer in ​“your” com­put­er, though; you’re now inside the cus­tom Dock­er con­tain­er with Yeo­man and Build A Ban­ner installed and con­fig­ured. The com­mand prompt is cus­tomized to make it easy to rec­og­nize that you are inside the con­tain­er.

The command prompt lets you know you are inside the BAB container.

Ports exposed

You will see that 2 ports were opened in the dock­er com­mand, port 8080 and port 35729. BAB uses 8080 for view­ing the ban­ner in devel­op­ment in your brows­er. Port 35729 is used to com­mu­ni­cate with the brows­er for live-reload­ing of the page when you update the HTML, JS, or CSS dur­ing devel­op­ment.

Working in the container

There are sev­er­al com­mands you can run here. Since you’re just start­ing a ban­ner, you’ll first need to gen­er­ate the ban­ner with Yeo­man. Enter this com­mand.

yo buildabanner

A series of prompts appear to cus­tomize your ban­ner. After you com­plete the prompts and are again at the com­mand line prompt, enter the fol­low­ing to get the local dev serv­er run­ning.

gulp

Open your brows­er and go to http://​local​host​.com:8080. You should see a basic ani­mat­ed ban­ner. At this point, you edit the HTML, CSS, and Javascript, which will cause your web brows­er to reload each time you save your work.

After cus­tomiz­ing the ban­ner to your lik­ing, stop the gulp process with CTRL‑C. Then build the ban­ner with gulp build. You can also archive the ban­ner project with the gulp archive com­mand. In this case, my def­i­n­i­tion of ​“archive” means tak­ing the cus­tomized files and zip­ping them up for long-term stor­age.

Ports exposed #

You will see that 2 ports were opened in the dock­er com­mand, port 8080 and port 35729. BAB uses 8080 for view­ing the ban­ner in devel­op­ment in your brows­er. Port 35729 is used to com­mu­ni­cate with the brows­er for live-reload­­ing of the page when you update the HTML, JS, or CSS dur­ing devel­op­ment.

Work­ing in the con­tain­er #

There are sev­er­al com­mands you can run here. Since you’re just start­ing a ban­ner, you’ll first need to gen­er­ate the ban­ner with Yeo­man. Enter this com­mand.

yo buildabanner

A series of prompts appear to cus­tomize your ban­ner. After you com­plete the prompts and are again at the com­mand line prompt, enter the fol­low­ing to get the local dev serv­er run­ning.

gulp

Open your brows­er and go to http://​local​host​.com:8080. You should see a basic ani­mat­ed ban­ner. At this point, you edit the HTML, CSS, and Javascript, which will cause your web brows­er to reload each time you save your work.

After cus­tomiz­ing the ban­ner to your lik­ing, stop the gulp process with CTRL‑C. Then build the ban­ner with gulp build. You can also archive the ban­ner project with the gulp archive com­mand. In this case, my def­i­n­i­tion of ​“archive” means tak­ing the cus­tomized files and zip­ping them up for long-term stor­age.

Here’s a quick video of me cre­at­ing a ban­ner and launch­ing the devel­op­ment envi­ron­ment to show you how I use BAB.

I won’t get into the process of actu­al­ly cus­tomiz­ing the ban­ner ani­ma­tion. I’ve left com­ments in the HTML and Sass files but build­ing the ani­ma­tion where the work is for an ani­ma­tion project. The goal of BAB is to let us focus our time on the ani­ma­tion and not the devel­op­ment set­up process.

Here’s a quick video of me cre­at­ing a ban­ner and launch­ing the devel­op­ment envi­ron­ment to show you how I use BAB.

I won’t get into the process of actu­al­ly cus­tomiz­ing the ban­ner ani­ma­tion. I’ve left com­ments in the HTML and Sass files but build­ing the ani­ma­tion where the work is for an ani­ma­tion project. The goal of BAB is to let us focus our time on the ani­ma­tion and not the devel­op­ment set­up process.

Aliases

The final thing we do on our com­put­ers is to make the dock­er com­mand eas­i­er to remem­ber. We’ve updat­ed our rc files, specif­i­cal­ly the .zshrc file since we’re on Macs using the ZSH shell, with alias­es. The first is the most use­ful one.

alias banner='docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it johnfmorton/yo-buildabanner'

This alias allows us to type banner into the ter­mi­nal and quick­ly be in the Build A Ban­ner con­tain­er.

We have a 2^nd alias that we use only occa­sion­al­ly.

alias bannerupdate='docker pull johnfmorton/yo-buildabanner:latest'

This alias is handy for updat­ing our local Dock­er image with the lat­est one post­ed on Dock­er Hub. We can sim­ply type bannerupdate to down­load the lat­est image.

As always, I hope this was help­ful. You can find me on Twit­ter if you’ve got any feed­back. Thanks.

Alias­es #

The final thing we do on our com­put­ers is to make the dock­er com­mand eas­i­er to remem­ber. We’ve updat­ed our rc files, specif­i­cal­ly the .zshrc file since we’re on Macs using the ZSH shell, with alias­es. The first is the most use­ful one.

alias banner='docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it johnfmorton/yo-buildabanner'

This alias allows us to type banner into the ter­mi­nal and quick­ly be in the Build A Ban­ner con­tain­er. 

We have a 2^nd alias that we use only occa­sion­al­ly. 

alias bannerupdate='docker pull johnfmorton/yo-buildabanner:latest'

This alias is handy for updat­ing our local Dock­er image with the lat­est one post­ed on Dock­er Hub. We can sim­ply type bannerupdate to down­load the lat­est image.

As always, I hope this was help­ful. You can find me on Twit­ter if you’ve got any feed­back. Thanks.