Explore

TypeScript, Docker, and GITHUB CI CD Mechanics

Your Rapid Skill Deployment Document as a TypeScript Developer.

How to do TypeScript Application Development:

Setup your Tooling Environment:

A. You all now have your own GITHUB Account.

B. Install Node.js :

https://you.com/search?q=install+node.js&cid=c1_36e47b12-30a1-4692-a83b-7adf232256fb&tbm=youchat

C. Install Visual Studio Code as your IDE.

NPMJS.com⁠

: Be familiar with the Libraries here which we will use.

Install Visual Studio Code:

https://code.visualstudio.com⁠

Introduction to Visual Studio Code in CI/CD Pipelines

Visual Studio Code (VS Code) has emerged as a preferred Integrated Development Environment (IDE) for working with Continuous Integration and Continuous Deployment (CI/CD) pipelines. This preference is driven by its versatility, extensive features, and strong community support, making it an ideal choice for developers looking to streamline their development and deployment processes.

#### Key Features of Visual Studio Code

**1. Lightweight and Fast:** VS Code is known for its lightweight nature, which allows developers to quickly open and edit files without the overhead of a full-fledged IDE. This speed is crucial in CI/CD environments where rapid iterations and quick feedback loops are essential.

**2. Integrated Terminal:** The built-in terminal in VS Code enables developers to run scripts, commands, and tools directly within the IDE. This integration simplifies the workflow by allowing users to execute CI/CD commands without switching contexts, enhancing productivity.

**3. Extensions and Customization:** VS Code boasts a rich ecosystem of extensions that can enhance its functionality. Developers can easily integrate tools like Docker, Kubernetes, and various CI/CD services (e.g., Jenkins, GitHub Actions) through extensions, tailoring the IDE to fit their specific needs. This flexibility is vital for adapting to different CI/CD workflows.

**4. Git Integration:** Version control is a cornerstone of CI/CD practices, and VS Code offers seamless Git integration. Developers can manage repositories, stage changes, and resolve merge conflicts directly within the IDE, facilitating a smoother development process and ensuring that code changes are efficiently tracked and deployed.

**5. Debugging Capabilities:** VS Code provides powerful debugging tools that allow developers to troubleshoot their applications effectively. This feature is particularly beneficial in CI/CD pipelines, where identifying and resolving issues quickly can significantly reduce deployment times and improve software quality.

#### Community and Support

**1. Strong Community:** The active community surrounding VS Code contributes to a wealth of resources, tutorials, and forums. This support network is invaluable for developers working with CI/CD pipelines, as they can easily find solutions to common problems and share best practices.

**2. Regular Updates:** Microsoft frequently updates VS Code, introducing new features and improvements based on user feedback. This commitment to continuous improvement ensures that developers have access to the latest tools and technologies, keeping their CI/CD processes up to date.

#### Conclusion

In summary, Visual Studio Code stands out as the preferred IDE for working with CI/CD pipelines due to its

**lightweight design**,

**integrated terminal**,

**extensive extension ecosystem**,

**robust Git integration**, and

**powerful debugging capabilities**.

Coupled with a strong community and regular updates, VS Code provides developers with the tools they need to efficiently manage their development and deployment workflows, making it an essential asset in modern software development practices.

current: → If you want to use the Instructor’s TypeScript code and JSON data schema for our CI CD Pipeline experiments, here is the TS code for the Space Tourism business domain:

⁠

https://github.com/ProfessorBrownBear/ts_college_system⁠

⁠

Using GITHUB Desktop

The workbook includes step-by-step instructions, explanations, and some additional information about working with Git and GitHub.

This workbook covers:

Prerequisites

Installing and setting up GitHub Desktop

Cloning the repository

Exploring the cloned repository

Opening the repository in File Explorer / Finder

Making changes (optional)

Pushing changes (optional)

GitHub Desktop Workbook: Cloning a Repository

Welcome to this comprehensive workbook on using GitHub Desktop to clone a repository.

In this guide, we'll walk through the process of cloning the `ts_college_system` repository from Professor Brown Bear's GitHub account to your local file system.

This workbook is designed for beginners and includes detailed steps with explanations.

