6.3. CI CD Pipeline - Mark-van-B/IT-Landscape-UCLL- GitHub Wiki

Getting started

Creating a local software project

For this, I'm going to use an example provided by Docker's GitHub: a simple webapp with a To-Do list.

  1. Go to the repository of the app, click on the green [<> Code] button, and click "Download ZIP"

image

  1. Extract the .zip file in its own directory, and open said directory with Visual Studio Code.

  2. In the sidebar (press the top icon resembling two pieces of paper if it isn't already expanded), click on New File and name it "Dockerfile". (NOTE: This file has no extension, and only the D must be capitalised!)

image

Inside the Dockerfile, paste the following:

# Use the official Node.js image as a base
FROM node:18

# Set working directory
WORKDIR /getting-started-app

# Copy package.json and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application
COPY . .

# Expose the application on port 3000
EXPOSE 3000

# Run the app
CMD ["npm", "start"]

The lines starting with # only serve as added commentary, so might as well include them for future reference. As for "npm", this is a tool for managing packages of functional code (so-called "nodes") that others wrote and published for our convenience.

(NOTE: The Dockerfile must be in the same directory as "package.json" for it to work, if yours ended in a sub-folder, simply drag it into the main folder until it looks like the screenshot from above.

(NOTE: make sure that both "Dockerfile" and "node_modules" are listed in the .Dockerignore file. One is purely for initialisation, the other is way too big to upload along with the rest, and npm will automatically reinstall all node modules when downloaded.)

Upload your code to GitHub

  1. The third tab of the side bar is all about managing GitHub repositories. Go into it, and click on "initialize repository"

image

  1. Open the Terminal ("View" menu on top -> Terminal)

image

If you have Git installed, it'll show up in the list next to the little + sign in the Terminal UI we just opened. We have need of it, so ignore the Powershell and open a Git bash terminal. The PowerShell one can be closed with the little trash bin icon if the clutter bothers you.

image

If you don't have git installed, go to git-scm.com and press Download for Windows in that monitor image.

image

Now, in order to upload/update your online repository, three steps need to be done. The "Source Control" tab in the sidebar allows it, but I'm going to focus on the git commands, because those will work outside of MS Visual Studio Code as well.

(NOTE: If your git terminal isn't set to the proper directory, these commands won't work. If it says "(main"), then you're good!)

image

  1. Stage changes: git stage . (the dot at the end means: stage "everything within this directory")
  • This bundles the changes together, but only locally.
  1. Commit the staged changes: git commit -m "Initial commit" (-m = "message". Every commit needs a message to explain what's happening)
  • "initial commit" is good enough for the one that actually puts things into your online repository, but this needs to be custom from now on.)

image

  1. Go back to the Source Control tab in the side panel, and click on Publish Branch

image

Then choose a name for your repo in the small prompt that appears, and you're all set!

image

Create Workflow