Docker/C3/Automating-Docker-Builds/English - Revision history

Madhurig at 11:17, 31 January 2025

2025-01-31T11:17:42Z

Madhurig at 10:14, 31 January 2025

2025-01-31T10:14:16Z

Nirmala Venkat at 12:46, 28 January 2025

2025-01-28T12:46:38Z

Madhurig at 12:24, 28 January 2025

2025-01-28T12:24:21Z

Madhurig at 12:11, 28 January 2025

2025-01-28T12:11:27Z

Show changes

Nirmala Venkat: Created page with "
{| border="1" |- || '''Visual Cue''' || '''Narration''' |- |- style="border:1pt solid #000000;padding-top:0cm;padding-..."

2025-01-08T06:36:42Z

Created page with "<div style="margin-left:1.27cm;margin-right:0cm;"></div> {| border="1" |- || '''Visual Cue''' || '''Narration''' |- |- style="border:1pt solid #000000;padding-top:0cm;padding-..."

New page

<div style="margin-left:1.27cm;margin-right:0cm;"></div>
{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"
|| Show slide:

'''Title Slide'''
|| Hello and welcome to the Spoken Tutorial on “'''Automating Docker Builds”.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show Slide:

'''Learning Objectives'''
|| In this tutorial, we will learn how to
* <div style="margin-left:1.27cm;margin-right:0cm;">Setup and configure GitHub </div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Automate Docker builds using GitHub</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Pull and test the built images</div>

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show Slide:

'''System Requirements'''
|| To record this tutorial, I am using
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux '''OS version '''22.04 '''and </div>
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Docker version 27.0.2'''</div>

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show Slide:

'''Prerequisite'''

[https://www.spoken-tutorial.org/ https://www.spoken-tutorial.org]
|| To follow this tutorial,
* <div style="margin-left:1.27cm;margin-right:0cm;">You must have a '''Docker Hub '''account</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">You must have a '''GitHub''' account</div>

For pre-requisite, please visit the docker series on this website.
|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | Show slide:
'''Code files'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;" |
* <div style="margin-left:1.27cm;margin-right:0cm;">The files used in this tutorial are provided in the '''Code files''' link.</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Please download and extract the files.</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Make a copy and then use them while practicing.</div>
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:

'''Git Setup - Instruction sheet'''
||
* <div style="margin-left:1.27cm;margin-right:0cm;">The instructions to set up Git are provided in the Additional Reading section of this tutorial</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Go through them to install Git and create a GitHub repository for the code files</div>
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show Slide:

'''GitHub Actions'''
||
* <div style="margin-left:1.27cm;margin-right:0cm;">'''GitHub Actions '''is an automation platform.</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">It helps automate software development workflows within '''GitHub '''repositories.</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">It runs workflows when code is committed.</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Workflows automatically build and test the code.</div>

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchartn'''
|| This flowchart shows the process of automating building '''Docker '''images.

We shall be building a custom '''Docker '''image for an '''Express '''web server.

<div style="color:#000000;">The code is similar to the one we demonstrated earlier.</div>

<div style="color:#000000;">Previously, we built the image manually using '''Docker build '''command.</div>

Now, we will automate the process using '''GitHub Actions'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''
|| The application will run an '''Express web server'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''
|| The '''Dockerfile '''will be the same as the one used previously.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''

|| We will push the application code and '''Dockerfile '''to '''GitHub'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''
|| Then we will set up '''GitHub Actions '''for building the image.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''
|| Then '''GitHub Actions '''will automatically build the image.
The image will be built everytime code is pushed to '''GitHub'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''
|| The built image will be automatically pushed to '''Docker Hub'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:'''GitHub Actions Flowchart'''

|| Then the image can be pulled from '''Docker Hub '''and used.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
||
|| Let us see how it works.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Open the '''Code Files '''directory in file manager.
|| I have already created the code files for this tutorial.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight the folder '''node-express''' and open it.
|| Open the folder '''node hyphen express'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight the folder '''express_api'''.

Open the '''express_api '''folder.
|| The folder '''express underscore api '''contains the files for the application.

The '''Dockerfile '''contains the instructions for building an image.

The '''app dot js '''file contains the code for the '''Express '''web server.

The '''quotes dot js '''file contains a list of quotations.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight the file '''gitignore'''
|| The '''gitignore '''file lists the files that are not to be pushed to '''GitHub'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Open Firefox web browser.

Navigate to the URL: [https://github.com/your-username https://github.com/your-username]/node-express'''
|| I have already created a '''GitHub''' repository '''node hyphen express.'''

Push the directory '''express underscore api '''and the '''Dockerfile''' as given in the instruction sheet.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Open a new browser tab.

In the search bar, type [https://hub.docker.com/ https://hub.docker.com].

Press Enter.
|| Open a new browser tab.

In the search bar, type the address as shown.

Your repositories on '''Docker Hub''' will appear.

If this page does not appear, check if you are logged in.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Hover over '''node-express '''in the list of Docker images.
|| I have already created a repository for the image '''node hyphen express'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the user icon on the top right of the website.
|| Click on the user icon on the top right of the '''Docker Hub '''website.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on '''Account settings '''in the dropdown menu.
|| In the drop down menu, click on '''Account settings '''to open''' '''the '''Settings '''page'''.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Under '''Security, '''click on '''Personal access tokens'''.
|| Under '''Security, '''click on '''Personal access tokens'''.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Generate new token '''button.
|| Click on the '''Generate new token '''button.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| In the '''Access token description '''field, type '''GitHub Actions'''.
Highlight '''GitHub Actions'''.
|| In the '''Access token description '''field, type '''GitHub Actions'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| In the '''Access permissions '''dropdown, select '''Read & Write'''
|| In the '''Access permissions '''dropdown, select '''Read and Write'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Generate '''button.
|| Click on the '''Generate '''button.

This will generate an '''Access Token''' which helps other applications to access '''Docker Hub'''.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''Copy access token'''.
|| A new screen will appear with the title '''Copy access token'''.

Here we will copy our access token.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Copy '''button next to the access token in the second code box.
|| Click on the '''Copy '''button next to the access token in the second code box.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Switch to the browser tab where '''GitHub '''is open.
|| Now switch to the '''GitHub '''browser tab.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Settings '''tab on the ribbon below the username.

|| Make sure you are inside the '''node hyphen express '''repository.

Click on the '''Settings '''tab on the menu bar below the username.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| On the left sidebar, expand '''Secrets and variables''' by clicking on it.
|| On the left sidebar, expand '''Secrets and variables''' by clicking on it.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on '''Actions'''.

Highlight '''Actions secrets and variables'''.
|| Click on '''Actions'''.

The '''Actions secrets and variables '''page will open.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Variables '''tab.
|| Now click on the '''Variables '''tab.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Under the Repository''' variables '''section, click on the '''New repository variable '''button.
|| Under the '''Repository variables '''section, click on the '''New repository variable '''button.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| In the '''Name '''field type '''DOCKER_USERNAME'''.
|| Type '''DOCKER underscore USERNAME '''in the '''Name '''field.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| In the '''Value '''field type your '''Docker Hub''' username.
|| In the '''Value '''field type your '''Docker Hub''' username as shown.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Add variable '''button.
|| Click on the '''Add variable '''button.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''DOCKER_USERNAME'''
|| This variable will be used in our '''GitHub Actions '''workflow file for username.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Secrets '''tab.
|| Click on the '''Secrets '''tab.

Since '''Access Tokens '''need to be secured, we will use '''GitHub Secrets'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''New repository secret''' button.

Highlight '''Actions secrets/New secret'''
|| Click on the '''New repository secret '''button.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| In the '''Name '''field, type '''DOCKERHUB_TOKEN'''.
|| In the '''Name '''field, type '''DOCKERHUB underscore TOKEN'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| In the '''Secret '''field, paste the '''access token '''by pressing '''Ctrl and V '''keys simultaneously.
|| In the '''Secret '''field, paste the '''access token '''by pressing '''Ctrl and V '''keys simultaneously.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Add secret '''button.
|| Click on the '''Add secret''' button.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| We have created a '''Docker Hub '''token and added it to '''GitHub '''secret.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| Next we will set up '''GitHub Actions.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Actions '''tab in the ribbon below the username.
|| Click on the '''Actions '''tab in the menu bar
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on '''set up a workflow yourself '''link.
|| Click on '''set up a workflow yourself '''link.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| If you previously created a workflow, the link may not appear.

In that case, click on the '''New workflow '''button in the sidebar.

Then click on the '''set up a workflow yourself '''link.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| A new page will open with an empty code editor window.

We will add code to this editor from the code files.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Switch to file manager ('''Nautilus).'''

Open the '''GitHub-Actions-Script.txt '''file from Code Files in the text editor.
|| From the code files, open the file '''GitHub hyphen Actions hyphen Script dot txt.'''

Copy the complete code and paste in the editor in the '''GitHub '''tab.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''name: Docker Image Build'''
|| The code follows the '''YAML '''syntax.

The '''name '''key defines the '''workflow '''name '''Docker Image Build'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''on'''.
|| The '''on '''key specifies the events on which the script will run.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''push'''
|| The '''push '''key indicates that the script will run when code is pushed.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''branches:'''

'''- main'''

|| The script runs only for the '''main '''branch.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''build'''
|| We define one job named '''build''' for building the '''Docker image.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''runs-on:ubuntu-latest'''
|| '''Ubuntu hyphen latest '''denotes the operating system to run the image.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''steps'''
|| The '''steps '''key defines the steps that will be followed in the job.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''name: Login to Docker Hub'''
|| The step '''Login to Docker Hub '''logs in to '''Docker Hub'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''uses: docker/login-action@v3'''
|| The '''login-action''' action performs login using the '''username '''and '''access token'''.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''username: ${{ vars.DOCKER_USERNAME }}'''

|| Then we set the value of the username to '''docker underscore username '''variable'''.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''password: ${{ secrets.DOCKERHUB_TOKEN }}'''
|| Similarly we set the value of the password to '''dockerhub underscore token '''secret.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''name: Set up Docker Buildx'''
|| '''Docker buildx plugin '''helps in building Docker images.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''uses: docker/setup-buildx-action@v3'''
|| We use the action '''setup hyphen buildx hyphen action'''.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''name: Build and push'''
|| The next step is building the image and pushing it to '''Docker Hub.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''uses: docker/build-push-action@v6'''
|| Here we use the version 6 of '''build hyphen push hyphen action'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight''' push: true '''
|| '''Push colon true''' denotes that the image will be pushed to '''Docker Hub.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''tags: ${{ vars.DOCKER_USERNAME }}/node-express:latest'''
|| The '''tags '''key specifies the tags to be added for locating the image in '''Docker Hub.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''vars.DOCKER_USERNAME'''
|| The first part of our tag is our '''Docker Hub '''username.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''node-express:latest'''

|| '''node hyphen express '''is the name of our repository.

'''colon latest '''is used to denote that the build is the latest build.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on '''Commit changes '''button
|| Click on '''Commit changes '''button on the top right corner under the menu bar.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on '''Commit changes '''button at the bottom of the dialog box
|| In the dialog box, click on the '''Commit changes '''button.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''Actions '''tab on the top ribbon.
|| Click on the '''Actions '''tab on the menu bar.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Hover over '''Create main.yml '''under '''All workflows'''.
|| A new workflow run will appear under '''All workflows''' called '''Create main dot yml'''..

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Hover on the yellow progress circle on the left of '''Create main.yaml'''.

Wait for the green tick mark to appear.
|| This yellow circle denotes that the build process is running.

Wait for the build process to complete.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Hover on the green tick mark on the left of '''Create main.yml'''.
|| The build process is now completed which is indicated by a green tick mark.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Open another browser tab and visit the URL [https://hub.docker.com/ https://hub.docker.com]
|| Now open another browser tab and visit the following URL to '''Docker Hub.'''.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on '''Repositories '''on the top ribbon.
|| Click on '''Repositories '''on the top menu bar.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Click on the '''node-express '''repository.
|| Click on the '''node hyphen express '''repository.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Under '''Tags, '''hover over '''latest'''.
|| An image with the latest''' '''tag is available here.

This was created and pushed by the '''GitHub Actions '''build process.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| Now we will sync our local code with the '''GitHub '''repository.

This is required since we added the '''GitHub Actions '''file.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Switch to the terminal window.
|| Switch to the terminal window.

Make sure that you are in the''' node-express '''directory in the terminal.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Type '''git pull origin main'''.

Press Enter.
|| Now type '''git space pull space origin space main'''.

Press Enter.

Make sure this is the same directory from which you push the code to the github.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''1 file changed, 26 insertions(+)'''

Highlight '''create mode 100644 .github/workflows/main.yml'''
|| The output shows that our file '''main dot yml''' was fetched.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| Now we will enable the API in our code that is disabled.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Open the file '''app.js '''in the text editor.
|| Open the file '''app dot js '''in the text editor.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''app.get('/quote', async (req, res) => {'''

'''res.send(getRandomQuote());'''

'''})'''
|| We will uncomment this code to enable the API
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Save the file by pressing '''Ctrl '''and '''S '''keys simultaneously.
|| Save the file by pressing '''Ctrl '''and '''S '''keys simultaneously.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| Now we will push the code to '''GitHub'''.

Then, an image will be automatically built by '''GitHub Actions.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Switch to the terminal window.
|| Switch to the terminal window.

Make sure that you are in the''' node-express '''directory .
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Type '''git add . '''and press Enter.
|| Type '''git space add space dot '''and press Enter.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Type '''git commit -m "Enabled API"''' and press Enter.
|| To commit the changes, type the command as shown.

Press Enter
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Type '''git push origin main '''and press '''Enter.'''
|| Type '''git space push space origin space main '''and press '''Enter'''.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''main -> main '''in the command output.
|| Now our code is pushed to '''GitHub.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Switch to the browser tab where '''GitHub '''is open.
|| Switch to the browser tab where '''GitHub '''is open.

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight '''Enabled API''' under '''Actions '''tab.
|| You will see a job workflow run named '''Enabled API, '''shown by the yellow circle'''.'''
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight green tick mark on the left of '''Enabled API.'''
|| The build is completed, which is denoted by the green tick mark
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration
|| Now we will pull the latest image on '''Docker Hub '''with the changes we did.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Switch to the terminal window.
|| Switch to the terminal window.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Type '''sudo docker pull '''['''docker hub username]/node-express:latest'''

Highlight '''[docker hub username]'''

Press Enter.
|| Type the code as shown.

Make sure to type your own '''Docker Hub '''username.

Press Enter.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Enter password for root account and press Enter.
|| Enter password if prompted and press Enter.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Wait for the download to complete.
|| Wait for the download to complete.

It can take some time depending on your internet speed.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Only narration.
|| Let us now run this image.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Type '''sudo docker run -d -p 127.0.0.1:3000:3000 [docker hub username]/node-express:latest'''.

Highlight '''[docker hub username]'''

Press Enter.
|| Type the command as shown.

Make sure to type your own '''Docker Hub '''username

Press Enter.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Open a new browser tab.

Type the address [http://localhost:3000/quotes http://localhost:3000/quote]

Press Enter.
|| Now open a new browser tab and type the address shown.

This is the endpoint of the '''Quotes API '''that we just enabled.

Press Enter.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Highlight the text on the screen.
|| A random quote is displayed.

This confirms that the image was successfully updated in '''Docker Hub'''.
|-
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | Show Slide:

'''Summary'''
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | This brings us to the end of this tutorial. Let us summarise.

In this tutorial, we have learnt how to
* <div style="margin-left:1.27cm;margin-right:0cm;">Setup and configure GitHub </div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Automate Docker builds using GitHub</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Pull and test the built images</div>

|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show Slide: '''About Spoken Tutorial project'''
|| The video at the following link summarizes the '''Spoken Tutorial project'''.

Please download and watch it
|-
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Show Slide: '''Spoken Tutorial Workshops'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The </span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;"> team </span>conducts workshops and gives certificates.

For more details, please write to us.
|- style="background-color:#ffffff;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"
|| Show Slide:

'''Answers for THIS Spoken Tutorial'''
|| Please post your timed queries in this forum.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show Slide: '''FOSSEE Forum'''
|| For any general or technical questions on '''Docker''', visit the FOSSEE forum and post your question.
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Slide: '''Acknowledgement'''

|| Spoken Tutorial Project was established by the Ministry of Education, Government of India
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
|| Show slide:

'''Thank You'''
|| This is Karthik Chandrasekhar, a FOSSEE Semester Long intern 2024, IIT Bombay, signing off.

Thanks for joining.
|-
|}

@@ Line 34: / Line 34: @@
 [https://www.spoken-tutorial.org/ https://www.spoken-tutorial.org]
 || To follow this tutorial,
-* You must have a '''Docker Hub '''account
+* You must have a '''Docker Hub '''account and
 * You must have a '''GitHub''' account
@@ Line 450: / Line 450: @@
 |-
 || Type '''git push origin main '''and press '''Enter.'''
-|| Type '''git space push space origin space main '''and press '''Enter'''.
+||Now type '''git space push space origin space main '''and press '''Enter'''.
 |-
@@ Line 484: / Line 484: @@
 |-
 || Enter password for root account and press Enter.
-|| Enter password if prompted and press Enter.
+||Type your password if prompted and press Enter.
 |-
 || Wait for the download to complete.
@@ Line 501: / Line 501: @@
 || Type the command as shown.
-Make sure to type your own '''Docker Hub '''username
+Make sure to type your own '''Docker Hub ''' username
 Press Enter.
@@ Line 512: / Line 512: @@
 || Now open a new browser tab and type the address shown.
-This is the endpoint of the '''Quotes API '''that we just enabled.
+This is the endpoint of the '''Quotes API ''' that we just enabled.
 Press Enter.
@@ Line 528: / Line 528: @@
 In this tutorial, we have learnt how to
 * Setup and configure GitHub
-* Automate Docker builds using GitHub
+* Automate Docker builds using GitHub and
 * Pull and test the built images

@@ Line 102: / Line 102: @@
 '''GitHub Actions Flowchart'''
 || Then '''GitHub Actions '''will automatically build the image.
-The image will be built everytime code is pushed to '''GitHub'''.
+The image will be built every time code is pushed to '''GitHub'''.
 |-
 || Show slide:

@@ Line 318: / Line 318: @@
 || The '''login-action''' action performs login using the '''username '''and '''access token'''.
 |-
-|| Highlight '''username: ${{ vars.DOCKER_USERNAME }}'''
+|| Highlight username:
 || Then we set the value of the username to '''docker underscore username '''variable'''.'''
 |-
-|| Highlight '''password: ${{ secrets.DOCKERHUB_TOKEN }}'''
+|| Highlight password:
 || Similarly we set the value of the password to '''dockerhub underscore token '''secret.
 |-
@@ Line 341: / Line 341: @@
 || '''Push colon true''' denotes that the image will be pushed to '''Docker Hub.'''
 |-
-|| Highlight '''tags: ${{ vars.DOCKER_USERNAME }}/node-express:latest'''
+|| Highlight tags:
 || The '''tags '''key specifies the tags to be added for locating the image in '''Docker Hub.'''
 |-

@@ Line 40: / Line 40: @@
 |-
 || Show slide:
 '''Code files'''
 ||
@@ Line 63: / Line 64: @@
 |-
-|| Show slide:'''GitHub Actions Flowchartn'''
+|| Show slide:
 || This flowchart shows the process of automating building '''Docker '''images.
@@ Line 74: / Line 77: @@
 Now, we will automate the process using '''GitHub Actions'''.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || The application will run an '''Express web server'''.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || The '''Dockerfile '''will be the same as the one used previously.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || We will push the application code and '''Dockerfile '''to '''GitHub'''.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || Then we will set up '''GitHub Actions '''for building the image.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || Then '''GitHub Actions '''will automatically build the image.
 The image will be built everytime code is pushed to '''GitHub'''.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || The built image will be automatically pushed to '''Docker Hub'''.
 |-
-|| Show slide:'''GitHub Actions Flowchart'''
+|| Show slide:
 || Then the image can be pulled from '''Docker Hub '''and used.
@@ Line 150: / Line 167: @@
 |-
-|| Click on '''Account settings '''in the dropdown menu.
+|| Click on '''Account settings '''in the drop down menu.
 || In the drop down menu, click on '''Account settings '''to open''' '''the '''Settings '''page'''.'''
 |-
@@ Line 165: / Line 182: @@
 || In the '''Access token description '''field, type '''GitHub Actions'''.
 |-
-|| In the '''Access permissions '''dropdown, select '''Read & Write'''
+|| In the '''Access permissions '''drop down, select '''Read & Write'''
-|| In the '''Access permissions '''dropdown, select '''Read and Write'''.
+|| In the '''Access permissions '''drop down, select '''Read and Write'''.
 |-
 || Click on the '''Generate '''button.