diff --git a/.env.example b/.env.example index 399d5e6aab..de7cff92ec 100644 --- 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= \ No newline at end of file +ALLOW_LOGS= diff --git a/INSTALLATION.md b/INSTALLATION.md index 05ede15d0c..5813b7d1cb 100644 --- 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 index f930acc13a..2a6c437fa3 100644 --- a/setup.ts +++ b/setup.ts @@ -74,18 +74,26 @@ export async function main(): Promise { 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 new file mode 100644 index 0000000000..3fa612bd25 --- /dev/null +++ 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(); + }); +});