diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000000..0ef78f43dc --- /dev/null +++ b/.dockerignore @@ -0,0 +1,25 @@ +node_modules +npm-debug.log +Dockerfile +.git +.gitignore +.env +.env.* +dist +coverage +.nyc_output +*.md +.github +tests +__tests__ +*.test.* +*.spec.* +# Development files +*.log +*.lock +.DS_Store +.idea +.vscode +# Build artifacts +build +out \ No newline at end of file diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 0cb1b76ee4..7eb62357c1 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -46,7 +46,7 @@ jobs: - name: Check formatting if: steps.changed-files.outputs.only_changed != 'true' run: npm run format:check - + - name: Run formatting if check fails if: failure() run: npm run format @@ -57,10 +57,10 @@ jobs: - name: Check for linting errors in modified files if: steps.changed-files.outputs.only_changed != 'true' - env: + env: CHANGED_FILES: ${{ steps.changed_files.outputs.all_changed_files }} run: npx eslint ${CHANGED_FILES} && python .github/workflows/eslint_disable_check.py - + - name: Check for TSDoc comments run: npm run check-tsdoc # Run the TSDoc check script @@ -89,7 +89,7 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 - + - name: Get Changed Unauthorized files id: changed-unauth-files uses: tj-actions/changed-files@v40 @@ -123,10 +123,10 @@ jobs: ISSUE_GUIDELINES.md PR_GUIDELINES.md README.md - + - name: List all changed unauthorized files if: steps.changed-unauth-files.outputs.any_changed == 'true' || steps.changed-unauth-files.outputs.any_deleted == 'true' - env: + env: CHANGED_UNAUTH_FILES: ${{ steps.changed-unauth-files.outputs.all_changed_files }} run: | for file in ${CHANGED_UNAUTH_FILES}; do @@ -147,14 +147,14 @@ jobs: uses: tj-actions/changed-files@v40 - name: Echo number of changed files - env: + env: CHANGED_FILES_COUNT: ${{ steps.changed-files.outputs.all_changed_files_count }} run: | echo "Number of files changed: $CHANGED_FILES_COUNT" - name: Check if the number of changed files is less than 100 if: steps.changed-files.outputs.all_changed_files_count > 100 - env: + env: CHANGED_FILES_COUNT: ${{ steps.changed-files.outputs.all_changed_files_count }} run: | echo "Error: Too many files (greater than 100) changed in the pull request." @@ -194,15 +194,15 @@ jobs: - name: Install Dependencies run: npm install - + - name: Get changed TypeScript files id: changed-files uses: tj-actions/changed-files@v40 - + - name: Run tests if: steps.changed-files.outputs.only_changed != 'true' - run: npm run test -- --watchAll=false --coverage - + run: npm run test -- --watchAll=false --coverage + - name: TypeScript compilation for changed files run: | for file in ${{ steps.changed-files.outputs.all_files }}; do @@ -210,7 +210,7 @@ jobs: npx tsc --noEmit "$file" fi done - + - name: Present and Upload coverage to Codecov as ${{env.CODECOV_UNIQUE_NAME}} uses: codecov/codecov-action@v4 with: @@ -222,7 +222,7 @@ jobs: - name: Test acceptable level of code coverage uses: VeryGoodOpenSource/very_good_coverage@v2 with: - path: "./coverage/lcov.info" + path: './coverage/lcov.info' min_coverage: 95.0 Graphql-Inspector: @@ -240,19 +240,75 @@ jobs: - name: resolve dependency run: npm install -g @graphql-inspector/cli - + - name: Clone API Repository run: | # Retrieve the complete branch name directly from the GitHub context FULL_BRANCH_NAME=${{ github.base_ref }} echo "FULL_Branch_NAME: $FULL_BRANCH_NAME" - + # Clone the specified repository using the extracted branch name - git clone --branch $FULL_BRANCH_NAME https://github.com/PalisadoesFoundation/talawa-api && ls -a + git clone --branch $FULL_BRANCH_NAME https://github.com/PalisadoesFoundation/talawa-api && ls -a - name: Validate Documents run: graphql-inspector validate './src/GraphQl/**/*.ts' './talawa-api/schema.graphql' + Docker-Start-Check: + name: Check if Talawa Admin app starts in Docker + runs-on: ubuntu-latest + needs: [Code-Quality-Checks, Test-Application] + if: github.actor != 'dependabot' + steps: + - name: Checkout the Repository + uses: actions/checkout@v4 + + - name: Set up Docker + uses: docker/setup-buildx-action@v3 + with: + driver-opts: | + image=moby/buildkit:latest + + - name: Build Docker image + run: | + set -e + echo "Building Docker image..." + docker build -t talawa-admin-app . + echo "Docker image built successfully" + + - name: Run Docker Container + run: | + set -e + echo "Started Docker container..." + docker run -d --name talawa-admin-app-container -p 4321:4321 talawa-admin-app + echo "Docker container started successfully" + + - name: Check if Talawa Admin App is running + run: | + timeout="${HEALTH_CHECK_TIMEOUT:-120}" + echo "Starting health check with ${timeout}s timeout" + while ! nc -z localhost 4321 && [ $timeout -gt 0 ]; do + sleep 1 + + timeout=$((timeout-1)) + if [ $((timeout % 10)) -eq 0 ]; then + echo "Still waiting for app to start... ${timeout}s remaining" + fi + done + + if [ $timeout -eq 0 ]; then + echo "Timeout waiting for application to start" + echo "Container logs:" + docker logs talawa-admin-app-container + exit 1 + fi + echo "Port check passed, verifying health endpoint..." + + - name: Stop Docker Container + if: always() + run: | + docker stop talawa-admin-app-container + docker rm talawa-admin-app-container + Check-Target-Branch: if: ${{ github.actor != 'dependabot[bot]' }} name: Check Target Branch diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000000..6b13a712b7 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,15 @@ +FROM node:20.10.0 AS build + +WORKDIR /usr/src/app + +COPY package*.json ./ + +RUN npm install + +COPY . . + +RUN npm run build + +EXPOSE 4321 + +CMD ["npm", "run", "serve"] \ No newline at end of file diff --git a/INSTALLATION.md b/INSTALLATION.md index 5813b7d1cb..3c09f69e33 100644 --- a/INSTALLATION.md +++ b/INSTALLATION.md @@ -13,25 +13,9 @@ This document provides instructions on how to set up and start a running instanc - [Install node.js](#install-nodejs) - [Install TypeScript](#install-typescript) - [Install Required Packages](#install-required-packages) -- [Configuration](#configuration) - - [Creating .env file](#creating-env-file) - - [Setting up PORT in .env file](#setting-up-port-in-env-file) - - [Setting up REACT_APP_TALAWA_URL in .env file](#setting-up-react_app_talawa_url-in-env-file) - - [Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file](#setting-up-react_app_backend_websocket_url-in-env-file) - - [Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file](#setting-up-react_app_recaptcha_site_key-in-env-file) - - [Setting up Compiletime and Runtime logs](#setting-up-compiletime-and-runtime-logs) -- [Post Configuration Steps](#post-configuration-steps) - - [Running Talawa-Admin](#running-talawa-admin) - - [Accessing Talawa-Admin](#accessing-talawa-admin) - - [Talawa-Admin Registration](#talawa-admin-registration) - - [Talawa-Admin Login](#talawa-admin-login) -- [Testing](#testing) - - [Running tests](#running-tests) - - [Debugging tests](#debugging-tests) - - [Linting code files](#linting-code-files) - - [Husky for Git Hooks](#husky-for-git-hooks) - - [pre-commit hook](#pre-commit-hook) - - [post-merge hook](#post-merge-hook) +- [Installation using Docker](#installation-using-docker) + - [Prerequisites](#prerequisites-1) + - [Development Setup](#development-setup) @@ -145,15 +129,47 @@ npm install The prerequisites are now installed. The next step will be to get the app up and running. +# Installation using Docker + +## Prerequisites + +1. Install Docker on your system: + - [Docker Desktop for Windows/Mac](https://www.docker.com/products/docker-desktop) + - [Docker Engine for Linux](https://docs.docker.com/engine/install/) + +### Development Setup + +If you prefer to use Docker, you can install the app using the following command: + +1. Create a `.env` file as described in the Configuration section + +2. Build the Docker Image: + +Run the following command to build the Docker image: + +````bash +docker build -t talawa-admin . +```bash + +3. Run the Docker container: + +After the build is complete, run the Docker container using this command: + +```bash +docker run -p 4321:4321 talawa-admin +```bash + +The application will be accessible at `http://localhost:4321` + # Configuration It's important to configure Talawa-Admin. Here's how to do it. You can use our interactive setup script for the configuration. Use the following command for the same. -``` +```bash npm run setup -``` +```bash All the options in "setup" can be done manually as well and here's how to do it. - [Creating .env file](#creating-env-file) @@ -161,8 +177,10 @@ All the options in "setup" can be done manually as well and here's how to do it. A file named .env is required in the root directory of talawa-admin for storing environment variables used at runtime. It is not a part of the repo and you will have to create it. For a sample of `.env` file there is a file named `.env.example` in the root directory. Create a new `.env` file by copying the contents of the `.env.example` into `.env` file. Use this command: -``` +```` + cp .env.example .env + ``` This `.env` file must be populated with the following environment variables for `talawa-admin` to work: @@ -186,19 +204,25 @@ Add a custom port number for Talawa-Admin development purposes to the variable n Add the endpoint for accessing talawa-api graphql service to the variable named `REACT_APP_TALAWA_URL` in the `.env` file. ``` + REACT_APP_TALAWA_URL="http://API-IP-ADRESS:4000/graphql/" + ``` If you are a software developer working on your local system, then the URL would be: ``` + REACT_APP_TALAWA_URL="http://localhost:4000/graphql/" + ``` If you are trying to access Talawa Admin from a remote host with the API URL containing "localhost", You will have to change the API URL to ``` + REACT_APP_TALAWA_URL="http://YOUR-REMOTE-ADDRESS:4000/graphql/" + ``` ## Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file @@ -206,19 +230,25 @@ REACT_APP_TALAWA_URL="http://YOUR-REMOTE-ADDRESS:4000/graphql/" The endpoint for accessing talawa-api WebSocket graphql service for handling subscriptions is automatically added to the variable named `REACT_APP_BACKEND_WEBSOCKET_URL` in the `.env` file. ``` + REACT_APP_BACKEND_WEBSOCKET_URL="ws://API-IP-ADRESS:4000/graphql/" + ``` If you are a software developer working on your local system, then the URL would be: ``` + REACT_APP_BACKEND_WEBSOCKET_URL="ws://localhost:4000/graphql/" + ``` If you are trying to access Talawa Admin from a remote host with the API URL containing "localhost", You will have to change the API URL to ``` + REACT_APP_BACKEND_WEBSOCKET_URL="ws://YOUR-REMOTE-ADDRESS:4000/graphql/" + ``` For additional details, please refer the `How to Access the Talawa-API URL` section in the INSTALLATION.md file found in the [Talawa-API repo](https://github.com/PalisadoesFoundation/talawa-api). @@ -238,7 +268,9 @@ If you want to setup Google reCAPTCHA now, you may refer to the `RECAPTCHA` sect Copy/paste this `reCAPTCHA site key` to the variable named `REACT_APP_RECAPTCHA_SITE_KEY` in `.env` file. ``` + REACT_APP_RECAPTCHA_SITE_KEY="this_is_the_recaptcha_key" + ``` ## Setting up Compiletime and Runtime logs @@ -254,7 +286,9 @@ It's now time to start Talawa-Admin and get it running Run the following command to start `talawa-admin` development server: ``` + npm run serve + ``` ## Accessing Talawa-Admin @@ -262,13 +296,17 @@ npm run serve By default `talawa-admin` runs on port `4321` on your system's localhost. It is available on the following endpoint: ``` + http://localhost:4321/ + ``` If you have specified a custom port number in your `.env` file, Talawa-Admin will run on the following endpoint: ``` + http://localhost:${{customPort}}/ + ``` Replace `${{customPort}}` with the actual custom port number you have configured in your `.env` file. @@ -290,7 +328,9 @@ It is important to test our code. If you are a contributor, please follow these You can run the tests for `talawa-admin` using this command: ``` + npm run test + ``` ## Debugging tests @@ -298,8 +338,10 @@ npm run test You can see the output of failing tests in broswer by running `jest-preview` package before running your tests ``` + npm run jest-preview npm run test + ``` You don't need to re-run the `npm run jest-preview` command each time, simply run the `npm run test` command if the Jest Preview server is already running in the background, it'll automatically detect any failing tests and show the preview at `http://localhost:3336` as shown in this screenshot - @@ -311,7 +353,9 @@ You don't need to re-run the `npm run jest-preview` command each time, simply ru You can lint your code files using this command: ``` + npm run lint:fix + ``` ## Husky for Git Hooks @@ -335,3 +379,4 @@ If you don't want this hook to run, you can manually opt out of this using the ` git pull --no-verify
+``` diff --git a/config/vite.config.ts b/config/vite.config.ts index 71ce6c6f47..28cd47ae5a 100644 --- a/config/vite.config.ts +++ b/config/vite.config.ts @@ -23,8 +23,9 @@ export default defineConfig({ ], server: { // this ensures that the browser opens upon server start - open: true, - // this sets a default port to 3000 + open: false, + host: '0.0.0.0', + // this sets a default port to 4321 port: 4321, }, });