Fixing ViteJs Problem - Replacing 127.0.0.1 loopback address with server name

Typical vite.config.js contains the following statements:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

There may be cases where Vite generated 127.0.0.1 instead of your domain name.

Possibly because it defaulted to the loopback IP address, which is a common default value used for local development.

This happens when you don't explicitly specify the host configuration in your Vite config file.

The developer panel (Elements tab) shows that the generated link consists of an IP number 127.0.0.1

The developer panel (Console tab) shows the following error message:

To fix this, you need to explicitly set the host configuration to your desired domain name.

The updated config file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
  server: {
    host: 'https://iqmrt.ciroue.com', // Replace with your desired domain
  },
});

You can also replace host: 'yourdomain.com' with host: '/'. This change would make the requests to the root directory of the current domain instead of the specific domain "yourdomain.com".

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
  server: {
    host: '/', // root directory of the current domain
  },
});

The above examples use ES modules syntax and imports the defineConfig function and the laravel plugin from their respective modules. It then uses the defineConfig function to export the configuration object. These codes are suitable for projects that support ES modules.

Alternatively, configuration can be implemented using CommonJS syntax which requires the laravel-vite-plugin module using require. It then exports the configuration object using module.exports. This code is suitable for projects that use CommonJS modules.

Alternative config file:

const laravel = require('laravel-vite-plugin');

module.exports = {
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
  server: {
    host: 'https://iqmrt.ciroue.com', // Replace with your desired domain
  },
};

Check again via the developer panel (Elements tab)

By setting host to specific domain name e.g https://iqmrt.ciroue.com , Vite will use that domain name for the development server instead of the default 127.0.0.1.