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).
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 (