flex-plugin-builder icon indicating copy to clipboard operation
flex-plugin-builder copied to clipboard

[Bug]: cannot setup another host for local flex plugin development

Open shouze opened this issue 4 years ago • 0 comments

Summary

twilio flex:plugins:start command leads to 'Invalid Header Host' when I try to open on http://foo.localhost:3000

Detailed Description

  1. Run npm install twilio-cli -g
  2. Run twilio plugins:install @twilio-labs/plugin-flex && twilio plugins
  3. edit webpack.dev.js to disable host check (I know more subtle methods exists and have tried them, but this one should always work)
module.exports = (config, { isProd, isDev, isTest }) => {
  /**
   * Customize the webpack dev-server by modifying the config object.
   * Consult https://webpack.js.org/configuration/dev-server for more information.
   */

  config.disableHostCheck = true;
  console.log(config);
  return config;
};
  1. Run flex:plugins:start -l=debug
  2. When I open http://foo.localhost:3000 the http content response is Invalid Host header

Note: if I add config.disableHostCheck=true; at line 95 of ~/.twilio-cli/node_modules/flex-plugin-scripts/dist/config/index.js then when I open http://foo.localhost:3000 it works like when I'm opening http://localhost:3000

This patch is the same one than https://github.com/twilio/flex-plugin-builder/pull/566/files#diff-f04e76445efdf086de2b6d29f56dcd4be851523cf56615cec3806d98e33c8d44R75-R79

Log output

``log
[DEBUG] Config File: /home/sebastien/.twilio-cli/config.json
[DEBUG] Using profile: ${TWILIO_API_KEY}/${TWILIO_API_SECRET}
[DEBUG] Using Plugins CLI version 4.1.0
[DEBUG] Using Flex Plugins Config File: /home/sebastien/.twilio-cli/flex/plugins.json
[DEBUG] Using flex-plugin-scripts version 4.1.0
Using profile ${TWILIO_API_KEY}/${TWILIO_API_SECRET} (AC16ed30befb02ee0e2ab69b7bc48a2168)

Checking Flex plugin project directory
Checking Flex plugin project directory
Starting local development environment
Creating webpack compiler
ℹ 「wds」: Project is running at http://localhost:3000//
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/sebastien/src/gogaille/guest-journey/twilio-app/public, /home/sebastien/.twilio-cli/node_modules/flex-plugin-scripts/dev_assets
ℹ 「wds」: 404s will fallback to /
Starting development server (static)...
Waiting for Typescript check results...
Starting local development environment
{
  compress: true,
  clientLogLevel: 'none',
  quiet: true,
  host: '0.0.0.0',
  port: 3100,
  public: 'http://localhost:3100/',
  injectClient: false,
  serveIndex: false,
  transportMode: 'ws',
  sockHost: undefined,
  sockPath: undefined,
  sockPort: '3100',
  hot: true,
  disableHostCheck: true
}
Service path not specified, so defaulting to ipc.config.socketRoot + ipc.config.appspace + id 
requested connection to  twilio.flex.plugin-builder /tmp/app.twilio.flex.plugin-builder
Connecting client on Unix Socket : /tmp/app.twilio.flex.plugin-builder
Creating webpack compiler
ℹ 「wds」: Project is running at http://localhost:3100//
ℹ 「wds」: webpack output is served from undefined
ℹ 「wds」: Content not from webpack is served from /home/sebastien/src/gogaille/guest-journey/twilio-app
Starting development server (javascript)...
retrying reset
Waiting for Typescript check results...
dispatching event to  twilio.flex.plugin-builder /tmp/app.twilio.flex.plugin-builder  :  message , {
  type: 'onCompileComplete',
  payload: { result: { errors: [], warnings: [] }, appName: 'twilio-app' }
}
Compiled successfully!

Your plugin app is running in the browser on:

        Local        http://localhost:3000/  
        Network      http://172.16.0.68:3000/

Local Plugins:

        twilio-app      /home/sebastien/src/gogaille/guest-journey/twilio-app

This is a development build and is not intended to be used for production.
To create a production build, use:

         twilio flex:plugins:build

Version of @twilio/flex-ui

1.27.0

Version of flex-plugin-scripts

4.1.0

Version of @twilio-labs/plugin-flex

4.1.0

Version of node

16.4.2

Version of npm

7.18.1

OS

Linux

Content of package.json

{
  "name": "twilio-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "postinstall": "flex-plugin pre-script-check"
  },
  "dependencies": {
    "flex-plugin-scripts": "4.1.0",
    "react": "16.5.2",
    "react-dom": "16.5.2"
  },
  "devDependencies": {
    "@twilio/flex-ui": "^1",
    "react-test-renderer": "16.5.2",
    "typescript": "^3"
  }
}

shouze avatar Jul 15 '21 18:07 shouze