## Prerequisites

Before we begin, ensure you have:

1. A GitHub account (if you don't have one, sign up at [github.com](https://github.com))

2. GitHub Desktop installed on your computer (download from [desktop.github.com](https://desktop.github.com))

Step 1: Install and Set Up GitHub Desktop

1. Download GitHub Desktop from [desktop.github.com](https://desktop.github.com)

2. Install the application following the prompts for your operating system

3. Open GitHub Desktop

4. If this is your first time using GitHub Desktop, you'll need to sign in to your GitHub account: - Click on "File" in the top menu - Select "Options" (on Windows) or "Preferences" (on Mac) - Go to the "Accounts" tab - Click "Sign In" and enter your GitHub credentials

Step 2: Clone the Repository

1. In GitHub Desktop, click on "File" in the top menu 2. Select "Clone Repository" 3. In the "Clone a Repository" window, click on the "URL" tab 4. In the "Repository URL or GitHub username and repository" field, paste the following URL: https://github.com/ProfessorBrownBear/ts_college_system 5. Choose the local path where you want to save the repository on your computer - You can use the "Choose..." button to browse and select a folder - Make note of this location as you'll need it later 6. Click the "Clone" button

Step 3: Explore the Cloned Repository

1. After the cloning process is complete, GitHub Desktop will show you the current repository 2. In the left sidebar, you'll see the name of the repository: `ts_college_system` 3. The main panel will show you an overview of the repository, including recent commits

### Step 4: Open the Repository in File Explorer / Finder

1. In GitHub Desktop, click on "Repository" in the top menu 2. Select "Show in Explorer" (on Windows) or "Show in Finder" (on Mac) 3. This will open the folder where you cloned the repository 4. You can now see all the files and folders from the `ts_college_system` repository on your local machine

### Step 5: Make Changes (Optional)

1. Open any file from the repository in a text editor 2. Make some changes to the file and save it 3. Return to GitHub Desktop 4. You'll see the changed file listed in the "Changes" tab 5. Enter a summary of your changes in the "Summary" field (required) 6. Optionally, enter a more detailed description in the "Description" field 7. Click "Commit to main" to commit your changes locally

### Step 6: Push Changes (Optional)

1. After committing changes, click the "Push origin" button in the top right 2. This will sync your local changes with the remote repository on GitHub - Note: You may not have permission to push to Professor Brown Bear's repository. In a real-world scenario, you would typically fork the repository first and push to your own fork.

## Conclusion

Congratulations! You've successfully cloned the `ts_college_system` repository using GitHub Desktop. You now have a local copy of the project on your machine, which you can explore, modify, and use for your coursework.

Remember these key points: - Always pull the latest changes before starting work - Commit your changes frequently with clear, descriptive messages - Push your changes to share them with others (if you have permission)

## Additional Resources

- [GitHub Desktop Documentation](https://docs.github.com/en/desktop) - [Git Handbook](https://guides.github.com/introduction/git-handbook/) - [GitHub Guides](https://guides.github.com/)

Making your own GITHUB REPOSITORY and pushing your changes up:

Running the TypeScript Program files

This lesson builds upon the previous GitHub Desktop workbook and provides a comprehensive guide for students to set up their development environment and start working with TypeScript.

Leveraging TypeScript's rich expressiveness while implementing a CI/CD pipeline for automated build and deployment to a standalone server environment:

focuses entirely on building a CI/CD pipeline for your TypeScript project. This guide covers:

Preparing your TypeScript project for CI/CD

Setting up GitHub Actions with a detailed workflow

Configuring GitHub Secrets for secure deployment

Preparing your server for automated deployments

Implementing Continuous Integration with build and test steps

Implementing Continuous Deployment to automatically update your server

Monitoring and iterating on your pipeline

Best practices for maintaining and improving your CI/CD process

This guide maintains a persistent focus on the CI/CD pipeline, ensuring that your TypeScript project can be automatically built, tested, and deployed with each push to the main branch.

Additional aspect of the CI/CD pipeline we will leverage on further:

Advanced GitHub Actions configurations

strategies for handling different environments (staging vs production)

This approach allows for the full utilization of TypeScript's expressive features while ensuring a smooth, automated pipeline from development to deployment on a server.

# TypeScript Development with CI/CD for Server Deployment

## Introduction

This comprehensive guide focuses on developing a TypeScript project with emphasis on preserving its rich expressiveness, implementing CI/CD practices, and deploying to a standalone run environment on a server. We'll cover the entire workflow from local development to automated deployment.

# Building a CI/CD Pipeline for TypeScript Project

## Introduction

This guide focuses on creating a comprehensive Continuous Integration and Continuous Deployment (CI/CD) pipeline for your TypeScript project. We'll use GitHub Actions to automate the build, test, and deployment processes, ensuring that your TypeScript code is consistently built, tested, and deployed to your server.

## Prerequisites

- A GitHub repository containing your TypeScript project - A server for deployment (e.g., AWS EC2, DigitalOcean Droplet) - Basic familiarity with Git and GitHub

## Step 1: Prepare Your TypeScript Project

Ensure your project has the following:

1. A `package.json` file with build and test scripts:

```json { "scripts": { "build": "tsc", "test": "jest", "start": "node dist/index.js" } } ```

2. A `tsconfig.json` file for TypeScript compilation settings.

3. Jest configuration for testing (if applicable).

## Step 2: Set Up GitHub Actions

1. In your repository, create a new file: `.github/workflows/ci-cd.yml`

2. Add the following content to `ci-cd.yml`:

```yaml name: CI/CD Pipeline

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

jobs: build-and-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v2 with: node-version: '14.x' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Test run: npm test

deploy: needs: build-and-test runs-on: ubuntu-latest if: github.ref == 'refs/heads/main' steps: - uses: actions/checkout@v2 - name: Deploy to Server uses: appleboy/ssh-action@master with: host: ${{ secrets.SERVER_HOST }} username: ${{ secrets.SERVER_USERNAME }} key: ${{ secrets.SERVER_SSH_KEY }} script: | cd /path/to/your/project git pull origin main npm install npm run build pm2 restart your-app-name ```

## Step 3: Configure GitHub Secrets

In your GitHub repository:

1. Go to Settings > Secrets 2. Add the following secrets: - `SERVER_HOST`: Your server's IP address or domain - `SERVER_USERNAME`: SSH username for your server - `SERVER_SSH_KEY`: Your SSH private key for server access

## Step 4: Prepare Your Server

1. Install Node.js, npm, and PM2 on your server.

2. Set up your project on the server:

```bash cd /path/to/your/project git clone https://github.com/your-username/your-repo.git . npm install npm run build pm2 start dist/index.js --name your-app-name ```

## Step 5: Implement Continuous Integration

The `build-and-test` job in your workflow handles CI:

1. It runs on every push and pull request to the `main` branch. 2. Checks out the code, sets up Node.js, installs dependencies. 3. Builds the TypeScript project. 4. Runs tests.

This ensures that every change is built and tested before it can be merged.

## Step 6: Implement Continuous Deployment

The `deploy` job handles CD:

1. It only runs on pushes to the `main` branch, after the `build-and-test` job succeeds. 2. Uses SSH to connect to your server. 3. Pulls the latest changes, installs dependencies, builds the project, and restarts the application.

This automates the deployment process whenever changes are pushed to the main branch.

## Step 7: Monitor and Iterate

1. Check the "Actions" tab in your GitHub repository to monitor your pipeline. 2. Review logs for any failed jobs and address issues promptly. 3. Continuously refine your pipeline: - Add code linting steps - Implement code coverage checks - Add security scanning tools

## Best Practices

1. **Branch Protection**: Set up branch protection rules for your `main` branch to require status checks to pass before merging.

2. **Environment Specific Deployments**: For more complex setups, use GitHub Environments to manage different deployment targets (staging, production).

3. **Caching**: Implement caching of npm packages in your GitHub Actions workflow to speed up builds.

4. **Notifications**: Set up notifications for pipeline failures to alert your team quickly.

5. **Artifact Storage**: Store build artifacts for debugging and rollback purposes.

## Conclusion

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.