Explore

More detailed worksteps for the CI CD SETUP lab.

1. DONE: Setting Up Git and GitHub Basics Detailed instructions are necessary to guide learners through setting up Git, creating a GitHub account, and initializing a repository. I will outline steps to connect their local project to the GitHub repository, including creating branches and understanding pull requests.

2. DONE: Installing Node.js and TypeScript An overview of installing Node.js (which includes npm) and TypeScript itself is required. This ensures learners can locally compile and test the application before committing their code.

3. Configuring Jest and GitHub Actions I will add explicit steps to configure Jest and establish GitHub Actions, so each commit triggers the CI/CD pipeline.

It will include creating the `.github/workflows` folder with a configuration file for running tests automatically.

4. Submitting Code to GitHub A step-by-step guide on making commits, pushing code, and managing branches will clarify the submission process and set up a foundation for CI/CD practices.

Let us enhance the lab with these sections to ensure a beginner-friendly experience.

1. Setting Up Git and GitHub Basics

Step 1: Install Git First, guide students to download Git from [git-scm.com](https://git-scm.com/) and install it.

Step 2: Create a GitHub Account

If they don’t already have a GitHub account, they should create one at [GitHub](https://github.com/).

Step 3: Create a GitHub Repository

In GitHub:

1. Go to **Repositories** > **New**.

2. Name the repository, e.g., `pokemon-gym`.

3. Initialize it with a `README.md`.

Step 4: Clone the Repository Locally After creating the repository, clone it locally:

At the command terminal: (where to get your clone URL? It will be displayed somewhere in your github repository.

git clone https://github.com/<your-username>/pokemon-gym.git

git clone https://github.com/ProfessorBrownBear/pokemon-gym.git

⁠

https://github.com/ProfessorBrownBear/pokemon-gym.git⁠

⁠

cd pokemon-gym

Step 2: Now create in your new local GIT REPO clone the code to seed into your Pipeline.

Do this as follows:

Starting with this code:

https://coda.io/@peter-sigurdson/typescript-pokemon-application⁠

⁠

or any other code base you wish to CI/CD,

Open Visual Studio Code and make the default directory to be <whatever you used, c:\lab_nov4_devops in my case.

Using the facilities of VSC → procedure to create your code base in your local repository directory.

3. Installing Node.js and TypeScript

Step 1: Install Node.js and npm

Download and install Node.js from [nodejs.org](https://nodejs.org/). This installation will include npm (Node Package Manager).

Step 2: Initialize npm and Install TypeScript

In your Pokemon Project directory → Do these activities:

Run the following in the terminal: npm init -y (this makes your Node code base into a NODE NPM Project) npm install typescript --save-dev npx tsc --init This will create a `tsconfig.json` file, which TypeScript will use for configuration.

⁠

3. Configuring Jest and GitHub Actions

Step 1: Install Jest Run: ```bash npm install --save-dev jest ts-jest @types/jest

Step 2: Configure Jest

Create a `jest.config.ts` file with the following content: ```typescript export default { preset: 'ts-jest', testEnvironment: 'node', };

Step 3: Add a GitHub Actions Workflow File

Create a folder `.github/workflows` and add a file `ci.yml`: ```yaml name: Node.js CI

on: push: branches: [main] pull_request: branches: [main]

jobs: build: runs-on: ubuntu-latest

strategy: matrix: node-version: [14, 16]

steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - run: npm install - run: npm test ```

This file configures GitHub Actions to automatically run tests upon code submissions.

### 4. Submitting Code to GitHub

#### Step 1: Stage and Commit Changes After making changes: ```bash git add . git commit -m "Initial commit with Pokemon Gym app" ```

Step 2: Push Code to GitHub Push the code to the main branch of the repository:

In the terminal window Command Prompt:

git push origin main

Upon pushing, GitHub Actions will automatically trigger, running Jest tests and showing results on the GitHub repository’s Actions tab.

Step 3: Opening a Pull Request (PR) If working in a team, students should: 1. Create a new branch, e.g., `git checkout -b feature/battle-system`. 2. Push to GitHub: `git push origin feature/battle-system`. 3. Open a Pull Request (PR) in GitHub to merge changes into the main branch.

This workflow initiates the CI/CD pipeline, running tests before approving any PRs for merging.

---

### Additional CI/CD and Testing Instructions

- **Understanding Test Failures**: Highlight the importance of observing test outputs on GitHub Actions, understanding failure messages, and making corrections. - **Traceability Matrix**: Introduce them to this Agile concept, where they map each requirement to corresponding test cases, ensuring complete coverage in tests.

This enriched version now prepares learners by covering foundational setup, Git, GitHub, and CI/CD practices, along with explicit instructions for submitting and testing TypeScript code within a Git-based CI/CD pipeline.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.