PNChat Project - danganhphu

Built With

• 

Angular Github Actions

1. Let's create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

ng new pn-chat-client
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
/*
.....
*/
✔ Packages installed successfully.
    Successfully initialized git.

2. Change the package.json file and add the scripts below. Replace the danganhphu value with your GitHub username.

  "build:prod": "ng build --configuration production --source-map",
  "test:headless": "ng test --watch=false --browsers=ChromeHeadless"

3. Run the test with the command below.

npm run test:headless

> [email protected] test:headless
> ng test --watch=false --browsers=ChromeHeadless

4. Run the application with the command below. Access the URL http://localhost:4200/ and check if the application is working.

npm start

> [email protected] start
> ng serve
/*
....
*/
✔ Browser application bundle generation complete.
✔ Compiled successfully.

5. Build the application with the command below.

npm run build:prod

> [email protected] build:prod
> ng build --configuration production --source-map

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

/*
.........
.........
*/

Build at: 2021-09-23T01:22:35.870Z - Hash: 3a09fd924c26cb02fafc - Time: 13654ms

6. Let's create and configure the file with the GitHub Actions flow. Create the .github/workflows/gh-pages.yml file.

mkdir -p .github/workflows
touch .github/workflows/gh-pages.yml

7. Configure the .github/workflows/gh-pages.yml file with the content below.

name: GitHub Pages

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm run test:headless

    - name: Build
      run: npm run build:prod

    - name: Deploy
      if: success()
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: dist/pn-chat-client
        enable_jekyll: true

Cloning the application

1. Clone the repository.

git clone https://github.com/danganhphu/PN-Chat.git

2. Install the dependencies.

npm ci

3. Run the application.

npm start