Dynamic_Gravity's Devember 2021 Project

TLDR;

Dynamic does CI/CD this year


The Blood Oath :drop_of_blood:

I, Dynamic_Gravity, will participate to the next Devember. My Devember will be to further my CI/CD knowledge by developing and deploying a bespoke To-Do app . I promise I will program for my Devember for at least an hour, every day of the next December. I will also write a daily public devlog and will make the produced code publicly available on the internet. No matter what, I will keep my promise.

The Deets :clipboard:

I’m going to be X-posting to here from my blog, along with providing the full source code provided here.

Repo Branch Status
devember2021-ui master pipeline status coverage report
devember2021-api master pipeline status coverage report

In the ultimate devember / homelab challenge I will undertake really learning CI/CD in earnest with GitLab. I wanted to make something useful while also not trying to overburden myself by learning too much material at once. I’m going to a frontend I’m familiar with but also something a bit new to me for the backend. My main focus will be to become more proficient at CI/CD though.

The Deliverable(s) :package:

A self-hostable To-Do web app that does historical tracking, recurring scheduled tasks, and be mobile friendly.

The inspiration from an old project at one of my previous employers. Essentially, we cooked up this massive JQuery and bootstrap app that we used to check off dozens of daily tasks (100+), record who & when the task was checked off by, and depending on the day, month or holiday, would pull from a database of predefined sequences of tasks to be completed. This allowed us to keep in sync in a more sophisticated way than a paper checklist.

My goal is to have something that will keep track of all the stuff I need to do to be a functional adult. :sweat_smile:

The Stack :computer:

Frontend

Vue (v2) + Vuetify

Everyone probably knows me as a huge Vue shill. And, well… sticking to my guns here. Since I already know it pretty well I feel confident I will be able to smoothly build something.

Backend

Nestjs

I am new to the world of Nestjs but this batteries-included approach seems exactly what I’m looking for for fast and robust development. Here is a cool breakdown, Nestjs in 100 seconds:

The Docs :books:

As I go through my project I shall be re-reading my software project management book from college.

O’Reilly — Applied Software Project Management

Come Chat :left_speech_bubble:

If you want to hangout with me you can come join my Mattermost.
https://chat.covalent.space/signup_user_complete/?id=z3s5wetwcbdwpkdych9u8rgnba

The App :link:

https://www.covalent.space/devember2021/#/

Repo’s:

2 Likes

Hey @Dynamic_Gravity! I know you’re a cool guy. But pardon my noobness, but what is CD/CI?

Sure. It stands for Continuous Integration and Continuous Development.

You set up pipelines to do your compiling, unit testing, end to end testing, deployment. That way when any new code is pushed it goes through all the stages of validation before getting pushed out to production. It’s used for high cadence software delivery.

1 Like

Day 1

Today, I first tried to setup a self hosted container registry but after fumbling around with that for a while and breaking my gitlab several times I gave up trying to make that happen.

Instead, I did some googling and found this nifty blog post for setting up automatic semantic versioning. I decided I wanted to give this a try.

First, I created a new repo under my devember2021 project group, called it ci-scripts, stole what he wrote and took his advice for incorporating it in my workflow. commit 23808871.

In a nutshell, I now have automatic git tag version incrementing in my pipeline. Whenever I do a successful push it will tag it for me, build the production bundle, test it, and then deploy it.

All I have to do is push code.

Here is my gitlab-ci.yml file if anyway wants to check it out or ask me questions.

E.g

And on the Version stage this is what happens:

Screen Shot 2021-12-01 at 7.12.37 PM

:tada:

https://www.covalent.space/devember2021/#/


Footnotes

I updated my first post with a link for people to come chat with me directly if that’s more your thing.

1 Like

Day 2

Today I set up automated monthly release cycles via the GitLab Scheduler.

CI/CD > Schedules

Screen Shot 2021-12-02 at 12.16.21 PM

Configured via cron syntax. Midnight on the first of the month it will run the pipeline.

Screen Shot 2021-12-02 at 12.17.13 PM

Next, I spent the rest of the hour tweaking the WebUI wireframes.

I added a new site logo svg. I like kale so thats an icon I chose. For these things I always recommend The Noun Project. It’s a fantastic website to find high quality icons if you don’t want to spend the time doing it yourself.

The nav bar is just a placeholder right now. The hamburger menu icon toggles the navbar visibility. The chevron toggles the mini variant of the navbar. Both buttons have tooltips to explain the function of the buttons.

Screen Shot 2021-12-02 at 12.20.52 PM

1 Like

Day 3

Today I spent setting up more wireframs for the UI.

I noticed that the button at the top to collapse the left-side nav list resets its state on route change. So tomorrow I will work on implementing some kind of state persistence.

Still working on this! Just haven’t posted. Compiling a round up soontm