Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added scripts for REACT_APP_BACKEND_WEBSOCKET_URL #2350

Merged
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
80533bc
Added scripts for talawa websocket url
adithyanotfound Oct 20, 2024
e85dff6
Merge remote-tracking branch 'origin/develop' into feat/websocketurl
adithyanotfound Oct 21, 2024
5f63b62
Fixed naming inconsistency
adithyanotfound Oct 21, 2024
1062a7a
Fixed naming inconsistencies
adithyanotfound Oct 21, 2024
c978e6f
Merge branch 'feat/websocketurl' of https://github.com/adithyanotfoun…
adithyanotfound Oct 21, 2024
bd47fb6
Added error handling
adithyanotfound Oct 21, 2024
4018177
Improved test coverage
adithyanotfound Oct 21, 2024
b516659
Fixed scripts for websocketurl
adithyanotfound Oct 28, 2024
6f81300
Merge remote-tracking branch 'origin/develop' into feat/websocketurl
adithyanotfound Oct 28, 2024
bc64d4d
updated INSTALLATION.md
adithyanotfound Oct 28, 2024
2c0942f
Updated logic to handle duplicate entries
adithyanotfound Oct 28, 2024
d9c3976
Fixed errors
adithyanotfound Oct 29, 2024
6d15f91
Merge remote-tracking branch 'origin/develop' into feat/websocketurl
adithyanotfound Oct 29, 2024
5899f05
Merge remote-tracking branch 'origin/develop' into feat/websocketurl
adithyanotfound Oct 30, 2024
597e244
Added tests
adithyanotfound Oct 31, 2024
25bad0f
Merge branch 'develop' into feat/websocketurl
palisadoes Oct 31, 2024
71b561b
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 1, 2024
e6898ed
Undo changes to .env.example
adithyanotfound Nov 1, 2024
a604965
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 2, 2024
d38549a
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 3, 2024
dfa409e
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 3, 2024
ddac683
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 5, 2024
a89eccb
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 6, 2024
1d50f74
Chore/organization people UI changes (#2358)
AVtheking Nov 6, 2024
4347b6d
Upgraded dicebear (#2411)
adithyanotfound Nov 6, 2024
5a6f316
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 7, 2024
e5d8197
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 9, 2024
81b37ed
Merge branch 'develop' into feat/websocketurl
adithyanotfound Nov 10, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ 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=
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this changed when it's a known working default value?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it back to the default value.


# 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
Expand Down
111 changes: 68 additions & 43 deletions INSTALLATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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

Add the endpoint for accessing talawa-api graphql service 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

Expand Down
40 changes: 40 additions & 0 deletions setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { askForTalawaApiUrl } from './src/setup/askForTalawaApiUrl/askForTalawaA
import { checkEnvFile } from './src/setup/checkEnvFile/checkEnvFile';
import { validateRecaptcha } from './src/setup/validateRecaptcha/validateRecaptcha';
import { askForCustomPort } from './src/setup/askForCustomPort/askForCustomPort';
import { askForTalawaWebsocketUrl } from './src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl';
adithyanotfound marked this conversation as resolved.
Show resolved Hide resolved

export async function main(): Promise<void> {
console.log('Welcome to the Talawa Admin setup! 🚀');
Expand Down Expand Up @@ -88,6 +89,45 @@ export async function main(): Promise<void> {
});
}

let shouldSetTalawaWebsocketUrl: boolean;

if (process.env.REACT_APP_BACKEND_WEBSOCKET_URL) {
console.log(
`\nTalawa WebSocket endpoint already exists: ${process.env.REACT_APP_BACKEND_WEBSOCKET_URL}`,
);
shouldSetTalawaWebsocketUrl = true;
} else {
adithyanotfound marked this conversation as resolved.
Show resolved Hide resolved
const { shouldSetTalawaWebsocketUrlResponse } = await inquirer.prompt({
type: 'confirm',
name: 'shouldSetTalawaWebsocketUrlResponse',
message: 'Would you like to set up the Talawa WebSocket endpoint?',
default: true,
});
shouldSetTalawaWebsocketUrl = shouldSetTalawaWebsocketUrlResponse;
}

if (shouldSetTalawaWebsocketUrl) {
let isConnected = false;
let endpoint = '';

while (!isConnected) {
endpoint = await askForTalawaWebsocketUrl();
const url = new URL(endpoint);
isConnected = await checkConnection(url.origin);
}

const websocketUrl = dotenv.parse(
fs.readFileSync('.env'),
).REACT_APP_BACKEND_WEBSOCKET_URL;
fs.readFile('.env', 'utf8', (err, data) => {
const result = data.replace(
`REACT_APP_BACKEND_WEBSOCKET_URL=${websocketUrl}`,
`REACT_APP_BACKEND_WEBSOCKET_URL=${endpoint}`,
);
fs.writeFileSync('.env', result, 'utf8');
});
adithyanotfound marked this conversation as resolved.
Show resolved Hide resolved
adithyanotfound marked this conversation as resolved.
Show resolved Hide resolved
}

adithyanotfound marked this conversation as resolved.
Show resolved Hide resolved
const { shouldUseRecaptcha } = await inquirer.prompt({
type: 'confirm',
name: 'shouldUseRecaptcha',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import inquirer from 'inquirer';
import { askForTalawaWebsocketUrl } from './askForTalawaWebSocketUrl';

jest.mock('inquirer', () => ({
prompt: jest.fn(),
}));

describe('askForTalawaWebsocketUrl', () => {
beforeEach(() => {
jest.clearAllMocks();
});

test('should return the provided endpoint when user enters it', async () => {
const mockPrompt = jest.spyOn(inquirer, 'prompt').mockResolvedValueOnce({
endpoint: 'ws://example.com/graphql/',
});

const result = await askForTalawaWebsocketUrl();

expect(mockPrompt).toHaveBeenCalledWith([
{
type: 'input',
name: 'endpoint',
message: 'Enter your Talawa WebSocket endpoint:',
default: 'ws://localhost:4000/graphql/',
validate: expect.any(Function),
},
]);

expect(result).toBe('ws://example.com/graphql/');
});

test('should return the default endpoint when the user does not enter anything', async () => {
const mockPrompt = jest.spyOn(inquirer, 'prompt').mockResolvedValueOnce({
endpoint: '',
});

const result = await askForTalawaWebsocketUrl();

expect(mockPrompt).toHaveBeenCalledWith([
{
type: 'input',
name: 'endpoint',
message: 'Enter your Talawa WebSocket endpoint:',
default: 'ws://localhost:4000/graphql/',
validate: expect.any(Function),
},
]);

expect(result).toBe('ws://localhost:4000/graphql/');
});

test('should throw an error if the prompt fails', async () => {
const mockError = new Error('Prompt failed');
jest.spyOn(inquirer, 'prompt').mockRejectedValueOnce(mockError);

await expect(askForTalawaWebsocketUrl()).rejects.toThrow('Prompt failed');
});

test('should handle empty user input and use the default value', async () => {
const mockPrompt = jest.spyOn(inquirer, 'prompt').mockResolvedValueOnce({
endpoint: '',
});

const result = await askForTalawaWebsocketUrl();

expect(mockPrompt).toHaveBeenCalledWith([
{
type: 'input',
name: 'endpoint',
message: 'Enter your Talawa WebSocket endpoint:',
default: 'ws://localhost:4000/graphql/',
validate: expect.any(Function),
},
]);

expect(result).toBe('ws://localhost:4000/graphql/');
});

test('should not fail on unexpected input type', async () => {
const mockPrompt = jest.spyOn(inquirer, 'prompt').mockResolvedValueOnce({
endpoint: '12345',
});

const result = await askForTalawaWebsocketUrl();

expect(mockPrompt).toHaveBeenCalledWith([
{
type: 'input',
name: 'endpoint',
message: 'Enter your Talawa WebSocket endpoint:',
default: 'ws://localhost:4000/graphql/',
validate: expect.any(Function),
},
]);

expect(result).toBe('12345');
});
});
32 changes: 32 additions & 0 deletions src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import inquirer from 'inquirer';

function isValidWebSocketUrl(url: string): boolean {
try {
const parsedUrl = new URL(url);

Check warning on line 5 in src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts

View check run for this annotation

Codecov / codecov/patch

src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts#L3-L5

Added lines #L3 - L5 were not covered by tests
return parsedUrl.protocol === 'ws:' || parsedUrl.protocol === 'wss:';
} catch {
return false;

Check warning on line 8 in src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts

View check run for this annotation

Codecov / codecov/patch

src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts#L8

Added line #L8 was not covered by tests
}
}

export async function askForTalawaWebsocketUrl(): Promise<string> {
const { endpoint } = await inquirer.prompt([
{
type: 'input',
name: 'endpoint',
message: 'Enter your Talawa WebSocket endpoint:',
default: 'ws://localhost:4000/graphql/',
validate: (input: string) => {

Check warning on line 19 in src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts

View check run for this annotation

Codecov / codecov/patch

src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts#L19

Added line #L19 was not covered by tests
if (input.trim() === '') {
return true;

Check warning on line 21 in src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts

View check run for this annotation

Codecov / codecov/patch

src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts#L21

Added line #L21 was not covered by tests
}
if (!isValidWebSocketUrl(input)) {
return 'Please enter a valid WebSocket URL (starting with ws:// or wss://).';

Check warning on line 24 in src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts

View check run for this annotation

Codecov / codecov/patch

src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts#L24

Added line #L24 was not covered by tests
}
return true;

Check warning on line 26 in src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts

View check run for this annotation

Codecov / codecov/patch

src/setup/askForTalawaWebSocketUrl/askForTalawaWebSocketUrl.ts#L26

Added line #L26 was not covered by tests
},
},
]);

return endpoint || 'ws://localhost:4000/graphql/';
}
adithyanotfound marked this conversation as resolved.
Show resolved Hide resolved
Loading