0

I changed some things in flex-webchat-ui-sample when following the guides at Twilio.com.

Then I ran "npm run build" at the root of "flex-webchat-ui-sample" giving me the build folder. The assets folder in the build folder have the webchat-appConfig.js I referenced from the html page where I want the chat. Shouldn't this be minified?

I thought I would get something minified to place at my Flex account(in assets where I have my plugins)?

Now, what do I do with the build folder? Here is the output after "npm run build". folder structure after build

Magnus Karlsson
  • 3,549
  • 3
  • 31
  • 57

1 Answers1

1

Twilio developer evangelist here.

Your Flex Web Chat build is not to be used like any other Flex Plugin as it has to standalone on a different web page. We don't have any opinion about how you include it in your application, so that build directory gives you a chunk of an application that you can include in your own front end however works best for you. We also have no opinion about the build process for your application, so you can minify the resultant JavaScript yourself.

edit

I just ran npm run build in a new flex-webchat-ui-sample app. The actual application itself is built in the static/js directory. You can see in there 3 JavaScript files and 3 source maps. You also need your webchat-appConfig.js which sets the config from outside of the React.

You can also see how it's loaded in build/index.html.

philnash
  • 70,667
  • 10
  • 60
  • 88
  • Hi, But how do I get a webchat.js file? Do you have any suggestion of how I can get a webchat.js file to deploy to my frontend? – Magnus Karlsson Sep 18 '19 at 10:29
  • I added some more to my answer, does this help? – philnash Sep 19 '19 at 02:47
  • Now we are on target with my question. Should i minify the two relevant files and use them? I.e. the files referenced from index.html. Because the default chat file in Twilio is a file calles Webchat.js which is minified and placed in the Twilio server assets area. – Magnus Karlsson Sep 20 '19 at 11:11
  • I'm not sure what you're referring to here. I just created a new Flex project and there is nothing in my [Twilio Assets](https://www.twilio.com/console/assets/public) section. Is this something you've done yourself? Where are you loading this Webchat.js from? – philnash Sep 23 '19 at 02:44
  • Thanks. This webchat.js file is something our partner setup for us that I wasn't aware of since they checked in the minified file and not the original files in the git repo. If i minify the webchat-appConfig.js file the flexFlowSid and accountSid becomes publicly available. These key's aren't used for anything but accessing the chat, right? Just making sure we donät expose something we shouldn't. – Magnus Karlsson Sep 23 '19 at 10:18
  • Those keys cannot be used to authenticate to anything else on their own. It's important to keep any API Secrets and your Auth Token safe though. – philnash Sep 23 '19 at 14:26
  • But if I minfy the webchat-appConfig.js file and publish the minified file on ourwebsite, they will get exposed. So how should I think about that particular issue? – Magnus Karlsson Sep 24 '19 at 11:12
  • 1
    Only the accountSid and flexFlowSid are in that file and they are ok to expose. – philnash Sep 24 '19 at 11:13
  • @philnash same problem here. After build I got `main.{hash}.chunk.js` and `1.{hash}.chunk.js` apart from config files. There is also some minified js code inside html. I have 2 different applications where I'll use this chat app. So is there a way both js can be merged to single js file to host. Is the code inside html file and `runtime~main.{hash}.js` (in build folder) also required? There is no proper documentation. – Kishore Barik Nov 26 '19 at 10:56
  • @KishoreBarik The Flex Web Chat sample we've been talking about here is built with create-react-app so the results are the results of building any React application that was bootstrapped with create-react-app. For more on how to deploy it, I would refer to the [create-react-app deployment documentation](https://create-react-app.dev/docs/deployment). Also check out the page on [production builds](https://create-react-app.dev/docs/production-build). – philnash Nov 27 '19 at 00:30