search

aws-samples / aws-lex-web-ui

Sample Amazon Lex chat bot web interface
Other
733 stars 468 forks source link

Updates to vue component is not reflecting. #725

Closed Shubham1500 closed 1 month ago

Shubham1500 commented 1 month ago

Hi Team,

This might be pretty obvious, but I am having issues as any updates to Vue component is not reflecting when running application from the parent folder. Steps followed -

  1. Added a div in Message.vue, build the code and executed npm start from aws-lex-web-ui\lex-web-ui directory and able to see my changes on UI. After that
  2. Successfully ran make command on aws-lex-web-ui\dist directory. Running npm start on aws-lex-web-ui directory.

I also tried to run npm run build-dist from ~/lex-web-ui and then copy the files from ~/lex-web-ui/dist/bundle to ~/dist

I am able to connect to Lex bot but any changes made to vue components are not reflected when I run from parent folder.

atjohns commented 1 month ago

This looks like a bug in the build that was introduced on last release, I will get a fix out asap.

atjohns commented 1 month ago

I will not get a new deployment out today but if you take the development branch version of vue.config.js you should be able to build successfully again.

Corrected File

Shubham1500 commented 1 month ago

Thanks for the prompt response @atjohns I will try this.

Shubham1500 commented 1 month ago

@atjohns I tried updating the file you shared. Executed make command, and ran npm start on aws-lex-web-ui directory.

Still the updates made to .vue file is not reflected here. Though I am able to connect to Lex successfully. Just the vue component changes are not reflecting. Requirement is to respond with a html form from vue component.

If I run npm start in lex-web-ui directory I am able to see my changes on UI.

Additional details on changes - Downloaded code from github. Updated lex-web-ui-loader-config with cognito and lex details. Updated Message.vue to add a div to test changes.

Snippet -

image

atjohns commented 1 month ago

So your localhost version is showing the changes, but your deployed version is not. Can you walk me through your deployment steps?

Are you following the deployment steps outlined here: https://github.com/aws-samples/aws-lex-web-ui?tab=readme-ov-file#building-and-deploying-your-own-lexwebui

Shubham1500 commented 1 month ago

@atjohns I discarded all changes, updated config files lex-web-ui-loader-config and the fix you shared. Ran npm install and npm run dev on root folder and changes are reflecting now.

Edit - To reflect the changes I also had to run 'npm run build:lib-prod' command in 'aws-lex-web-ui\lex-web-ui' directory. and it will generate minified files in lex-web-ui\dist\bundle. Copy all the files from here and replace in root dist folder.

Looks like the solution worked, Let me know if anything needs to be changed in the process followed. I will add vue components and see if they reflect as expected. Thanks for prompt response.