feat: Updated Talawa Admin to use custom port (#1488)

* feat: Updated Talawa Admin to use custom port

This fixes the issue of Talawa-admin continously refreshing on localhost:3000.

Changes implemented
- Updated references to port 3000 in code URLs with a new configurable variable.
- Modified the setup.ts script to prompt for a custom port, defaulting to 4321 if not already configured,
  and saving it as a .env file variable.
- Updated the .env.sample file with the new variable and explanatory text.
- Updated markdown files in the root directory with the new default port.
- Ensured that all existing tests pass.
- No other functionality is affected.

Signed-off-by: Akhilender <[email protected]>

* fix: Added default port to 4321

Signed-off-by: Akhilender <[email protected]>

* fix: Fixed default port to 4321

- If port variable is not present or empty the port number falls back to 4321.

Signed-off-by: Akhilender <[email protected]>

---------

Signed-off-by: Akhilender <[email protected]>

.env.example

@@ -2,6 +2,10 @@
 # file to .env or set the variables in your local environment manually.
 
 
+# Custom port number for the talawa-admin development server to run on. Default is 4321.
+
+PORT=4321
+
 # Run Talawa-api locally in your system, and put its url into the same.
 
 REACT_APP_TALAWA_URL=

INSTALLATION.md

@@ -14,6 +14,7 @@ This document provides instructions on how to set up and start a running instanc
   - [Installing required packages/dependencies](#installing-required-packagesdependencies)
 - [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_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)
@@ -109,13 +110,18 @@ cp .env.example .env
 
 This `.env` file must be populated with the following environment variables for `talawa-admin` to work:
 
-| Variable                     | Description                                 |
-| ---------------------------- | ------------------------------------------- |
-| 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_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 section [Setting up REACT_APP_TALAWA_URL in .env file](#setting-up-REACT_APP_TALAWA_URL-in-env-file) up to and including section [Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file](#setting-up-REACT_APP_RECAPTCHA_SITE_KEY-in-env-file) 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_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
+
+Add a custom port number for Talawa-Admin development purposes to the variable named `PORT` in the `.env` file.
 
 ## Setting up REACT_APP_TALAWA_URL in .env file
 
@@ -168,12 +174,20 @@ npm run serve
 
 ## Accessing Talawa-Admin
 
-By default `talawa-admin` runs on port `3000` on your system's localhost. It is available on the following endpoint:
+By default `talawa-admin` runs on port `4321` on your system's localhost. It is available on the following endpoint:
 
 ```
-http://localhost:3000/
+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.
+
 ## Talawa-Admin Registration
 
 The first time you navigate to the running talawa-admin's website you'll land at talawa-admin registration page. Sign up using whatever credentials you want and create the account. Make sure to remember the email and password you entered because they'll be used to sign you in later on.

scripts/config-overrides/custom_start.js

@@ -1,6 +1,9 @@
 require('dotenv').config();
 const { spawn } = require('child_process');
 
+const port = process.env.PORT || 4321;
+process.env.PORT = port;
+
 const react_script_start = 'npx react-scripts start';
 const react_app_rewired_start = 'npx react-app-rewired start --config-overrides=scripts/config-overrides';
 

setup.ts

@@ -34,6 +34,19 @@ async function askForTalawaApiUrl(): Promise<string> {
   return endpoint;
 }
 
+async function askForCustomPort(): Promise<number> {
+  const { customPort } = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'customPort',
+      message:
+        'Enter custom port for development server (leave blank for default 4321):',
+      default: 4321,
+    },
+  ]);
+  return customPort;
+}
+
 // Check if all the fields in .env.example are present in .env
 function checkEnvFile(): void {
   const env = dotenv.parse(fs.readFileSync('.env'));
@@ -66,6 +79,34 @@ async function main(): Promise<void> {
     checkEnvFile();
   }
 
+  let shouldSetCustomPort: boolean;
+
+  if (process.env.PORT) {
+    console.log(
+      `\nCustom port for development server already exists with the value:\n${process.env.PORT}`
+    );
+    shouldSetCustomPort = true;
+  } else {
+    const { shouldSetCustomPortResponse } = await inquirer.prompt({
+      type: 'confirm',
+      name: 'shouldSetCustomPortResponse',
+      message: 'Would you like to set up a custom port?',
+      default: true,
+    });
+    shouldSetCustomPort = shouldSetCustomPortResponse;
+  }
+
+  if (shouldSetCustomPort) {
+    const customPort = await askForCustomPort();
+
+    const port = dotenv.parse(fs.readFileSync('.env')).PORT;
+
+    fs.readFile('.env', 'utf8', (err, data) => {
+      const result = data.replace(`PORT=${port}`, `PORT=${customPort}`);
+      fs.writeFileSync('.env', result, 'utf8');
+    });
+  }
+
   let shouldSetTalawaApiUrl: boolean;
 
   if (process.env.REACT_APP_TALAWA_URL) {

src/components/AddOn/support/services/Plugin.helper.ts

@@ -1,6 +1,6 @@
 class PluginHelper {
   fetchStore = async (): Promise<any> => {
-    const result = await fetch(`http://localhost:3000/store`);
+    const result = await fetch(`http://localhost:${process.env.PORT}/store`);
     return await result.json();
   };
 

src/screens/EventDashboard/EventDashboard.test.tsx

@@ -47,7 +47,7 @@ describe('Testing Event Dashboard Screen', () => {
     global.window = Object.create(window);
     Object.defineProperty(window, 'location', {
       value: {
-        href: 'http://localhost:3000/event/event123',
+        href: `http://localhost:${process.env.PORT}/event/event123`,
       },
       writable: true,
     });

src/screens/UserPortal/Home/Home.test.tsx

@@ -215,7 +215,7 @@ async function wait(ms = 100): Promise<void> {
 }
 
 beforeEach(() => {
-  const url = 'http://localhost:3000/user/organization/id=orgId';
+  const url = `http://localhost:${process.env.PORT}/user/organization/id=orgId`;
   Object.defineProperty(window, 'location', {
     value: {
       href: url,