Explore

Class Worksheet csd4503 s2 TUE OCT 8

⁠

https://otter.ai/u/XpX9QSW99t90vWeOMfmaeiuTfzQ?utm_source=copy_url⁠

⁠

Ready to continue building on the foundations we’ve established in previous sessions?

Let’s briefly recap the journey so far and set the stage for what we will accomplish today.

Tactical steps:

Get our TypeScript coding running.

Peter will send you a LINK to his GITHUB with the TypeScript code the Space Tourism Agency.

You already did install Nodewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Recap:

Conceptual Understanding:

We began by analyzing the CampusConnect project, a comprehensive campus management system designed to facilitate course registration, grade submission, and user communication.

We explored important Unified Modeling Language (UML) diagrams, such as Use Case Diagrams and Sequence Diagrams, to visually model system interactions.

Requirements Documentation:

We defined system requirements in the form of numbered "Shall Statements" as part of the Unified Process to ensure clarity and traceability of functionalities.

TypeScript Code Design:

Last class, we wrote a complete and functional TypeScript program that models the core interactions within CampusConnect. We implemented:

Course Registration: Where students can register for available courses.

Grade Submission: Where faculty can submit grades for students.

Data Persistence: Using MongoDB to store and retrieve data, ensuring long-term storage for users, courses, and grades.

Today's Objectives:

Today, we will put theory into practice by:

Running the TypeScript Code: We will execute the program we built, ensuring it functions as expected with MongoDB handling the data storage.

Building a CI/CD Pipeline: Once we’ve validated that the system runs successfully, we will take the next step by constructing a Continuous Integration and Continuous Deployment (CI/CD) pipeline. This pipeline will automatically test, build, and deploy our application, streamlining the development process and ensuring rapid and reliable releases.

By the end of today’s class, you will have hands-on experience in:

Running a full-stack TypeScript application.

Automating the deployment process using CI/CD tools, making your code production-ready.

⁠

Let’s proceed with focus and purpose. If you have any questions along the way, feel free to ask, as this process will form a crucial part of your development toolkit moving forward.

Detailed Steps for Building a CI/CD Pipeline: This is your Assignment 1

Once we have validated that the TypeScript and MongoDB-based CampusConnect system is running successfully, the next task is to construct a Continuous Integration/Continuous Deployment (CI/CD) pipeline. This process involves automating key stages of the development cycle—such as testing, building, and deploying the application—so that every change to the codebase is efficiently integrated and deployed. Below are the steps to implement a CI/CD pipeline for our project:

⁠

Step 1: Version Control with Git

Before building the CI/CD pipeline, ensure that the project is under version control with Git. This is crucial because the CI/CD process monitors changes to the code repository (commits) to trigger automated jobs.

Initialize a Git repository (if not done already):

bash

Copy code

git init

Add the project files to the repository:

bash

Copy code

git add .

git commit -m "Initial commit"

Push the repository to a cloud-based Git provider, such as GitHub, GitLab, or Bitbucket:

bash

Copy code

git remote add origin <repository_url>

git push -u origin main

⁠

Step 2: Set Up a CI/CD Tool (GitHub Actions)

For this pipeline, we will use GitHub Actions, but the process is similar for other tools like GitLab CI, Jenkins, or CircleCI.

Navigate to the GitHub repository where your code is stored.

Click on the "Actions" tab to create a new workflow.

Choose a pre-defined workflow (e.g., "Node.js") or create a custom one:

In this case, since we are working with TypeScript and Node.js, select the Node.js CI template to start.

⁠

Step 3: Configure the CI Workflow File

This file defines the steps in the CI pipeline, which includes testing, building, and preparing for deployment.

Create a new workflow configuration file (if not already present) in your repository at .github/workflows/ci-cd-pipeline.yml.

Define the workflow in this file. Below is an example that outlines the basic steps of the CI/CD process:

yaml

Copy code

name: CampusConnect CI/CD Pipeline

on:

