From 378248dae086c5526954d9d620a97de10a4b7af9 Mon Sep 17 00:00:00 2001 From: Akhilender Bongirwar <112749383+akhilender-bongirwar@users.noreply.github.com> Date: Thu, 25 Jan 2024 00:43:54 +0530 Subject: [PATCH] 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 * fix: Added default port to 4321 Signed-off-by: Akhilender * 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 --------- Signed-off-by: Akhilender --- .env.example | 4 ++ INSTALLATION.md | 30 ++++++++++---- scripts/config-overrides/custom_start.js | 3 ++ setup.ts | 41 +++++++++++++++++++ .../AddOn/support/services/Plugin.helper.ts | 2 +- .../EventDashboard/EventDashboard.test.tsx | 2 +- src/screens/UserPortal/Home/Home.test.tsx | 2 +- 7 files changed, 73 insertions(+), 11 deletions(-) diff --git a/.env.example b/.env.example index 90fab1fc55..d3fb823251 100644 --- a/.env.example +++ b/.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= diff --git a/INSTALLATION.md b/INSTALLATION.md index d63dcbf155..f1f8432fdf 100644 --- a/INSTALLATION.md +++ b/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. diff --git a/scripts/config-overrides/custom_start.js b/scripts/config-overrides/custom_start.js index 9aa0083514..a784f1bb48 100644 --- a/scripts/config-overrides/custom_start.js +++ b/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'; diff --git a/setup.ts b/setup.ts index 8500acdca2..6b5a99abcd 100644 --- a/setup.ts +++ b/setup.ts @@ -34,6 +34,19 @@ async function askForTalawaApiUrl(): Promise { return endpoint; } +async function askForCustomPort(): Promise { + 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 { 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) { diff --git a/src/components/AddOn/support/services/Plugin.helper.ts b/src/components/AddOn/support/services/Plugin.helper.ts index dfbbfd50e1..4730f0c568 100644 --- a/src/components/AddOn/support/services/Plugin.helper.ts +++ b/src/components/AddOn/support/services/Plugin.helper.ts @@ -1,6 +1,6 @@ class PluginHelper { fetchStore = async (): Promise => { - const result = await fetch(`http://localhost:3000/store`); + const result = await fetch(`http://localhost:${process.env.PORT}/store`); return await result.json(); }; diff --git a/src/screens/EventDashboard/EventDashboard.test.tsx b/src/screens/EventDashboard/EventDashboard.test.tsx index 9c21d735e8..3678acd093 100644 --- a/src/screens/EventDashboard/EventDashboard.test.tsx +++ b/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, }); diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx index aafa779255..d28a15dc5a 100644 --- a/src/screens/UserPortal/Home/Home.test.tsx +++ b/src/screens/UserPortal/Home/Home.test.tsx @@ -215,7 +215,7 @@ async function wait(ms = 100): Promise { } 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,