Added scripts for REACT_APP_BACKEND_WEBSOCKET_URL (#2350)

* Added scripts for talawa websocket url * Fixed naming inconsistency Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Fixed naming inconsistencies * Added error handling Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Improved test coverage * Fixed scripts for websocketurl * updated INSTALLATION.md * Updated logic to handle duplicate entries * Fixed errors * Added tests * Undo changes to .env.example * Chore/organization people UI changes (#2358) * changed color scheme for the organization people screen * fix precommit * merge * Update pre-commit * fix conflicts * fix type checks * fix type checks * fix type checks * fix ts eslint errors * fix ts eslint errors * fix ts eslint errors * fix ts eslint errors * testing * testing * testing * reverted changes in yaml file * cr comments * Update pull-request.yml * cr comments * cr comments and single css file * CR comments * delete button margin from top * prettier for commit and pull request * remove hard coded colors * fix failing test cases * Upgraded dicebear (#2411) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Peter Harrison <[email protected]> Co-authored-by: ANKIT VARSHNEY <[email protected]>
PalisadoesFoundation · Nov 10, 2024 · 470be76 · 470be76
1 parent e8b49a4
commit 470be76
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 55 deletions.
diff --git a/.env.example b/.env.example
@@ -24,8 +24,8 @@ REACT_APP_USE_RECAPTCHA=
 REACT_APP_RECAPTCHA_SITE_KEY=
 
 # has to be inserted in the env file to use plugins and other websocket based features.
-REACT_APP_BACKEND_WEBSOCKET_URL=ws://localhost:4000/graphql
+REACT_APP_BACKEND_WEBSOCKET_URL=ws://localhost:4000/graphql/
 
 # If you want to logs Compiletime and Runtime error , warning and info write YES or if u want to  
 # keep the console clean leave it blank
-ALLOW_LOGS=
+ALLOW_LOGS=
diff --git a/INSTALLATION.md b/INSTALLATION.md
@@ -17,6 +17,7 @@ This document provides instructions on how to set up and start a running instanc
   - [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)
@@ -65,31 +66,34 @@ First you need a local copy of `talawa-admin`. Run the following command in the
 
 1. On your computer, navigate to the folder where you want to setup the repository.
 2. Open a `cmd` (Windows) or `terminal` (Linux or MacOS) session in this folder.
-    1. An easy way to do this is to right-click and choose appropriate option based on your OS.
+   1. An easy way to do this is to right-click and choose appropriate option based on your OS.
 3. **For Our Open Source Contributor Software Developers:**
-    1. Next, we'll fork and clone the `talawa-admin` repository.
-    1. In your web browser, navigate to [https://github.com/PalisadoesFoundation/talawa-admin/](https://github.com/PalisadoesFoundation/talawa-admin/) and click on the `fork` button. It is placed on the right corner opposite the repository name `PalisadoesFoundation/talawa-admin`.
 
-       ![Image with fork](public/markdown/images/install1.png)
+   1. Next, we'll fork and clone the `talawa-admin` repository.
+   1. In your web browser, navigate to [https://github.com/PalisadoesFoundation/talawa-admin/](https://github.com/PalisadoesFoundation/talawa-admin/) and click on the `fork` button. It is placed on the right corner opposite the repository name `PalisadoesFoundation/talawa-admin`.
 
-    2. You should now see `talawa-admin` under your repositories. It will be marked as forked from `PalisadoesFoundation/talawa-admin`
+      ![Image with fork](public/markdown/images/install1.png)
 
-       ![Image of user's clone](public/markdown/images/install2.png)
+   1. You should now see `talawa-admin` under your repositories. It will be marked as forked from `PalisadoesFoundation/talawa-admin`
+
+      ![Image of user's clone](public/markdown/images/install2.png)
+
+   1. Clone the repository to your local computer (replacing the values in `{{}}`):
+      ```bash
+      $ git clone https://github.com/{{YOUR GITHUB USERNAME}}/talawa-admin.git
+      cd talawa-admin
+      git checkout develop
+      ```
+      - **Note:** Make sure to check out the `develop` branch
+   1. You now have a local copy of the code files. For more detailed instructions on contributing code, and managing the versions of this repository with `git`, checkout our [CONTRIBUTING.md](./CONTRIBUTING.md) file.
 
-    3. Clone the repository to your local computer (replacing the values in `{{}}`):
-        ```bash
-        $ git clone https://github.com/{{YOUR GITHUB USERNAME}}/talawa-admin.git
-        cd talawa-admin
-        git checkout develop
-        ```
-        - **Note:** Make sure to check out the `develop` branch
-    4. You now have a local copy of the code files. For more detailed instructions on contributing code, and managing the versions of this repository with `git`, checkout our [CONTRIBUTING.md](./CONTRIBUTING.md) file.
 4. **Talawa Administrators:**
-      1. Clone the repository to your local computer using this command:
 
-          ```bash
-          $ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
-          ```
+   1. Clone the repository to your local computer using this command:
+
+      ```bash
+      $ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
+      ```
 
 ## Install node.js
 
@@ -98,26 +102,26 @@ Best way to install and manage `node.js` is making use of node version managers.
 Follow these steps to install the `node.js` packages in Windows, Linux and MacOS.
 
 1. For Windows:
-    1. first install `node.js` from their website at https://nodejs.org
-        1. When installing, don't click the option to install the `necessary tools`. These are not needed in our case. 
-    2. then install [fnm](https://github.com/Schniz/fnm). Please read all the steps in this section first.
-        1. All the commands listed on this page will need to be run in a Windows terminal session in the `talawa-admin` directory.
-        2. Install `fnm` using the `winget` option listed on the page.
-        3. Setup `fnm` to automatically set the version of `node.js` to the version required for the repository using these steps:
-            1. First, refer to the `fnm` web page's section on `Shell Setup` recommendations.
-            2. Open a `Windows PowerShell` terminal window
-            3. Run the recommended `Windows PowerShell` command to open `notepad`.
-            4. Paste the recommended string into `notepad`
-            5. Save the document.
-            6. Exit `notepad`
-            7. Exit PowerShell
-            8. This will ensure that you are always using the correct version of `node.js`
+   1. first install `node.js` from their website at https://nodejs.org
+      1. When installing, don't click the option to install the `necessary tools`. These are not needed in our case.
+   2. then install [fnm](https://github.com/Schniz/fnm). Please read all the steps in this section first.
+      1. All the commands listed on this page will need to be run in a Windows terminal session in the `talawa-admin` directory.
+      2. Install `fnm` using the `winget` option listed on the page.
+      3. Setup `fnm` to automatically set the version of `node.js` to the version required for the repository using these steps:
+         1. First, refer to the `fnm` web page's section on `Shell Setup` recommendations.
+         2. Open a `Windows PowerShell` terminal window
+         3. Run the recommended `Windows PowerShell` command to open `notepad`.
+         4. Paste the recommended string into `notepad`
+         5. Save the document.
+         6. Exit `notepad`
+         7. Exit PowerShell
+         8. This will ensure that you are always using the correct version of `node.js`
 2. For Linux and MacOS, use the terminal window.
    1. install `node.js`
    2. then install `fnm`
-         1. Refer to the installation page's section on the `Shell Setup` recommendations.
-         2. Run the respective recommended commands to setup your node environment
-         3. This will ensure that you are always using the correct version of `node.js`
+      1. Refer to the installation page's section on the `Shell Setup` recommendations.
+      2. Run the respective recommended commands to setup your node environment
+      3. This will ensure that you are always using the correct version of `node.js`
 
 ## Install TypeScript
 
@@ -163,14 +167,15 @@ cp .env.example .env
 
 This `.env` file must be populated with the following environment variables for `talawa-admin` to work:
 
-| Variable                     | Description                                       |
-| ---------------------------- | ------------------------------------------------- |
-| PORT                         | Custom port for Talawa-Admin development purposes |
-| REACT_APP_TALAWA_URL         | URL endpoint for talawa-api graphql service       |
-| REACT_APP_USE_RECAPTCHA      | Whether you want to use reCAPTCHA or not          |
-| REACT_APP_RECAPTCHA_SITE_KEY | Site key for authentication using reCAPTCHA       |
+| Variable                        | Description                                       |
+| ------------------------------- | ------------------------------------------------- |
+| PORT                            | Custom port for Talawa-Admin development purposes |
+| REACT_APP_TALAWA_URL            | URL endpoint for talawa-api graphql service       |
+| REACT_APP_BACKEND_WEBSOCKET_URL | URL endpoint for websocket end point              |
+| REACT_APP_USE_RECAPTCHA         | Whether you want to use reCAPTCHA or not          |
+| REACT_APP_RECAPTCHA_SITE_KEY    | Site key for authentication using reCAPTCHA       |
 
-Follow the instructions from the sections [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_RECAPTCHA_SITE_KEY in .env file](#setting-up-REACT_APP_RECAPTCHA_SITE_KEY-in-env-file) and [Setting up Compiletime and Runtime logs](#setting-up-compiletime-and-runtime-logs) to set up these environment variables.
+Follow the instructions from the sections [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) and [Setting up Compiletime and Runtime logs](#setting-up-compiletime-and-runtime-logs) to set up these environment variables.
 
 ## Setting up PORT in .env file
 
@@ -196,7 +201,27 @@ If you are trying to access Talawa Admin from a remote host with the API URL con
 REACT_APP_TALAWA_URL="http://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).
+## Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file
+
+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).
 
 ## Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file
 

diff --git a/setup.ts b/setup.ts
@@ -74,18 +74,26 @@ export async function main(): Promise<void> {
       const url = new URL(endpoint);
       isConnected = await checkConnection(url.origin);
     }
+    const envPath = '.env';
+    const currentEnvContent = fs.readFileSync(envPath, 'utf8');
+    const talawaApiUrl = dotenv.parse(currentEnvContent).REACT_APP_TALAWA_URL;
 
-    const talawaApiUrl = dotenv.parse(
-      fs.readFileSync('.env'),
-    ).REACT_APP_TALAWA_URL;
+    const updatedEnvContent = currentEnvContent.replace(
+      `REACT_APP_TALAWA_URL=${talawaApiUrl}`,
+      `REACT_APP_TALAWA_URL=${endpoint}`,
+    );
 
-    fs.readFile('.env', 'utf8', (err, data) => {
-      const result = data.replace(
-        `REACT_APP_TALAWA_URL=${talawaApiUrl}`,
-        `REACT_APP_TALAWA_URL=${endpoint}`,
-      );
-      fs.writeFileSync('.env', result, 'utf8');
-    });
+    fs.writeFileSync(envPath, updatedEnvContent, 'utf8');
+    const websocketUrl = endpoint.replace(/^http(s)?:\/\//, 'ws$1://');
+    const currentWebSocketUrl =
+      dotenv.parse(updatedEnvContent).REACT_APP_BACKEND_WEBSOCKET_URL;
+
+    const finalEnvContent = updatedEnvContent.replace(
+      `REACT_APP_BACKEND_WEBSOCKET_URL=${currentWebSocketUrl}`,
+      `REACT_APP_BACKEND_WEBSOCKET_URL=${websocketUrl}`,
+    );
+
+    fs.writeFileSync(envPath, finalEnvContent, 'utf8');
   }
 
   const { shouldUseRecaptcha } = await inquirer.prompt({

diff --git a/src/setup/askForTalawaApiUrl/setupTalawaWebSocketUrl.test.ts b/src/setup/askForTalawaApiUrl/setupTalawaWebSocketUrl.test.ts
@@ -0,0 +1,38 @@
+import fs from 'fs';
+import inquirer from 'inquirer';
+import { askForTalawaApiUrl } from './askForTalawaApiUrl';
+
+jest.mock('fs');
+jest.mock('inquirer', () => ({
+  prompt: jest.fn(),
+}));
+
+describe('WebSocket URL Configuration', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should convert http URL to ws WebSocket URL', async () => {
+    const endpoint = 'http://example.com/graphql';
+    const websocketUrl = endpoint.replace(/^http(s)?:\/\//, 'ws$1://');
+
+    expect(websocketUrl).toBe('ws://example.com/graphql');
+  });
+
+  test('should convert https URL to wss WebSocket URL', async () => {
+    const endpoint = 'https://example.com/graphql';
+    const websocketUrl = endpoint.replace(/^http(s)?:\/\//, 'ws$1://');
+
+    expect(websocketUrl).toBe('wss://example.com/graphql');
+  });
+
+  test('should retain default WebSocket URL if no new endpoint is provided', async () => {
+    jest
+      .spyOn(inquirer, 'prompt')
+      .mockResolvedValueOnce({ endpoint: 'http://localhost:4000/graphql/' });
+    await askForTalawaApiUrl();
+
+    const writeFileSyncSpy = jest.spyOn(fs, 'writeFileSync');
+    expect(writeFileSyncSpy).not.toHaveBeenCalled();
+  });
+});