LaravelMix example: process.env.DDEV_HOSTNAME only works without additional project hostnames

[mandrasch]

Hey, just as information, thanks for providing this:

Laravel Mix example (https://github.com/drud/ddev-browsersync#laravel-mix-configuration) suggests using

let url = process.env.DDEV_HOSTNAME;

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        proxy: "localhost",
        host:  url,
        open:  false,
        ui: false
    });

When there are Additional Hostnames configured in DDEV, DDEV_HOSTNAME returns a comma separated list.

For example main-site.ddev.site,subsite-1.ddev.site,subsite-2.ddev.site

We also noticed that host can be disabled all together and integration of browsersync still works? (I guess because proxy is used anyway and host is only for cli terminal output). So maybe we could leave it out of the example to avoid confusion? Not quite sure yet. 🤔

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        proxy: "localhost",
        open:  false,
        ui: false
    });

https://browsersync.io/docs/options#option-host

Best regards,
Matthias
PS: I could provide a sample repo if needed for reproduction.

[rfay]

A basic idea to make sure to use a single hostname would be ${DDEV_PROJECT}.${DDEV_TLD}

[tyler36]

Thanks @mandrasch .

Any interest in a PR?

[mandrasch]

Hey @tyler36, sure thing, currently occupied with other things. Hope I'll get to it in the next days! Cheers.

[mandrasch]

Hey, I prepared a demo repo with Randys suggestion: https://github.com/mandrasch/ddev-laravelmix-browsersync

For me it works fine using

let url = `${process.env.DDEV_PROJECT}.${process.env.DDEV_TLD}`;

But as far as I understand this is only for command line output. And "http" is displayed instead of "https".

Maybe we should just leave it out to avoid confusion?

Without .host it also works and output is the following:

mix.browserSync({
    proxy: "localhost",
    open: false,
    ui: false
});

[rfay]

Side note: additional_hostnames support (and additional_fqdns) added to ddev-varnish in ddev/ddev-varnish#9, not sure if this is a related situation.

[mandrasch]

Thanks for info! Haven't used varnish yet, can't say if this is related.

Regarding LaravelMix:

Added additional hostnames to my demo, works fine as well because it justs responds to :3000 port anyway.

LaravelMix has no support for subdomains / additional hostnames as far as I know, it's just compiles files based on one config and outputs them to the output folder.

My educated guess would be that we could just strip out the .host-setting 🤔 But maybe @tyler36 knows more about use cases.

[mandrasch]

Docs:

• https://browsersync.io/docs/options#option-host ("// Override host detection if you know the correct IP to use")
• https://laravel-mix.com/docs/6.0/browsersync (doesn't use host as well)

[tyler36]

@mandrasch

I was able to replicate the issue you describe. It occures with the laravel-mix and the vanilla javascript included.

I did a PR which explicity sets the URL (as suggested by @rfay ) and includes a docs update on additional hostnames. I prefer to see a project-based URL instead of an IP-based URL, which would be the case if we dropped the host config option.

How common are additional hostname projects? I think the PR works but it breaks auto-updates so perhaps a better solution is required.

[rfay]

There are quite a lot of uses for additional_hostnames and additional_fqdns.

[tyler36]

Change the PR to support addition hostnames out of the box.

@mandrasch does that work for you?

[mandrasch]

Change the PR to support addition hostnames out of the box.

@mandrasch does that work for you?

Hey sorry for the delay, can I install your updated PR as well with ddev get https://github.com/tyler36/ddev-browsersync/tarball/tyler36/https-support/ to test it?

(Test repo https://github.com/mandrasch/ddev-laravelmix-browsersync)

[mandrasch]

Just tried, doesn't work anymore: Unable to download https://github.com/tyler36/ddev-browsersync/tarball/tyler36/https-support/: Unable to download https://github.com/tyler36/ddev-browsersync/tarball/tyler36/https-support/: download link https://github.com/tyler36/ddev-browsersync/tarball/tyler36/https-support/ returned wrong status code: got 404 want 200

[tyler36]

@mandrasch

I think the tarball for #21 is: ddev get https://github.com/drud/ddev-browsersync/tarball/tyler36/https-support

[mandrasch]

Thanks very much, I pulled latest version into https://github.com/mandrasch/ddev-laravelmix-browsersync, did not change much in my repo. Still worked.

For my personal use cases I'll go without setting the host since I see no benefit in setting this (and also think it is confusing to read 'http://my-ddev-site.ddev.site:3000' instead of 'https://...:3000').

mix.browserSync({
    proxy: "localhost",
    open: false,
    ui: false
});

Thanks very much for the discussion here! Much appreciated! 🙏 🙏