### Start PostgreSQL Container Bash Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Starts the PostgreSQL database container defined in the `docker-compose.yml` file. This database is used for persisting application data like canvases and configurations. The `-d` flag runs the container in detached mode. ```bash docker compose up -d postgres ``` -------------------------------- ### Start Coder Container Bash Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Starts the Coder container as defined in the `docker-compose.yml`. Coder provides the backend for creating and managing cloud development environments that are integrated into the pad.ws application. The `-d` flag runs the container in detached mode. ```bash docker compose up -d coder ``` -------------------------------- ### Start Keycloak Container Bash Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Starts the Keycloak container using the configuration in `docker-compose.yml`. Keycloak acts as the OpenID Connect (OIDC) provider for user authentication and management within both Coder and the pad.ws app. The `-d` flag runs the container in detached mode. ```bash docker compose up -d keycloak ``` -------------------------------- ### Start Pad App Container Bash Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Starts the main pad.ws application container using its definition in `docker-compose.yml`. This container serves the frontend and hosts the backend API responsible for integrating with Coder and other services. The `-d` flag runs the container in detached mode. ```bash docker compose up -d pad ``` -------------------------------- ### Initialize Environment File Bash Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Copies the template environment file (`.env.template`) to the actual environment file (`.env`). This is the first step in configuring the application with specific settings. ```bash cp .env.template .env ``` -------------------------------- ### Mutating Workspace State with React Query Hooks (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Provides examples of using the `useStartWorkspace` and `useStopWorkspace` React Query mutation hooks. These hooks are used to trigger actions to start or stop the workspace. The example shows importing the hooks and destructuring the `mutate` function from each for imperative calls. ```typescript import { useStartWorkspace, useStopWorkspace } from "./api/hooks"; const { mutate: startWorkspace } = useStartWorkspace(); const { mutate: stopWorkspace } = useStopWorkspace(); // Usage: startWorkspace(); stopWorkspace(); ``` -------------------------------- ### Update Keycloak Environment Variables Dotenv Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Updates the `.env` file with the Keycloak realm, client ID, and client secret obtained from the Keycloak admin console after setting up the realm and client. These variables are essential for the pad.ws application to connect to Keycloak for authentication. ```dotenv OIDC_REALM=your_oidc_realm OIDC_CLIENT_ID=your_client_id OIDC_CLIENT_SECRET=your_client_secret ``` -------------------------------- ### Get Docker Group ID Bash Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Retrieves the GID (Group ID) of the 'docker' group on the host system. This ID is needed to configure the Coder container with appropriate permissions to interact with the Docker daemon for creating development environments. ```bash getent group docker | cut -d: -f3 ``` -------------------------------- ### Update Coder Organization ID Environment Variable Dotenv Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Configures the `CODER_DEFAULT_ORGANIZATION` in the `.env` file. This specifies the Coder organization under which new workspaces should be created by default. The ID is obtained from the Coder API or UI. ```dotenv CODER_DEFAULT_ORGANIZATION=your_organization_id # Example: 70f6af06-ef3a-4b4c-a663-c03c9ee423bb ``` -------------------------------- ### Update Coder API Key Environment Variable Dotenv Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Adds the `CODER_API_KEY` to the `.env` file. This key is generated within the Coder UI after setting up the administrator user and is used by the pad.ws backend to interact with the Coder API to create and manage workspaces. ```dotenv CODER_API_KEY=your_coder_api_key ``` -------------------------------- ### Update Coder Template ID Environment Variable Dotenv Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Sets the `CODER_TEMPLATE_ID` in the `.env` file. This ID identifies the specific Coder workspace template that pad.ws should use when creating new development environments for users. The ID is obtained from the Coder API or UI. ```dotenv CODER_TEMPLATE_ID=your_coder_template_id # Example: 85fb21ba-085b-47a6-9f4d-94ea979aaba9 ``` -------------------------------- ### Update Docker Group ID Environment Variable Dotenv Source: https://github.com/pad-ws/pad.ws/blob/main/README.md Sets the `DOCKER_GROUP_ID` environment variable in the `.env` file. This value, obtained from the previous command, grants the Coder container necessary permissions to manage Docker containers for user workspaces. ```dotenv DOCKER_GROUP_ID=your_docker_group_id ``` -------------------------------- ### Polling Workspace State with React Query Hook (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Illustrates fetching and polling the workspace state using the `useWorkspaceState` React Query hook. This hook is configured to poll the state every 5 seconds. The example imports the hook and destructures the state data, loading status, and error. ```typescript import { useWorkspaceState } from "./api/hooks"; const { data: workspaceState, isLoading, error } = useWorkspaceState(); ``` -------------------------------- ### Saving Canvas Data with React Query Hook (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Demonstrates saving canvas data using the `useSaveCanvas` React Query mutation hook. This hook is used to send canvas data to the backend. The example shows importing the hook and destructuring the `mutate` function (`saveCanvas`) which is then called with the canvas data. ```typescript import { useSaveCanvas } from "./api/hooks"; const { mutate: saveCanvas } = useSaveCanvas(); // Usage: saveCanvas(canvasData); ``` -------------------------------- ### Handling React Query Hook Errors (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Illustrates accessing and checking the `error` property provided by React Query hooks. This property indicates if an error occurred during the data fetch or mutation. The example shows how to check the error state and conditionally display UI, such as an error message or fallback content. ```typescript const { data, error, isLoading } = useWorkspaceState(); if (error) { /* Show error UI */ } ``` -------------------------------- ### Fetching User Profile with React Query Hook (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Shows how to fetch the authenticated user's profile data using the `useUserProfile` React Query hook. It imports the hook and destructures `data` (aliased as `userProfile`), `isLoading`, and `error` for handling different states in the UI. ```typescript import { useUserProfile } from "./api/hooks"; const { data: userProfile, isLoading, error } = useUserProfile(); ``` -------------------------------- ### Loading Canvas Data with React Query Hooks (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Shows how to load canvas data using the `useCanvas` hook and fall back to default data if the user's canvas isn't available or an error occurs, using `useDefaultCanvas`. The `useDefaultCanvas` hook is conditionally enabled based on the `isError` status of the `useCanvas` hook. ```typescript import { useCanvas, useDefaultCanvas } from "./api/hooks"; const { data: canvasData, isError } = useCanvas(); const { data: defaultCanvasData } = useDefaultCanvas({ enabled: isError }); ``` -------------------------------- ### Checking Authentication Status with React Query Hook (TypeScript) Source: https://github.com/pad-ws/pad.ws/blob/main/docs/frontend-backend-communication.md Demonstrates using the `useAuthCheck` React Query hook to determine if a user is authenticated. It imports the hook and destructures the `data` property, defaulting it to `true`. The result `isAuthenticated` is used to control UI elements like the login modal. ```typescript import { useAuthCheck } from "./api/hooks"; const { data: isAuthenticated = true } = useAuthCheck(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.