How to work with site on localhost:8080 ?

[bernhard]

We are working with webpack and have a devServer running and proxying requests to our DDEV powered pw site. That way we get live updates for frontend development when we save any file that is watched by webpack. To get live updates we run "npm run serve" which makes the pw site available under localhost:8080

The backend also works on localhost:8080, but what annoys us a lot is that once we click any of the "view" links in the backend, we land on the regular ddev url (which is something like mysite.ddev.site) which due to webpack does not have any of the JS and CSS assets in place and therefore is not usable...

It seems that ProcessWire is using the host of $config->httpHosts and not the current browser URL that it is running on. Is there any settings we can change to make the backend show edit links with localhost:8080 ? I've tried changing $config->httpHosts to 'localhost:8080' but then the backend uses HTTPS urls for the view links even though the template settings say HTTP or HTTPS (or even with HTTP only I get HTTPS urls). Also changing the config file whenever we use npm run serve is a little tedious...

Any ideas how we can improve that? Thx!

[AndZyk]

Hello @bernhard,

you can add multiple httpHosts in your config file as array:

$config->httpHosts = array(
  'example.dev',
  'localhost:8080'
);

Source: https://processwire.com/docs/start/variables/config/

 

Also you could have a separate config file "config-dev.php" for your development environment:

Quote

You may optionally maintain a separate development configuration file at /site/config-dev.php. When present, ProcessWire will use this file rather than /site/config.php. This may be useful on your development and/or staging server and allows you to maintain the same /site/config.php file between staging and production server. As an example, your /site/config-dev.php file may have the database connection information specific to your development server, while your /site/config.php has the database connection information specific to your production server. This prevents the possibility of overwriting your production server's configuration file during migrations and mirrors. Of course, you will want to ensure that your config-dev.php file does not end up on your production server by adding it to the file exclusion list of whatever tool you are using to transfer files.

 

For the HTTPS issue, you could try to this:

$config->noHTTPS = 'localhost:8080';

Source: https://processwire.com/blog/posts/pw-3.0.99/

I have never tried the noHTTPS option, but maybe it could work.

 

Regards, Andreas

[bernhard]

Hey @AndZyk thx for your ideas! ? 

3 hours ago, AndZyk said:

you can add multiple httpHosts in your config file as array:

$config->httpHosts = array(
  'example.dev',
  'localhost:8080'
);

Yes, I've tried that, thx, but it will always use example.dev - no matter which sort order I use ? 

3 hours ago, AndZyk said:

Also you could have a separate config file "config-dev.php" for your development environment:

Yes, thx, I'm using that for a long time already https://processwire.com/talk/topic/18719-maintain-separate-configs-for-livedev-like-a-boss/ - the problem is that the local dev config can either have host example.dev OR localhost:8080. That depends on wheter I run "npm run serve" or not. Ok I can change the host in the config file based on SERVER request uri I guess...

3 hours ago, AndZyk said:

For the HTTPS issue, you could try to this:

$config->noHTTPS = 'localhost:8080';

Thx, I've tried that one as well but all view links are still being https...

[AndZyk]

18 hours ago, bernhard said:

Yes, I've tried that, thx, but it will always use example.dev - no matter which sort order I use ? 

You are right. The sort order doesn't seem to matter. What seems to matter is the closest match:

 

18 hours ago, bernhard said:

Yes, thx, I'm using that for a long time already https://processwire.com/talk/topic/18719-maintain-separate-configs-for-livedev-like-a-boss/ - the problem is that the local dev config can either have host example.dev OR localhost:8080. That depends on wheter I run "npm run serve" or not. Ok I can change the host in the config file based on SERVER request uri I guess...

Strange that it is only possible to set one host in the config-dev.php. Could this be a bug?

But yes in this case some sort of if condition could be the way. Either with an own config variable or the PHP server variable.

If you have a $config->httpHost (without s) defined, it always seems to come first:

if ($config->webpackHost) {
	$config->httpHost = "localhost:8080";
}

 

18 hours ago, bernhard said:

Thx, I've tried that one as well but all view links are still being https...

Ah, then this seems to be something webpack specific. I have no experience with webpack, i am still using good old CodeKit on Mac for compiling. But I am wondering why with webpack your assets don't work on both hosts. With CodeKit I got my live reload host (my-mac.local:5757) and my normal host (example.dev) and both show the same assets.

[Marc]

So the problem is that PW refuses to generate links for localhost:8080? If I add two domains to $config->httpHosts then depending on which domain I open the site on, the backend will generate the correct links. Have you tried setting up the webpack development server with a custom domain on port 80? Like mysite.webpack.ddev.site?

[bernhard]

Hi @Marc I try to explain it again ? 

The problem is that if I run "npm run serve" the webpack devserver is responsible for serving the JS and CSS assets. The cool thing about that is that the browser will reload automatically whenever a file is changed which is especially handy on frontend development.

This works great as long as you are on the devserver host, wich is http://localhost:8080 in our case. We don't have HTTPS here as it is not easy to setup (according to my colleague).

The problem is, that when I want to change something in the backend (eg for creating pages) I head over to http://localhost:8080/processwire. So far so good. Then I create a new page. Also good. But then I hit "Save + View" and I end up on an error page as PW tries to open HTTPS://localhost:8080 instead of HTTP. Same goes for the "view" tag in the page editor and also the "view" action on the page tree.

Hope it is clear now?

[Marc]

54 minutes ago, bernhard said:

Hope it is clear now?

Sorry, I misunderstood the problem. So PW is generating https links instead of http links for localhost:8080. Have you tried visiting http://mysite.ddev.site/processwire? Do those URL's get 'upgraded' to https as well?

[bernhard]

Ryan helped me to find the issue in another related thread: https://processwire.com/talk/topic/27136-page-list-view-page-path-points-to-localhost/?do=findComment&comment=224041

?