Demystifying Notoriously popular AWS Lex Webui Repo
An hands on guide on using AWS Lex web ui git repo
By SUBRATA FOUZDER
The Lex WebUi Repository
Off let I have been working on some Chatbot creation and for obvious reason, we have chosen AWS Lex for its capabilities. And while doing the quick google search https://github.com/aws-samples/aws-lex-web-ui came in as the most vetted repo.
Some obvious notable benefits of this are
- The entire stack is set up in One-click cloud formation
- Inbuilt state management
- Cognito identity pool integration
- Standalone and iframe integration and communication inbuilt
- Different kind of CI/CD-based deployment options
- Local node js development
- Responsive mobile-ready using vue
- Multiple response card markdown support
And I did not know what I have got into unless I went through 3 days to set it up and came up with very important learning about this AWESOME REPO
Always use us-east-1 or make sure you are deploying it in the region where Lex is supported ( and it’s supported as of now Sept 2019 to limited regions)
The cloud formation template given in the website uses its own bucket to serve the code. To have your own code there is a deployment process through which you can deploy your own bot. Go through this https://github.com/aws-samples/aws-lex-web-ui/blob/master/templates/README.md and scroll to Deploy Using My Own Bootstrap S3 Bucket
The below things will save a lot of time
Caveats1: The S3 bucket needs to be in a Lex supported region
Caveats2: There has to be a folder in the bucket which you have to mention in the cloud formation bucket prefix section while launching the CF template again, [even if this is written as optional there is a / issue in the code which will not resolve if you do not give the folder name]
Caveats3: Use an EC2 instance if possible to run the build script from, as this needs to run a Makefile. Installing Cygwin or some other ways from a Windows machine will be difficult and will cost you extra time. There is a linter and it will give you an error if try to run from Windows because of m character issues.
Cavetas4: make file gets time stamp issues if there is a time difference between your system time and AWS machine time
AWS Cognito Identity pool configuration
This cloud formation tool already comes with an Identity and pool which has Cognito authentication created. While using your own S3 bucket make sure you keep the poolid blank but poolname a unique name. This will create a new user pool and identity pool. The user pool also adds the callback URL and configures the domain. Go through this https://github.com/aws-samples/aws-lex-web-ui/blob/master/templates/cognitouserpoolconfig.yaml if you need more information. If you give an existing pool id and name it will NOT WORK as the domain and callback URL is not configured. You need to add these in the userpool and app settings.
Using your existing BOT
The Bot import and export feature in Amazon only will work if you do it in the same region, it will NOT work if you do it across the region if the bots are having Lambda function. The lex and Lambda service role has to be configured manually. For the cloud formation template in bot name just mention as existing bot name which is present in the region and create a new identity pool as mentioned above, using the existing pool needs a domain name and callback URL configuration, Which you have to configure manually. The bot export and import python API https://github.com/aws-samples/aws-lex-web-ui/blob/master/templates/README.md is broke, as I had tested it on 12 Th September. It is better to Use the console to import your bot and then use that as an existing bot in the cloud formation example.
Configuration and CSS change
Refer to this https://github.com/aws-samples/aws-lex-web-ui/blob/master/src/README.md#chatbot-ui-configuration-loading for details of the parent and iframe configuration. There are different configuration files which we can change the configuration. If you want to change some basic css you will have to change the below files