How to get Vite to serve assets through Homestead?

Question

I have a fresh Laravel install (minus adding Vue.js) which is served via Homestead. When I visit my page in the browser, I see that the JavaScript is failing to load because of the follow error: https://my-homestead-url.test:5174/js/app.js.net::ERR_CONNECTION_REFUSED .

My homestead.yaml looks like this:

    ip: "192.168.56.12"
    memory: 2048
    cpus: 2
    provider: virtualbox
    
    authorize: ~/.ssh/id_rsa.pub
    ssl: true
    keys:
        - ~/.ssh/id_rsa
    
    folders:
        - map: ~/code
          to: /home/vagrant/code
    
    sites:
        - map: my-homestead-url.test
          to: /home/vagrant/code/my-homestead-project/public
          php: "8.0"
    
    databases:
        - my_homestead_url_db
    
    features:
        - mysql: true
        - mariadb: false
        - ohmyzsh: false
        - webdriver: false
    
    ports:
     - send: 5173
       to: 5173

and my vite.config.js file looks like this:

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import vue from '@vitejs/plugin-vue2';
    import fs from 'node:fs';
    import path from 'node:path';
    
    export default defineConfig({
        server: {
            host: 'my-homestead-url.test',
            https: false,
            hmr: {
                host: 'my-homestead-url.test',
            },
        },
        plugins: [
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    }
                }
            }),
            laravel({
                input: [
                    // 'resources/css/app.css',
                    'resources/js/app.js',
                ],
                refresh: true,
            }),
        ],
    });

I believe it'll be something to do with the fact that my homestead project is being served via ssl so, I tried to specify my.crt and.key files as per the docs found here

( https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener )

However, when I re-run vite (run as npm run dev --host 0.0.0.0 ), it still fails to load my JavaScript with connection refused.

What am I doing wrong?

Answer 1

Maybe your Homestead.yaml is not configured correctly. I see app.js file being requested on port 5174 but in your Homestead.yaml file you are redirecting 5173 port.

ports:
     - send: 5173    # change these ports to 5174
       to: 5173