Customize or disable serve console message

[chasegiunta]

What problem does this feature solve?

In non-SPA setups, the server may be operating on localhost:8080 and serving assets from there, but the site is being viewed on a separate domain my-php-site.test. In order for HMR to work correctly we enabled things like headers: { 'Access-Control-Allow-Origin': '*' } & set our baseUrl as

baseUrl: process.env.NODE_ENV === 'production'
  ? '/'
  : 'http://localhost:8080/',

This works great, except the dev will receive this message running serve:

App running at:
  - Local:   http://localhost:8080/http://localhost:8080/ 
  - Network: http://10.0.1.12:8080/http://localhost:8080/

What does the proposed API look like?

Potentially, if a serveMessage is provided, it will override any console messages.

[yyx990803]

That's the wrong way to enable HMR. Use devServer.public for that purpose.

[chasegiunta]

@yyx990803 if you set devServer.public to localhost:8080 it's ignored. Requests fallback to window.location

[yyx990803]

You should set devServer.public to my-php-site.test to make HMR work.

[chasegiunta]

@yyx990803 in the older vue-webpack template, we were able to set devServer.publicPath to http://localhost:8080 to achieve what we needed since it supports full URLs, but that option is being overridden to options.baseUrl anyway (which may be a valid requirement), hence the reasoning for the FR.

EDIT: ah, just saw your response. will try, but it looks to be already requesting http://my-php-site.test/6a0ce03e6867e8fa287b.hot-update.json anyway

[chasegiunta]

@yyx990803 Yeah, that's not going to work. Apologies if I'm not communicating thoroughly, but the devServer isn't running under my my-php-site.test. The site is being served from my-php-site.test and during development, loading localhost:8080/app.js from the devServer.

[yyx990803]

@chasegiunta I see. That's weird, because in this case it should just work without any configuration. If it's really not, I will need a reproduction. Or I'd suggest taking a look at https://github.com/yyx990803/laravel-vue-cli-3

[chasegiunta]

Hmmm. That approach is going back to working from the dev server and proxying your site. I think we've had issues with this in the past, and I've seen many folks from the Laravel community & mix users who have the same dev environment as I (work in my-php-app.test, but load your app.js from the dev server localhost:8080) as shown in Mix's docs. Not saying it wouldn't work, and I can't quite recall why many people didn't do it this way. Will investigate further.

[csicky]

The title of this issue is about how to change the console message. The discussion is about something else. I understand that it was an AB problem and the discussion solves the real problem, but for people arriving here from Google there is no information about how to change the console messages from npm run serve.
I would like to be able to see only if there is a problem, if it's green, yellow or red. I don't want to give so much screen to the console, but in order to see what I want I have to see also the entire message which I know already:

 DONE  Compiled successfully in 24499ms      
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.100.10:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

I need a way to have the console say only:

 DONE  Compiled successfully in 24499ms      

[phistep]

I'm building an app against an API, which I mock locally, but sometimes run tests from my local setup against the public (staging) API endpoint. I can configure the endpoint URL using variables in .env files. So I have one to run locally against the mock, one to run locally against the public staging API and one to run on the staging server against the public staging API etc. I would like to see in the output not only the local and network URL, but also which API URL is configured, so I won't get confused which one I am targeting right now.