MyWebClass Simulation Setup and Deployment

This guide provides instructions on how to set up the MyWebClass Simulation project locally in PyCharm and deploy it to GitHub Pages.

Prerequisites

Please ensure that you have the required software installed on your computer before proceeding:

• GitHub: a code hosting platform for version control and collaboration
• Git: a version control system
• PyCharm: an integrated development environment (IDE) for writing and running Python code
• Node.js: a JavaScript runtime that includes npm, a package manager for installing dependencies and running Playwright Test

Installation and Local Setup

To install and run the MyWebClass-simulation project, please follow these steps:

1. Clone the project repository from GitHub using the SSH link provided.

2. Open PyCharm and create a new project from the cloned repository by clicking on "Get from VCS", pasting the SSH link, and cloning the repository.

3. Install npm dependencies by opening a terminal window in PyCharm (View > Tool Windows > Terminal) and typing the following command: I've rewritten the instructions to include the steps you provided. The updated content combines both the deployment and development server setup instructions into a single file.

Create a new file called INSTRUCTIONS.md in your project's root directory and add the following content:

sql Copy code

MyWebClass Simulation Setup and Deployment

This guide provides instructions on how to set up the MyWebClass Simulation project locally in PyCharm and deploy it to GitHub Pages.

Prerequisites

Please ensure that you have the required software installed on your computer before proceeding:

• GitHub: a code hosting platform for version control and collaboration
• Git: a version control system
• PyCharm: an integrated development environment (IDE) for writing and running Python code
• Node.js: a JavaScript runtime that includes npm, a package manager for installing dependencies and running Playwright Test

Installation and Local Setup

To install and run the MyWebClass-simulation project, please follow these steps:

1. Clone the project repository from GitHub using the SSH link provided.

2. Open PyCharm and create a new project from the cloned repository by clicking on "Get from VCS", pasting the SSH link, and cloning the repository.

3. Install npm dependencies by opening a terminal window in PyCharm (View > Tool Windows > Terminal) and typing the following command: npm install

4. Start npm by typing the following command: npm start

This will start the local server and open the project in your default browser at http://localhost:3000/.

5. Install Playwright by typing the following command: npx install playwright

6. To record a Playwright test, start a Chromium window by typing the following command: npx playwright codegen localhost:3000

Setting Up the Development Server

Enable GitHub Pages in your repository settings:

5.1. Go to the repository's settings page on GitHub (https://github.com/tawana0518/mywebclass-simulation/settings).

5.2. Scroll down to the "GitHub Pages" section.

5.3. Under Build and Deployment, set the Source to GitHub Actions.

By following these updated steps, you'll provide comprehensive instructions for setting up your project locally in PyCharm, running Playwright tests, and deploying it to GitHub Pages.

Deploy to GitHub Pages using GitHub Actions

1. Create a .github/workflows directory in your project's root directory, if it doesn't already exist:

mkdir -p .github/workflows

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 14

    - name: Install dependencies
      run: npm ci

    - name: Build the project
      run: npm run build

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist
git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow for deploying to GitHub Pages"
git push

Rerun a GitHub Workflow under Action to deploy the website.