Botframework-webchat: Samples 19a and 19b: README has wrong ports

[navzam]

Describe the bug

In samples 19a and 19b, the site is hosted on localhost:5000:
https://github.com/microsoft/BotFramework-WebChat/blob/ca62ce2791d4aa11dc9442543d72ef304ea2a44d/samples/19.b.single-sign-on-for-intranet-apps/web/src/index.js#L13
but the README gives instructions for port 3000. For example (non-exhaustive):
https://github.com/microsoft/BotFramework-WebChat/blob/ca62ce2791d4aa11dc9442543d72ef304ea2a44d/samples/19.b.single-sign-on-for-intranet-apps/README.md#L47
https://github.com/microsoft/BotFramework-WebChat/blob/ca62ce2791d4aa11dc9442543d72ef304ea2a44d/samples/19.b.single-sign-on-for-intranet-apps/README.md#L100

Expected behavior

Either the site should be hosted on port 3000, or the README should use port 5000.

[Bug]

[compulim]

In 19.a, we are hosting a few servers here:

• In development mode
  
  
  
  • React app: on port 3000, it will proxy to port 5000 for all REST API calls
  
  
  • Bot: on port 3978
  
  
  • REST API: on port 5000
  
  
  • At 30,000-feet level, end-user entry point is at port 3000
    
    
    
    
    
    • /api/* goes to port 5000
    
    
    
    • /**/* served locally thru webpack-dev-server configured by create-react-app
    
    
    
  
  
• In production mode
  
  
  
  • React app: not hosted, but served statically as HTML files by REST API server
  
  
  • Bot: on port 3978
  
  
  • REST API: on port 80
    
    
    
    
    
    • Will serve React app as static HTML files
    
    
    
    • Optional, if PROXY_BOT_URL environment variable is set, it will proxy /api/messages to the URL specified
    
    
    
  
  
  • At 30,000-feet, we have a single entry point on port 80
    
    
    
    
    
    • /api/messages goes to the bot if PROXY_BOT_URL is set
    
    
    
    • /api/* goes to the REST API
    
    
    
    • /**/* served statically (React app compiled)
    
    
    
  
  

For 19.b, we don't have React app. We write index.html et al.

• In development mode
  
  
  
  • Bot: on port 3978
  
  
  • Web app: on port 5000
    
    
    
    
    
    • This is mixed web server with both REST API and static HTML files (not React)
    
    
    
  
  
  • At 30,000-feet level, end-user entry point is at port 3000
    
    
    
    
    
    • /api/* goes to REST API
    
    
    
    • /**/* served statically
    
    
    
  
  
• In production mode
  
  
  
  • Bot: on port 3978
  
  
  • Web app: on port 80
    
    
    
    
    
    • Optional, if PROXY_BOT_URL environment variable is set, it will proxy /api/messages to the URL specified
    
    
    
  
  
  • At 30,000-feet level, we have a single entry point on port 80
    
    
    
    
    
    • /api/messages/ goes to the bot if PROXY_BOT_URL is set
    
    
    
    • /api/* goes to REST API
    
    
    
    • /**/* served statically
    
    
    
  
  

Do you see a discrepancies between the current sample and what I stated above?

[navzam]

@compulim I'm unclear (in 19b development mode, for example) how the user entry point is at port 3000 if the web app is on port 5000. Maybe I'm missing a step, but when I run the sample, I can't reach http://localhost:3000/. I have to go directly to http://localhost:5000/

[compulim]

For example, in 19.a. In development mode, you will need to run a few servers.

• React app: under /app/, run npm start will listen to port 3000, this is what we call create-react-app app, or CRA app
  
  
  
  • In /app/src/setupProxy.js, this is where we forward normal traffic from port 3000 to 5000
  
  
  • This is a feature in CRA called "proxying API requests"
  
  
• Bot: under /bot/, run npm start will listen to port 3978
• REST API: under /rest-api/, run npm start will listen to port 5000

If you are browsing port 5000 in development mode, you should not see the web page because port 5000 will only serve web page if it is built and statically located under /rest-api/public/.

(I am not confusing you with production mode here, feel free to ask me. 😉)

[navzam]

For 19a, I was mistaken. Everything works there.

19b still requires me to go to http://localhost:5000/

[compulim]

Yes. 19.b is a bit different. Because 19.b does not have a create-react-app, so it goes to 5000.

I agree, our 19.b README.md is wrongly point to port 3000, should be 5000 instead. 😄

[compulim]

Just hand-drawn this, but I think you got it now.

Blue line is development. Red line is production.

A better job for us would be a router to route traffic between CRA, REST, and bot. But I think we are too lazy, causing the confusion.