Broken hosting - vite.config.js missing host: true

AspiringDeveloper-0025 5 Reputation points
2024-06-05T03:48:48.8633333+00:00

Is there a typo in this tutorial?

This was working for me as I progressed through page 3 - I had the container hosting the SPA on port 3000.

Then on page 5 when setting up the mock data in db.json to be hosted on port 5100 it instructs to edit vite.config.js to add proxy settings to setup 5100. This broke the app for me and left it in a state that my browser had a spinner with no page loading. The terminal output from the container was Error: connect ECONNREFUSED 127.0.0.1:3000

After investigating for a couple of hours I discovered that the vite.config.js from page 3 had an additional line in the server config which was host: true

I found when I added the line back in, my app started to work on port 3000 with my mock data being served up correctly.

Can someone at Microsoft please confirm that this is a typo in the tutorial and fix the vite.config.js on page 5 (also on page 4 although it does not instruct to change the config)?

ASP.NET Core Training
ASP.NET Core Training
ASP.NET Core: A set of technologies in the .NET Framework for building web applications and XML web services.Training: Instruction to develop new skills.
16 questions
{count} vote

1 answer

Sort by: Most helpful
  1. Pradeep M 1,470 Reputation points Microsoft Vendor
    2024-06-05T13:34:52.7933333+00:00

    Hi AspiringDeveloper-0025,

    Thank you for reaching out to Microsoft Q & A forum.  

    In the Microsoft Learn path, the instructions assume you are running the Vite development server directly in Visual Studio Code on your local machine, where it is accessible on localhost by default. However, when using containers, the server is isolated and not accessible from outside the container. To resolve this, you should add host: true to your Vite configuration. This setting allows the server to be accessible from your host machine and other devices on the network. Additionally, ensure your container setup exposes the necessary ports, for example, by mapping 3000:3000 in Docker. These adjustments align your containerized environment with the Learn path's requirements, ensuring proper server functionality and accessibility.

    Please feel free to contact us if you have any additional questions.   

    If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.      

    Thank you.

    1 person found this answer helpful.