added flex local dev

Author: rishigupta-3

README.md

@@ -36,6 +36,8 @@ Please visit [Twilio Docs](https://www.twilio.com/docs/flex/developer/plugins) f
 * [Plugins API](https://www.twilio.com/docs/flex/developer/plugins/api)
 * [Troubleshooting and FAQ](faq.md)
 
+> **Important:** Starting with the latest version, local development uses `flex.local.com` instead of `localhost`. Please see the [FAQ](faq.md) for setup instructions.
+
 ## Changelog
 
 Major changelogs can be found in the [changelog directory](/changelog).

faq.md

@@ -1,5 +1,29 @@
 # Troubleshooting & FAQ
 
+#### Local Development URLs Changed from localhost to flex.local.com
+
+Starting with this version, local plugin development uses `flex.local.com` instead of `localhost` to avoid login-related issues. You need to configure your local hosts file to point `flex.local.com` to `127.0.0.1`.
+
+**On macOS/Linux:**
+1. Open Terminal
+2. Run: `sudo vim /etc/hosts` (or use your preferred text editor)
+3. Add this line: `127.0.0.1 flex.local.com`
+4. Save the file
+
+**On Windows:**
+1. Open Notepad as Administrator
+2. Open the file: `C:\Windows\System32\drivers\etc\hosts`
+3. Add this line: `127.0.0.1 flex.local.com`
+4. Save the file
+
+After making this change, your local plugin development server will be accessible at `http://flex.local.com:3000` instead of `http://localhost:3000`.
+
+**Quick Setup Script (macOS/Linux only):**
+You can also run the provided script to automatically configure your hosts file:
+```bash
+./scripts/setup-hosts.sh
+```
+
 #### npm install fails on NPM 7
 
 If you are using `npm 7` (you can find out the version by typing `npm -v` in your terminal), then you may get the following error when you run `npm install`:

packages/create-flex-plugin/src/lib/commands.ts

@@ -43,7 +43,7 @@ export const setupConfiguration = async (config: FlexPluginArguments): Promise<F
 
   config.pluginClassName = `${upperFirst(camelCase(name)).replace('Plugin', '')}Plugin`;
   config.pluginNamespace = name.toLowerCase().replace('plugin-', '');
-  config.runtimeUrl = config.runtimeUrl || 'http://localhost:3000';
+  config.runtimeUrl = config.runtimeUrl || 'http://flex.local.com:3000';
   config.targetDirectory = resolveCwd(name);
   config.flexSdkVersion = await packages.getLatestFlexUIVersion(2);
   config.pluginScriptsVersion = pkg.devDependencies['@twilio/flex-plugin-scripts'];

packages/flex-dev-utils/src/__tests__/urls.test.ts

@@ -45,7 +45,7 @@ describe('urls', () => {
 
       expect(result.local.host).toEqual('0.0.0.0');
       expect(result.local.port).toEqual(1234);
-      expect(result.local.url).toEqual('http://localhost:1234/');
+      expect(result.local.url).toEqual('http://flex.local.com:1234/');
 
       expect(result.network.host).toEqual('192.0.0.0');
       expect(result.network.port).toEqual(1234);
@@ -61,7 +61,7 @@ describe('urls', () => {
 
       expect(result.local.host).toEqual('0.0.0.0');
       expect(result.local.port).toEqual(1234);
-      expect(result.local.url).toEqual('https://localhost:1234/');
+      expect(result.local.url).toEqual('https://flex.local.com:1234/');
 
       expect(result.network.host).toEqual('192.0.0.0');
       expect(result.network.port).toEqual(1234);

packages/flex-dev-utils/src/urls.ts

@@ -77,14 +77,15 @@ export const findPort = async (startPort: number = 3000): Promise<number> => {
 /**
  * Returns the local and network urls
  * @param port  the port the server is running on
+ * @note Changed from localhost to flex.local.com to avoid login-related issues
  */
 export const getLocalAndNetworkUrls = (port: number): InternalServiceUrls => {
   const protocol = env.isHTTPS() ? 'https' : 'http';
 
   const localUrl = url.format({
     protocol,
     port,
-    hostname: 'localhost',
+    hostname: 'flex.local.com',
     pathname: '/',
   });
   const networkUrl = url.format({

packages/flex-plugin-e2e-tests/README.md

@@ -34,7 +34,7 @@ TWILIO_ACCOUNT_SID_drawin=ACxxx TWILIO_AUTH_TOKEN_darwin=123 CONSOLE_EMAIL="user
 You can also override certain defaults by setting these additional environment variables:
 
 - `FLEX_UI_VERSION` - the flexUIVersion to use. Defaults to `^1` otherwise
-- `PLUGIN_BASE_URL` - the baseUrl. Defaults to `http://localhost:3000` otherwise
+- `PLUGIN_BASE_URL` - the baseUrl. Defaults to `http://flex.local.com:3000` otherwise
 - `TWILIO_REGION` - the twilio region to use
 
 You can also run a specific step by using (don't forget the environment variables):

packages/flex-plugin-e2e-tests/src/utils/browser.ts

@@ -11,7 +11,7 @@ export class Browser {
 
   private static _page: Page;
 
-  private static _domainsToInclude = ['twilio', 'localhost', 'unpkg'];
+  private static _domainsToInclude = ['twilio', 'localhost', 'flex.local.com', 'unpkg'];
 
   /**
    * Initializes browser object

packages/flex-plugin-e2e-tests/src/utils/pages/view/plugins.ts

@@ -28,7 +28,7 @@ export class Plugins extends Base {
 
   constructor(page: Page, baseUrl: string) {
     super(page);
-    this._baseUrl = baseUrl.includes('localhost') ? 'https://flex.twilio.com' : baseUrl;
+    this._baseUrl = baseUrl.includes('flex.local.com') ? 'https://flex.twilio.com' : baseUrl;
   }
 
   /**

packages/flex-plugin-e2e-tests/src/utils/pages/view/twilio-console.ts

@@ -25,10 +25,10 @@ export class TwilioConsole extends Base {
   }
 
   /**
-   * Creates a localhost url
+   * Creates a flex.local.com url
    * @param port
    */
-  private static _createLocalhostUrl = (port: number) => `http://localhost:${port}&localPort=${port}`;
+  private static _createLocalhostUrl = (port: number) => `http://flex.local.com:${port}&localPort=${port}`;
 
   /**
    * Logs user in through service-login
@@ -39,7 +39,7 @@ export class TwilioConsole extends Base {
    */
   async login(flexPath: string, accountSid: string, localhostPort: number, firstLoad: boolean = true): Promise<void> {
     logger.info('firstload', firstLoad);
-    const redirectUrl = this._flexBaseUrl.includes('localhost')
+    const redirectUrl = this._flexBaseUrl.includes('flex.local.com')
       ? TwilioConsole._createLocalhostUrl(localhostPort)
       : this._flexBaseUrl;
     const path = `console/flex/service-login/${accountSid}/?path=/${flexPath}&referer=${redirectUrl}`;