Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@ 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).
Expand Down
24 changes: 0 additions & 24 deletions faq.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,5 @@
# 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`:
Expand Down
2 changes: 1 addition & 1 deletion packages/create-flex-plugin/src/lib/commands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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://flex.local.com:3000';
config.runtimeUrl = config.runtimeUrl || 'http://localhost:3000';
config.targetDirectory = resolveCwd(name);
config.flexSdkVersion = await packages.getLatestFlexUIVersion(2);
config.pluginScriptsVersion = pkg.devDependencies['@twilio/flex-plugin-scripts'];
Expand Down
4 changes: 2 additions & 2 deletions packages/flex-dev-utils/src/__tests__/urls.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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://flex.local.com:1234/');
expect(result.local.url).toEqual('http://localhost:1234/');

expect(result.network.host).toEqual('192.0.0.0');
expect(result.network.port).toEqual(1234);
Expand All @@ -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://flex.local.com:1234/');
expect(result.local.url).toEqual('https://localhost:1234/');

expect(result.network.host).toEqual('192.0.0.0');
expect(result.network.port).toEqual(1234);
Expand Down
3 changes: 1 addition & 2 deletions packages/flex-dev-utils/src/urls.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,14 @@ 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: 'flex.local.com',
hostname: 'localhost',
pathname: '/',
});
const networkUrl = url.format({
Expand Down
2 changes: 1 addition & 1 deletion packages/flex-plugin-e2e-tests/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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://flex.local.com:3000` otherwise
- `PLUGIN_BASE_URL` - the baseUrl. Defaults to `http://localhost:3000` otherwise
- `TWILIO_REGION` - the twilio region to use

You can also run a specific step by using (don't forget the environment variables):
Expand Down
2 changes: 1 addition & 1 deletion packages/flex-plugin-e2e-tests/src/utils/browser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export class Browser {

private static _page: Page;

private static _domainsToInclude = ['twilio', 'localhost', 'flex.local.com', 'unpkg'];
private static _domainsToInclude = ['twilio', 'localhost', 'unpkg'];

/**
* Initializes browser object
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class Plugins extends Base {

constructor(page: Page, baseUrl: string) {
super(page);
this._baseUrl = baseUrl.includes('flex.local.com') ? 'https://flex.twilio.com' : baseUrl;
this._baseUrl = baseUrl.includes('localhost') ? 'https://flex.twilio.com' : baseUrl;
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ export class TwilioConsole extends Base {
}

/**
* Creates a flex.local.com url
* Creates a localhost url
* @param port
*/
private static _createLocalhostUrl = (port: number) => `http://flex.local.com:${port}&localPort=${port}`;
private static _createLocalhostUrl = (port: number) => `http://localhost:${port}&localPort=${port}`;

/**
* Logs user in through service-login
Expand All @@ -40,7 +40,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('flex.local.com')
const redirectUrl = this._flexBaseUrl.includes('localhost')
? TwilioConsole._createLocalhostUrl(localhostPort)
: this._flexBaseUrl;
const path = `console/flex/service-login/${accountSid}/?path=/${flexPath}&referer=${redirectUrl}`;
Expand Down
Loading