About the presenter

Presenter Name

☁️ Presenter Title

For questions or help with this series: msusdev@microsoft.com

All demos and source code available on GitHub:

github.com/msusdev/end-to-end-ci-cd

Series road map

  • Session 1:
    • Introduction to GitHub Actions
  • Session 2:
    • ↪️ Automatically build and test your code with GitHub Actions
  • Session 3:
    • Deploy your code to Azure with GitHub Actions

Today’s agenda

  • Review GitHub Actions
  • Automate build for a web app

::: notes

We’ll show you how to implement continuous integration (CI) for code maintained in GitHub repositories. You’ll learn to:

  • Build a project in a workflow
  • Create build assets for deployment
  • Distribute builds as packages

:::

Review: GitHub Actions

::: notes

  1. Create a GitHub repository with a single README file

  2. Use Visual Studio Code to create a simple node project:

     node_modules/
 package-lock.json

     {
   "name": "simple",
   "main": "app.js"
 }

     npm install --save moment

     console.log('Hello, world!');
    
 var moment = require('moment');
 var date = moment().format('LL');
 console.log(date);

    Note: You can use GitHub Codespaces to perform this task quickly.

  3. Create a .github/workflows/build.yml file.

    Note: The name of this file is arbitrary. For the remainder of this demo, we will assume you named this file build.yml.

  4. In the build.yml file, add and validate:

     name: Node Continuous Integration
 on: push
 jobs:
   build-node:
     name: Build Node
     runs-on: ubuntu-latest
     container: node:14
     steps:
       - run: node --version
         name: Check Node Version
       - run: npm --version
         name: Check NPM Version
       - uses: actions/checkout@v2
         name: Checkout Code
       - run: npm install
         name: Install NPM Packages
       - run: node app.js
         name: Run Application

:::

Demo: Automate Build

::: notes

  1. Create a GitHub repository using the msusdev-examples/contoso-spaces-next-web-app template.

  2. Test the web app using the following commands:

     npm install
 npm run dev

    Note: You can use GitHub Codespaces to perform this task quickly.

  3. Terminate the running dev command.

  4. Observe the scripts.build property of the package.json file.

  5. Create a .github/workflows/integration.yml file.

    Note: The name of this file is arbitrary. For the remainder of this demo, we will assume you named this file integration.yml.

  6. In the integration.yml file, create a build job and validate:

     name: Build Next.js web application
 on: push
 jobs:
   build-project:
     name: Build Project
     runs-on: ubuntu-latest
     steps:
     - name: Checkout code
       uses: actions/checkout@v2
     - name: Install NPM dependencies
       run: npm install
     - name: Build project assets
       run: npm run build

  7. Upload an artifact and validate:

     ...
 - name: Upload static site
   uses: actions/upload-artifact@v2
   with:
     name: static-site
     path: .next/

  8. Create a release job and validate:

     ...
 release-project:
   name: Release Project
   runs-on: ubuntu-latest
   needs: build-project

  9. Download an artifact in the release job and validate:

     ...
 steps:
 - name: Download site content
   uses: actions/download-artifact@v2
   with:
     name: static-site

  10. View the contents of the artifact and validate:

     ...
 - name: View content
   run: ls -R

  11. Compress the folder and validate:

     - name: Archive site content
   uses: thedoctor0/zip-release@master
   with:
     filename: site.zip

  12. Create a GitHub release and validate:

     - name: Create GitHub release
   uses: actions/create-release@v1
   env:
     GITHUB_TOKEN: $
   with:
     tag_name: $
     release_name: Release $

  13. Upload the final asset to release and validate:

     - name: Create GitHub release
   id: create-new-release
   uses: actions/create-release@v1
   env:
     GITHUB_TOKEN: $
   with:
     tag_name: $
     release_name: Release $
 - name: Upload release asset
   uses: actions/upload-release-asset@v1
   env:
     GITHUB_TOKEN: $
   with:
     upload_url: $
     asset_path: ./site.zip
     asset_name: site-v$.zip
     asset_content_type: application/zip

:::

Reviewing today’s session

  • Review GitHub Actions
  • Automate build for a web app

Microsoft Learn

Thank You! Questions?