helixml / live-coding

Deployment and Continuous Integration

This section outlines the deployment and continuous integration setup for the live coding demo project.

Overview

The project leverages GitHub Actions for continuous integration and deployment. This workflow automatically builds, tests, and deploys the code whenever changes are pushed to the repository. The following diagram illustrates the flow:

              +-----------------+
                        |  GitHub Actions  |
                        +-----------------+
                            |
                            | Code Changes
                            |
                            v
                        +-----------------+
                        |   Build & Test   |
                        +-----------------+
                            |
                            | Success
                            |
                            v
                        +-----------------+
                        | Deployment Stage |
                        +-----------------+
                            |
                            | Deploy to Server
                            |
                            v
                        +-----------------+
                        |    Live Demo    |
                        +-----------------+

Steps:

  • Code Changes: When code changes are pushed to the repository, GitHub Actions triggers the workflow.
  • Build & Test: The workflow builds the project, runs unit tests, and performs code linting.
  • Deployment Stage: If the tests are successful, the workflow proceeds to the deployment stage, where the code is deployed to the live demo server.
  • Live Demo: The deployed code is now accessible on the live demo website.

Configuration

The deployment configuration is defined in the .github/workflows/main.yml file. This file specifies the steps involved in the workflow. Here’s a breakdown of the file structure:

name: CI/CD
          
          on:
            push:
              branches:
                - main
          
          jobs:
            build:
              runs-on: ubuntu-latest
              steps:
                - uses: actions/checkout@v2
                - name: Setup Node.js
                  uses: actions/setup-node@v2
                  with:
                    node-version: 16
                - run: npm install
                - run: npm test
                - name: Deploy to Netlify
                  uses: netlify/actions/deploy@v1
                  with:
                    site_id: YOUR_SITE_ID
                    auth_token: ${{ secrets.NETLIFY_AUTH_TOKEN }}

Configuration Options:

  • name: This defines the name of the workflow.
  • on: This determines the events that trigger the workflow. In this case, the workflow is triggered by a push to the main branch.
  • jobs: This section defines the jobs that are executed by the workflow.
  • build: This job defines the steps for building, testing, and deploying the code.
  • runs-on: This specifies the operating system used to execute the job.
  • steps: This defines the steps executed by the job.
  • actions/checkout@v2: This action checks out the repository code.
  • actions/setup-node@v2: This action sets up the Node.js environment.
  • npm install: This step installs the project dependencies.
  • npm test: This step runs the project’s unit tests.
  • netlify/actions/deploy@v1: This action deploys the project to Netlify.
  • site_id: This defines the Netlify site ID for deployment.
  • auth_token: This provides the Netlify authentication token for deployment.

Important Notes:

  • Secrets: The Netlify authentication token is stored as a secret in GitHub. This ensures that the token is not exposed in the public repository.
  • Environment Variables: The site_id and auth_token can be defined as environment variables for easier management and security.
  • Customization: The deployment workflow can be further customized to meet specific project requirements, such as including code quality analysis, integration with other tools, or deployment to different platforms.

Example Deployments

The following examples illustrate the deployment options available:

  • Netlify: This is the default deployment platform for the live coding demo. The netlify/actions/deploy@v1 action is used for deploying the code to a Netlify site.
  • Vercel: The project can be deployed to Vercel using the vercel/vercel-action@v1 action.
  • GitHub Pages: The project can be deployed to GitHub Pages using the actions/deploy-pages@v1 action.

The choice of deployment platform depends on the project’s needs and preferences.

Source:

References: