Page list, view page path points to localhost

[olafgleba]

Hi, i hardly dare to ask (because surely i miss something obviously and it sounds a bit silly)...

I transfer the local installation to the live environment. Frontend works fine, all admin links/buttons (like edit, settings tab etc.pp) also (e.g. prepends the live host root correctly). Except the view button (either in the page list or while in page edit mode) references to the/a localhost root instead of the real live host.

Instead of

https://www.host.tld/<path-to-page>/

i get

https://127.0.0.1/<path-to-page>/

when hovering over the "view" button/link.

This is confusing. Can't remember that i have to tweak anything in former projects. Just to confirm the database is sober, i queried the database,- there are no results for 127.0.0.1. So possibly is has something to do with the config or/and htaccess(?). But i can't find any false or missing input here, too. At least in comparison to many former projects on different hosts.

Setup: PW 3.0.200, mysql 5.6, PHP 7.2.23 (stable)

Any hints? Thx in advance.

[ryan]

@olafgleba Edit your /site/config.php file and look for: $config->httpHost and/or $config->httpHosts. In most cases the $config->httpHost should not be present (since PW will set it automatically at runtime), but the $config->httpHosts (plural) should be present, and it should be an array of http hosts ProcessWire is allowed to auto-detect and use. It will pick one of the hosts in that array to use for the request, so long as it matches the $_SERVER[HTTP_HOST]. If it can't find one that matches the $_SERVER[HTTP_HOST] then it will simply use the first one in your httpHosts array:

$config->httpHosts = [ 'www.company.com', 'dev.company.com', 'localhost:8888' ];

If it just contains one host then it'll always use that one, regardless of what's in $_SERVER[HTTP_HOSTS] …

$config->httpHosts = [ 'www.company.com' ];

If you do have the non-plural $config->httpHost present (like below), then it forces use of that hostname, rather than letting PW auto-detect from your httpHosts array. Though if there's only one host in your httpHosts array (like above) then of course the effect would be the same. 

$config->httpHost = 'www.company.com';

My best guess is that you either have $config->httpHost or httpHosts set with '127.0.0.1', or that you have httpHost/httpHosts undefined in your /site/config.php file. To fix it you need to add your www.host.tld to a $config->httpHosts array and preferably as the first item in it. If you do see a $config->httpHost (non-plural) in your config.php them I would remove it. 

[bernhard]

Hey @ryan I have a related issue where httpHost = "localhost:8080" is not working as expected: https://processwire.com/talk/topic/27110-how-to-work-with-site-on-localhost8080/

I have this config (for webpack live reloading):

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

The backend works and all links from the backend into the backend work (page edit, modules, etc). But links from the backend into the frontend (all "view" links, both in the page tree as well as the "view" tab on the page edit screen) do not work because PW makes HTTPS links instead of HTTP.

[ryan]

@bernhard Just tried to setup that situation and duplicate it but not seeing it. My best guess is that something is later overriding your $config->noHTTPS. But I would suggest not using $config->httpHost at all and instead changing it to:

$config->httpHosts = [ 'localhost:8080', 'localhost' ];

…just in case the the port isn't getting communicated in the host name. You can also set your $config->noHTTPS to be conditional for the host names:

$config->noHTTPS = [ 'localhost:8080', 'localhost' ];

Another thing to look at is to use your browser view-source to view those page editor view links to see if they really are https links in the source, or if something is changing them after the fact (or browser interpreting them as https due to a current or cached former .htaccess rule). 

Try manually setting $config->https = false; in your /site/config.php to see if that makes a difference. 

Do a bd($_SERVER['HTTP_HOST']) to see how the http host is communicated to PHP, just in case it's different from what you expect. 

[bernhard]

Hey Ryan, thx!! Your pointers helped me to find the issue. I simply had to change the proxy url from https://my.ddev.site to http://my.ddev.site then all my backend view links are HTTP links to localhost:8080 and work as expected ? Great!

Update: Ok it was a little more complicated but it works:

I added custom headers to the webpack proxy:

    devServer: {
        watchFiles: watchFiles,
        compress: true,
        devMiddleware: {
            publicPath: '/site/templates/' + bundleFolder, // webpack output is served from this path
        },

        proxy: {
            '/': {
                target: 'https://my.ddev.site',
                secure: false,
                changeOrigin: true,
                headers: {
                    'X-Proxy': true,
                }
            }
        },
    }

And then I set the config accordingly if the header is present on my dev config file:

$config->httpHosts = ['my.ddev.site', 'localhost:8080'];
if(array_key_exists('X-Proxy', getallheaders())) {
  $config->httpHost = 'localhost:8080';
  $config->https = false;
}

Now we have live reloading whenever a file changes and not only a working frontend but also a working pw backend served via localhost:8080 ? 

[olafgleba]

2 hours ago, ryan said:

@olafgleba [...] It will pick one of the hosts in that array to use for the request, so long as it matches the $_SERVER[HTTP_HOST]. If it can't find one that matches the $_SERVER[HTTP_HOST] then it will simply use the first one in your httpHosts array [...]

Thank you @ryan for clarifying this (i am sure this is explained somehere in the docs already, sorry...). I only have one $config->httpHosts array, e.g. multiple hosts. What i haven't considered: www.foo.bar is not the same as foo.bar. As i only defined foo.bar so far, but the site points to www.foo.bar, PW grabs the first array entry. Which is/was 127.0.0.1...

Probably i missed that, because on all my other sites i tend to point everything to foo.bar, as i find it a bit strange to prefix regular addresses with the subdomain www for no technical reason.

[olafgleba]

On 5/18/2022 at 5:35 PM, bernhard said:

[...] Now we have live reloading whenever a file changes and not only a working frontend but also a working pw backend served via localhost:8080 ? 

Hi @bernhard, just being curious ;-). My current dev environment (i am afraid the github version is not quite up-to-date ?) for PW projects is based on Gulp as task runner, the PHP internal server and (beside many other things) Browser Sync ( https://browsersync.io/ ) for live injection or reloading (depending on file type) on several devices. Works fine. The problem you describe above never occured to me.

As i follow your posts here in the forum quit frequently, i guess you are familiar with different approaches for dev environments. I, for example, never used webpack so far. But i am always keep my eyes(and mind) open... In your point of view,- are there some outstanding pros using webpack (and his eco system)?

I know, not very precise, but just wanted to take the chance...

[bernhard]

Hi @olafgleba thx for that question. I'm only using webpack because the company where I'm working now is using it, which has historical reasons and might change soon. I never got used to browsersync - maybe that would be easier ? 

 

[olafgleba]

On 5/19/2022 at 1:50 PM, bernhard said:

Hi @olafgleba thx for that question. I'm only using webpack because the company where I'm working now is using it, which has historical reasons and might change soon. I never got used to browsersync - maybe that would be easier ? 

 

Hi @bernhard, thanks for answering. I know this as well while working for agencies (freelance),- adapting to their environment. But if i have the choice, i stick with my current dev environment that all is build around Gulp and its ecosystem. And browersync intergrates here very smoothly. I guess thats one reason i stick for it for quite a time yet. 

[flydev]

Just to add my two cents to this thread. Generally in Webpack (should be avoided), or now Vite, you wil want to write your own config for the HMR (Hot Module Replacement).

Eg, add 127.0.0.1 to $config->httpHosts and then to configure Vite HMR: 

  plugins: [svelte(), ProcessWireMix()],

  server: {
    hmr: {
      protocol: "ws", // wss, http, https
      host: "127.0.0.1",
    },
  },

 

[bernhard]

Thx @flydev ?? would you maybe have time to post a tutorial with all the steps necessary to get started with ProcessWire + Vite to get all the modern frontend tooling + live reloading + working PW backend? That would be great! Or maybe @dotnetic

What is ProcessWireMix() or what does it do? Has anybody used uikit with purgecss and can show me how to do that? @Tom.

[flydev]

Yes I will do it for the weekend. About ProcessWireMix, it's a custom Vite plugin to handle the build and generate the new "loader", which is then used to make the app view. I put a sample code of the the generated loader, but you will understand better with the example ?

 

<?php // automatically generated at 2022-05-26T17:33:52.671Z by: yarn dev
namespace ProcessWire;

class ProcessWireMixAssets {
  const version = '2022-05-26T17:33:52.671Z';
  const files = [
    "additional_assets" => "assets/dark-theme.css",
  ];
}

function mix($file) {
  return (isset(ProcessWireMixAssets::files[$file]) ? ProcessWireMixAssets::files[$file] : $file);
}

function mixVersion() {
  return ProcessWireMixAssets::version;
}

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <link rel="icon" href="<?= $favicon ?>" />

  <title><?= $page->title ?></title>

  <?php if ($vite->isEnabled()) : ?>
  <script type="module" src="<?= $webappUrl ?>@vite/client"></script>
  <?php else :
    foreach ($vite->getCssAssets('src/js/app.ts') as $path) :
      echo `<link rel="stylesheet" href="{$path}">`;
    endforeach;
  endif;
  ?>

  <script src="<?= $vite->getAsset("src/js/app.ts") ?>" type="module"></script>
</head>

<body>
  <?php /// Inertia
  echo $inertia->tag;
  ?>
</body>

</html>

 

[flydev]

1 hour ago, bernhard said:

Has anybody used uikit with purgecss and can show me how to do that?

Did you tried purgecss-webpack-plugin ?

Steps to try:

1. yarn add purgecss-webpack-plugin
2. add the plugin to the webpack config

   	const PurgecssPlugin = require('purgecss-webpack-plugin');    
   
   	[...]
   
   	.webpackConfig({
           plugins: [
               new PurgecssPlugin({
                 paths: glob.sync([
                   path.join(__dirname, './path/to/**/*.php'),
                   path.join(__dirname, './path/to/**/*.js')
                 ]),
                 whitelistPatterns: [/^animation|cke|v-|active/]
               }),
           ]
       })

    

[flydev]

@bernhard I am getting back to you about this. I had the code not working when I tried it before releasing it, and finally the reason is that before this post, I given a try to get the SSR feature working with Svelte and Inertia. Still no luck, it's not really an issue, but we are screwed at this moment if the app require SEO, but again, I am just speaking about >Svelte<. Nevertheless, SSR works if you like Vue or React, or only JS. 

Another thing, if some people are also interested, I could share a CI/CD WIP setup for ProcessWire, started after the thread made by @wbmnfktr and the comment of @lokomotivan . Actually fully based on gitpod opensource doc site, taken to build this setup, where a contrario, SSR feature is working for Svelte.

[wbmnfktr]

11 minutes ago, flydev ?? said:

I could share a CI/CD WIP setup for ProcessWire

This would be awesome!