CODEWITHSUNDEEP
vitelaravel-9
Wyxos
Wyxos

Reputation: 595

Setup Laravel 9 + Vite on Windows 11

I have installed homestead on Windows 11 and configured an app mysite.test.

I've modified hosts to include 192.168.10.10 mysite.test

I followed the guide to install and configure vite for laravel 9 however the guide is oriented for Valet users.

If I try to run npm run dev with the default config, loading https://mysite.test attempts to load https://127.0.0.1/resources/js/app.js

I understand I would have to not use 127.0.0.1 for it to work, I've tried multiple ways i.e. modified /etc/hosts inside homestead to include 127.0.0.1 app.mysite.test. Updated the vite.config.js to include server.hosts = 'app.mysite.test' and finally added in Windows hosts, 192.168.10.10 app.mysite.test.

But I still can't get it to work and get the error GET https://app.mysite.test:3000/@vite/client net::ERR_CONNECTION_RESET and GET https://app.mysite.test:3000/resources/js/app.js net::ERR_CONNECTION_RESET

My vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        https: true,
        host: 'app.mysite.test',
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Upvotes: 0

Views: 1857

Answers (1)

Wyxos
Wyxos

Reputation: 595

Edit

After a few months, certain updates lead to a simpler configuration. The below assumes that you have already done the necessary to ensure that your browser recognize SSL from your homestead. You may also encounter an error that the JS/CSS failed to load. Opening the link generated at 127.0.0.1 and accepting the certificate will solve it onward.

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import mkcert from 'vite-plugin-mkcert'
import vue from '@vitejs/plugin-vue';
import eslint from 'vite-plugin-eslint'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      vue: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js'),
      '@app': path.resolve(__dirname, 'resources/app/js'),
      '@admin': path.resolve(__dirname, 'resources/admin/js'),
      '@common': path.resolve(__dirname, 'resources/common/js'),
      '@svg': path.resolve(__dirname, 'resources/svgs'),
    }
  },
  server: {
    https: true,
    hmr: {
      host: '127.0.0.1'
    },
    host: '127.0.0.1'
  },
  plugins: [
    mkcert(),
    vue({
      template: {
        transformAssetUrls: {
          // The Vue plugin will re-write asset URLs, when referenced
          // in Single File Components, to point to the Laravel web
          // server. Setting this to `null` allows the Laravel plugin
          // to instead re-write asset URLs to point to the Vite
          // server instead.
          base: null,

          // The Vue plugin will parse absolute URLs and treat them
          // as absolute paths to files on disk. Setting this to
          // `false` will leave absolute URLs un-touched so they can
          // reference assets in the public directly as expected.
          includeAbsolute: false,
        },
      },
    }),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/app/js/main.js',
        'resources/admin/js/main.js'
      ],
      refresh: true,
    }),
    eslint({
      fix: true
    })
  ],
});

Original Answer

So after several attempts, I found out the following works

  • If running inside Windows, host needs to be set to your machine IP "192.168.10.1" in my case.
  • If running inside the VM (homestead), host needs to be set to "192.168.10.10" Both will then let Laravel load the js and css files without any errors. However, if npm run dev is triggered inside homestead, HMR will not work if the files are altered from Windows. Though HMR will work fine if files are altered inside the VM (via SSH).

The final configuration

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

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

Using the plugin mkcert also addressed the issue with ssl. So the above answered my initial question but I find myself with the issue where HMR isn't working.

Upvotes: 1

Related Questions