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

AspiringDeveloper-0025 15

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)?

Pradeep M 3,840 Reputation points Microsoft Vendor

2024-06-05T04:03:15.2933333+00:00

Hi AspiringDeveloper-0025,

Could you please specify the Learn Path/Module that you are going through?

Also, please provide the error along with the screenshots for reference.

Thank you.
ปัญญากร วันน้อย 0 Reputation points

2024-09-10T09:01:54.6333333+00:00

Hi AspiringDeveloper-0025,

Could you please specify the Learn Path/Module that you are going through?

Also, please provide the error along with the screenshots for reference.

Thank you.

1 answer

Pradeep M 3,840 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.
Please sign in to rate this answer.

2 people found this answer helpful.
AspiringDeveloper-0025 15 Reputation points

2024-06-06T20:59:12.04+00:00

Thanks Pradeep, this is for the tutorial https://learn.microsoft.com/en-us/training/modules/build-web-api-minimal-spa

The tutorial has options for "Develop in browser" or "Develop locally". I followed the "Develop locally" path which involves downloading a docker image and opening the container in VS Code. With this path, Vite is running in the container. I haven't tried following the "Develop in browser" path of the tutorial, which may work perfectly well without host: true in the Vite config, but for the "Develop locally" path it is essential to have this line.

Therefore I would suggest the tutorial either needs to specify using host: true (if it has no negative affects for the "Develop in browser" path) or the tutorial should specify a different Vite config depending on if you are following the "Develop in browser" or "Develop locally" path.

Pradeep M 3,840 Reputation points Microsoft Vendor

2024-06-07T04:59:31.8466667+00:00

Hi AspiringDeveloper-0025,

Thank you for your detailed feedback and for sharing your experience with the "Develop locally" path of the tutorial.

The Microsoft Learn paths, including the tutorial you referenced, are primarily designed to be run on a local machine using Visual Studio Code. The instructions and configurations provided are optimized for this environment. Running the tutorial inside a Docker container, as you have done, introduces some additional considerations that are not covered in the tutorial.

Regarding your suggestion:

1.Local Machine Setup: The tutorial assumes that the development environment is set up on a local machine with Visual Studio Code. In this context, the host: true setting is not necessary, as the server is directly accessible on localhost.

2.Containerized Environment: For users running the development environment inside a Docker container, adding host: true in the vite.config.js file is indeed essential. This setting allows the Vite server to bind to all network interfaces, making it accessible from outside the container.

To clarify and improve the tutorial, here’s what you can do to run it inside a Docker container:

Adjusting vite.config.js for Docker: If you are following the "Develop locally" path using a Docker container, you should modify your vite.config.js as follows:

export default defineConfig({ server: { host: true, port: 3000, // or any other port you are using proxy: { '/api': 'http://localhost:5100' // Example proxy setup } }, // other configurations });

3.Feedback for Tutorial Improvement: Your feedback is very valuable, and I will forward it to the tutorial's maintainers. While the current tutorials are designed for local machine setups, your suggestion to include specific instructions for containerized environments will be considered for future updates.

Thank you.

David Lu 5 Reputation points

2024-07-03T13:57:58.7933333+00:00

The Microsoft Learn paths, including the tutorial you referenced, are primarily designed to be run on a local machine using Visual Studio Code.

This module is not. The first exercise (https://learn.microsoft.com/en-us/training/modules/build-web-api-minimal-spa/3-exercise-create-front-end?tabs=visual-studio-code) has you clone a repo and open it in a dev container.

Pradeep M 3,840 Reputation points Microsoft Vendor

2024-07-04T04:28:53.1+00:00

Hi AspiringDeveloper-0025,

Thank you for pointing that out. You're correct about the tutorial involving the use of a development container. This setup differs from the usual local machine setup with Visual Studio Code.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

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

1 answer

Your answer