How to Configure Vite to Allow the Docker Host 'frontend_web'?

Below is one approach to solving your issue by explicitly configuring Vite’s dev server rather than relying on an external plugin.

Update Vite Configuration

In your project's root, open (or create) your vite.config.js file and add the allowed host configuration to the server section:

JSCopied
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    // Allow the host name from your docker-compose network
    allowedHosts: ['frontend_web']
  }
})

This change tells Vite to accept requests from the host "frontend_web", which is the alias used by Docker Compose.

Troubleshooting the Plugin Error

The error you encountered with "vite-plugin-allowed-hosts" suggests that the package may have issues with its entry points as specified in its package.json. Since Vite already supports configuration for allowed hosts via its built-in settings, using the plugin is unnecessary.

Next Steps

1. Rebuild your Docker container:
   Rebuild the container so that your updated configuration is included:

   CONSOLECopied
   $ docker-compose build

2. Restart the service:
   Start or restart your container to see the changes take effect:

   CONSOLECopied
   $ docker-compose up

3. Verify the setup:
   Open your web browser and navigate to the appropriate URL (such as http://localhost:5173/ if using the default Vite port). You should no longer see the blocked host error.

This approach leverages Vite's native configuration capabilities, avoiding dependency issues with third-party plugins while correctly adapting the configuration to your Docker Compose environment.