push:

branches:

- main

pull_request:

branches:

- main

jobs:

build:

runs-on: ubuntu-latest

steps:

- name: Checkout code

uses: actions/checkout@v2

- name: Set up Node.js

uses: actions/setup-node@v2

with:

node-version: '16'

- name: Install dependencies

run: npm install

- name: Run lint checks

run: npm run lint

- name: Run tests

run: npm test

- name: Build project

run: npm run build

deploy:

needs: build

runs-on: ubuntu-latest

if: github.ref == 'refs/heads/main'

steps:

- name: Deploy to Production

run: |

echo "Deploying the application..."

# Add deployment steps here

Breakdown of the Configuration:

Triggers: The pipeline is triggered on push or pull_request to the main branch.

Build Stage:

Checks out the code.

Installs Node.js and the project's dependencies.

Runs linting to ensure code quality.

Runs unit tests to validate the application's functionality.

Builds the application.

Deployment Stage:

Deploys the built application to the production environment once the build is successful.

⁠

Step 4: Test Automation

The CI pipeline should automatically run your test suite after every commit to ensure that new changes do not break the existing functionality.

In the package.json file, ensure there is a test script defined. For example:

json

Copy code

{

"scripts": {

"test": "jest",

"build": "tsc",

"lint": "eslint . --ext .ts"

}

Make sure that unit tests are written for the core functionalities of your system, such as:

Course Registration

Grade Submission

Data Retrieval

Running the tests automatically in the CI pipeline ensures that any errors in the logic are detected before the code is merged or deployed.

⁠

Step 5: Build Automation

Once tests pass, the system proceeds to the build phase, where the TypeScript code is compiled and prepared for deployment.

Ensure that your tsconfig.json is set up to compile TypeScript to JavaScript. For example:

json

Copy code

{

"compilerOptions": {

"module": "commonjs",

"target": "es6",

"outDir": "./dist",

"rootDir": "./src"

"include": ["src/**/*"]

}

In the CI workflow, the npm run build command will generate the compiled JavaScript files and place them in the dist/ folder.

⁠

Step 6: Add Deployment Automation

Deployment is the last step in the CI/CD pipeline. Here, the newly built application is automatically deployed to the production server or cloud service (e.g., AWS, Heroku).

Integrate the deployment step with a cloud provider (e.g., Heroku, AWS, DigitalOcean) or use Docker to package the application.

Example deployment using Heroku (for simplicity):

Install the Heroku CLI.

Add the following deployment command in your GitHub Actions workflow:

yaml

Copy code

- name: Deploy to Heroku

uses: akhileshns/heroku-deploy@v3.12.12

with:

heroku_api_key: ${{ secrets.HEROKU_API_KEY }}

heroku_app_name: "campusconnect-app"

heroku_email: "your-email@example.com"

Store the Heroku API Key as a secret in your GitHub repository under Settings > Secrets > Actions.

⁠

Step 7: Monitoring and Notifications

Once your CI/CD pipeline is running, you can monitor its status in the GitHub Actions dashboard or any other CI/CD tool you are using.

Notifications can be configured so that the team is alerted when a pipeline fails or completes successfully. For example, set up:

Email notifications

Slack integration for team alerts

⁠

Step 8: Iterate and Optimize

CI/CD pipelines are dynamic and should be regularly optimized. As the project grows, you may need to:

Add more tests (e.g., integration tests, end-to-end tests).

Implement caching in the pipeline to reduce build times (e.g., cache node_modules).

Add additional deployment environments (e.g., staging, production).

⁠

Final Result:

By following these steps, we will have built a robust CI/CD pipeline for the CampusConnect application. Every time a new feature or bug fix is pushed to the main branch, the following will happen:

The code is automatically tested for errors.

If tests pass, the code is built.

After a successful build, the system is automatically deployed to the production environment.

This setup will ensure rapid, reliable, and consistent updates to our application, making development smoother and reducing the risk of errors in production.

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.