search

freeCodeCamp / classroom

BSD 3-Clause "New" or "Revised" License
144 stars 121 forks source link

build(.devcontainer): install psql, clarify steps #396

Closed lloydchang closed 1 year ago

lloydchang commented 1 year ago

Checklist:

Closes #395

Relates to https://github.com/freeCodeCamp/classroom/pull/390 https://github.com/freeCodeCamp/classroom/pull/385 https://github.com/freeCodeCamp/classroom/issues/411 https://github.com/freeCodeCamp/classroom/pull/412 and https://github.com/freeCodeCamp/classroom/pull/436

lloydchang commented 1 year ago

The ci error is unrelated to this https://github.com/freeCodeCamp/classroom/pull/396

The error :x: Classroom ci / Build and test (16.14.2) (pull_request) Failing after 40s is caused by https://github.com/freeCodeCamp/classroom/commit/50efb20c9be8b07af0c9730a9270896fd2ed3e48 and https://github.com/freeCodeCamp/classroom/pull/366

Details:

The error in https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396

FAIL __tests__/components/dashtable_v2.test.jsx
  ● GlobalDashboardTable › renders dashtable with correct data format

    expect(received).toMatchSnapshot()

    Snapshot name: `GlobalDashboardTable renders dashtable with correct data format 1`

    - Snapshot  - 10
    + Received  + 10

    @@ -45,47 +45,47 @@
            >
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 20%;"
              >
    -           student[A]@gmail.com
    +           email
              </td>
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 10%;"
              >
                <div
                  class="bg-red-600 h-5 w-5"
                  style="margin: auto;"
    -             title="Last completion time: 9/17/2018, 6:01:46 PM"
    +             title="Last completion time: 1/1/1970, [12](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:13):00:00 AM"
                />
              </td>
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 20%;"
              >
                <div>
                  <label>
    -               5
    +               0
                    /
                    6

                  </label>
                  <meter
                    id="progress"
                    max="6"
                    min="0"
    -               value="5"
    +               value="0"
                  />
                </div>
              </td>
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 50%;"
              >
                <a
    -             href="/dashboard/v2/details/cljbqrfoa0006kohk894ym6v3/student[A]@gmail.com"
    +             href="/dashboard/v2/details/cljbqrfoa0006kohk894ym6v3/email"
                >

                  details

                </a>
    @@ -96,47 +96,47 @@
            >
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 20%;"
              >
    -           student[B]@gmail.com
    +           email
              </td>
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 10%;"
              >
                <div
                  class="bg-red-600 h-5 w-5"
                  style="margin: auto;"
    -             title="Last completion time: 2/[13](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:14)/1973, 10:50:43 AM"
    +             title="Last completion time: 1/1/1970, 12:00:00 AM"
                />
              </td>
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 20%;"
              >
                <div>
                  <label>
    -               3
    +               0
                    /
                    6

                  </label>
                  <meter
                    id="progress"
                    max="6"
                    min="0"
    -               value="3"
    +               value="0"
                  />
                </div>
              </td>
              <td
                role="cell"
                style="padding: 10px; border: 1px solid grey; text-align: center; width: 50%;"
              >
                <a
    -             href="/dashboard/v2/details/cljbqrfoa0006kohk894ym6v3/student[B]@gmail.com"
    +             href="/dashboard/v2/details/cljbqrfoa0006kohk894ym6v3/email"
                >

                  details

                </a>

      [16](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:17) |     );
      [17](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:18) |
    > [18](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:19) |     expect(container).toMatchSnapshot();
         |                       ^
      [19](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:20) |   });
      [20](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:21) | });
      [21](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:22) |

      at Object.toMatchSnapshot (__tests__/components/dashtable_v2.test.jsx:18:[23](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:24))

 › 1 snapshot failed.
PASS __tests__/components/navbar.test.jsx

Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or run `npm test -- -u` to update them.

Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 4 passed, 5 total
Snapshots:   1 failed, 1 passed, 2 total
Time:        1.8[56](https://github.com/freeCodeCamp/classroom/actions/runs/5673041529/job/15373613024?pr=396#step:6:57) s
Ran all test suites matching /./i.
Error: Process completed with exit code 1.

is caused by https://github.com/freeCodeCamp/classroom/commit/50efb20c9be8b07af0c9730a9270896fd2ed3e48 and https://github.com/freeCodeCamp/classroom/pull/366

lloydchang commented 1 year ago

Cross-posted in https://github.com/freeCodeCamp/classroom/pull/390#issuecomment-1654928638 https://github.com/freeCodeCamp/classroom/pull/396#issuecomment-1654929232

Originally posted at https://github.com/freeCodeCamp/classroom/pull/385#issuecomment-1652379813

@ngillux @utsab If this needs to be clarified live, we can schedule a call to discuss it further. Thanks!

This sudo service postgresql start manual step is redundant because there is already a db container that runs PostgreSQL on TCP port 5432, so there isn't a need to start the PostgreSQL service inside the app container.

There are two containers simultaneously running in GitHub Codespaces:

  1. app container
  2. db container

The app container is configured in the top part of the .devcontainer/docker-compose.yml file via: https://github.com/freeCodeCamp/classroom/blob/main/.devcontainer/docker-compose.yml#L1-L30

# https://github.com/microsoft/vscode-dev-containers/blob/main/containers/javascript-node-postgres/.devcontainer/docker-compose.yml

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        # Update 'VARIANT' to pick an LTS version of Node.js: 20, 18, 16, 20-bookworm, 18-bookworm, 16-bookworm 20-bullseye, 18-bullseye, 16-bullseye, 20-buster, 18-buster, 16-buster
        # Append -bullseye or -buster to pin to an OS version.
        # Use -bookworm, and -bullseye variants on local arm64/Apple Silicon.
        VARIANT: 20-bookworm

    volumes:
      - ..:/workspace:cached

    # Overrides default command so things don't shut down after the process ends.
    command: sleep infinity

    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
    network_mode: service:db

    # Uncomment the next line to use a non-root user for all processes.
    # user: node

    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
    # (Adding the "ports" property to this file will not forward from a Codespace.)

The db container is configured in the bottom part of the .devcontainer/docker-compose.yml file via: https://github.com/freeCodeCamp/classroom/blob/main/.devcontainer/docker-compose.yml#L31-L45

  db:
    image: postgres:latest
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_USER: postgres
      POSTGRES_DB: postgres

    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
    # (Adding the "ports" property to this file will not forward from a Codespace.)

volumes:
  postgres-data:

and its TCP 5432 port is forwarded to the app container via https://github.com/freeCodeCamp/classroom/blob/main/.devcontainer/devcontainer.json#L36-L38

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // This can be used to network with other containers or with the host.
    "forwardPorts": [3000, 3001, 5432, 5555],

To recap: If this needs to be clarified live, we can schedule a call to discuss it further. Thanks!

Relates to https://github.com/freeCodeCamp/classroom/pull/390 and https://github.com/freeCodeCamp/classroom/issues/395

lloydchang commented 1 year ago

Relates to https://github.com/freeCodeCamp/classroom/pull/390

Specifically: • https://github.com/freeCodeCamp/classroom/pull/390/files#r1271652918 • https://github.com/freeCodeCamp/classroom/pull/390/files#r1271653384

lloydchang commented 1 year ago

Please contact @GuillermoFloresV if you have further questions about this. Thanks!