search

microsoft / sample-app-aoai-chatGPT

Sample code for a simple web chat experience through Azure OpenAI, including Azure OpenAI On Your Data.
MIT License
1.44k stars 2.15k forks source link

Running `npm run dev` gives blank page #978

Open karltb-SAM opened 4 days ago

karltb-SAM commented 4 days ago

Describe the bug I only get a perpetually-loading blank page when running $ npm run dev in the frontend/ directory. The Vite session does not show any errors or log messages either.

To Reproduce Steps to reproduce the behavior:

  1. Go to frontend/.
  2. Execute $ npm run dev.
  3. Navigate to the provided address in the browser.
  4. See blank page in the browser.

Expected behavior I expect a development build of the application that supports Vite's reload functionality.

iseabock commented 3 days ago

@karltb-SAM I can confirm this issue and I'm looking into it. In the meantime you might want to run the app with npm run watch if that will work for you.

karltb-SAM commented 3 days ago

Hello @iseabock and thank you for your answer!

Executing npm run watch seems to have built the page correctly, but I did not found a way to open it in the browser.

Although, I changed the forwardPorts field from 5000 to 50505 in devcontainer.json, which seems to make the dev script work somewhat. The page is now loaded in the browser. There are, however, some issues. The page's title in the browser tab is simply {{ title }} instead of the value I've set in the UI_TITLE environment variable in the .env file. In the same file, I've also set custom values for UI_CHAT_DESCRIPTION and UI_CHAT_TITLE, which are not displayed either. My custom favicon and chat logo are properly displayed.

Additionally, I got incompatibility messages when building the page. So I naturally tried upgrading the node version and chose the latest lts (v20.15.0). Using this node version gives the same problem I originally had.