Roots Discourse

WSL: DevUrl works. ProxyUrl doesn't and shows ERR_EMPTY_RESPONSE

Hello everyone. I’m trying to run my site in localhost to develop, but doesn’t works.

DevUrl is: http://mysite.localhost
ProxyUrl is: http://localhost:3000 (default)

This site was not developed by me. I get the files via FTP. I have not the git repo. I have only the production files of the theme in FTP. No Trellis. No Bedrock. Only Sage production files.

I my setup, I have:

  • XAMPP: Runnig PHP 7. I edited the config file (httpd.conf) and I created a VHOST for this custom URL “mysite.localhost” pointing to a custom location “d/SItes/mysite.localhost”
  • Node: v10.16.3
  • npm: 6.9.0
  • composer: 1.9.0
  • yarn: 1.17.3
  • WSL: To run Linux Ubuntu cmds in Windows
  • Windows Hosts: In Powershell, I edited c/Windows/System32/drivers/etc/hosts and I have this line 127.0.0.1 *.localhost localhost

First of all, I went on mnt/d/Sites/mysite.localhost/wp/wp-content/themes/mytheme/ and run in WSL:

  • composer
  • yarn
  • yarn build

After that, I start Apache and MySQL in XAMPP and access http://mysite.localhost and the site works fine. No console errors. All links works.

After that, I run in WSL yarn start. Everything is compiled, webpack starts and opens a new tab in Google Chrome: http://localhost:3000. The page loads for many minutes and shows ERR_EMPTY_RESPONSE.

Curious things:

  • Once http://localhost:3000 works, but I tried for many hours and suddenly works. I don’t know what happens and I couldn’t do it works again. Today, I’m reading and trying for 15 hours and doesn’t works.

  • After run and stop yarn start, I go to devUrl and the fonts are missing (404 in console). The font URL not found is: http://localhost:3000/wp/wp-content/themes/mytheme/dist/fonts/BreveSansText-Medium.woff2. If I run yarn build:production and access devUrl again, all works fine and the font URL is: http://mysite.localhost/wp/wp-content/themes/mytheme/dist/fonts/BreveSansText-Medium_a931b58c.woff - I don’t know why the URL changes in devUrl after run yarn start

  • UPDATE 2019-10-10: BrowserSync UI URL http://localhost:3001 works.

MY CODE

wp/wp-content/themes/mytheme/resources/assets/config.json

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp/wp-content/themes/mytheme",
  "devUrl": "http://mysite.localhost",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

wp/wp-content/themes/mytheme/resources/assets/build/webpack.config.watch.js

const url = require('url');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browsersync-webpack-plugin');

const config = require('./config');

const target = process.env.DEVURL || config.devUrl;

/**
 * We do this to enable injection over SSL.
 */
if (url.parse(target).protocol === 'https:') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;

  config.proxyUrl = config.proxyUrl.replace('http:', 'https:');
}

module.exports = {
  output: {
    pathinfo: true,
    publicPath: config.proxyUrl + config.publicPath,
  },
  devtool: '#cheap-module-source-map',
  stats: false,
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
    }),
  ],
};

wp/wp-content/themes/mytheme/resources/assets/build/config.js

const path = require('path');
const { argv } = require('yargs');
const merge = require('webpack-merge');

const desire = require('./util/desire');

const userConfig = merge(desire(`${__dirname}/../config`), desire(`${__dirname}/../config-local`));

const isProduction = !!((argv.env && argv.env.production) || argv.p);
const rootPath = (userConfig.paths && userConfig.paths.root)
  ? userConfig.paths.root
  : process.cwd();

const config = merge({
  open: true,
  copy: 'images/**/*',
  proxyUrl: 'http://localhost:3000',
  cacheBusting: '[name]_[hash]',
  paths: {
    root: rootPath,
    assets: path.join(rootPath, 'resources/assets'),
    dist: path.join(rootPath, 'dist'),
  },
  enabled: {
    sourceMaps: !isProduction,
    optimize: isProduction,
    cacheBusting: isProduction,
    watcher: !!argv.watch,
  },
  watch: [],
}, userConfig);

module.exports = merge(config, {
  env: Object.assign({ production: isProduction, development: !isProduction }, argv.env),
  publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
  manifest: {},
});

if (process.env.NODE_ENV === undefined) {
  process.env.NODE_ENV = isProduction ? 'production' : 'development';
}

/**
 * If your publicPath differs between environments, but you know it at compile time,
 * then set SAGE_DIST_PATH as an environment variable before compiling.
 * Example:
 *   SAGE_DIST_PATH=/wp-content/themes/sage/dist yarn build:production
 */
if (process.env.SAGE_DIST_PATH) {
  module.exports.publicPath = process.env.SAGE_DIST_PATH;
}

/**
 * If you don't know your publicPath at compile time, then uncomment the lines
 * below and use WordPress's wp_localize_script() to set SAGE_DIST_PATH global.
 * Example:
 *   wp_localize_script('sage/main.js', 'SAGE_DIST_PATH', get_theme_file_uri('dist/'))
 */
// Object.keys(module.exports.entry).forEach(id =>
//   module.exports.entry[id].unshift(path.join(__dirname, 'helpers/public-path.js')));

My theme structure: https://drive.google.com/file/d/1qWNK4FVfnblndtplVVaPRN0bBRQVVz6V/view?usp=sharing

Thanks!

A workaround I found to work on this project is:

Change the resources/assets/build/webpack.config.watch.js where publicPath is now using config.devUrl instead config.proxyUrl and remove BrowserSyncPlugin

const url = require('url');
const webpack = require('webpack');
//const BrowserSyncPlugin = require('browsersync-webpack-plugin');

const config = require('./config');

const target = process.env.DEVURL || config.devUrl;

/**
 * We do this to enable injection over SSL.
 */
if (url.parse(target).protocol === 'https:') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;

  config.proxyUrl = config.proxyUrl.replace('http:', 'https:');
  config.devUrl = config.devUrl.replace('http:', 'https:');
}

module.exports = {
  output: {
    pathinfo: true,
    //publicPath: config.proxyUrl + config.publicPath,
    publicPath: config.devUrl + config.publicPath,
  },
  devtool: '#cheap-module-source-map',
  stats: false,
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    /*new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
    }),*/
  ],
};

With that, I have no problems with fonts (below).

After run and stop yarn start , I go to devUrl and the fonts are missing (404 in console). The font URL not found is: http://localhost:3000/wp/wp-content/themes/mytheme/dist/fonts/BreveSansText-Medium.woff2 . If I run yarn build:production and access devUrl again, all works fine and the font URL is: http://mysite.localhost/wp/wp-content/themes/mytheme/dist/fonts/BreveSansText-Medium_a931b58c.woff - I don’t know why the URL changes in devUrl after run yarn start

THE NEGATIVE DOWNSIDE:
In every change I made in assets I have to manually build via yarn build. But at least I can to work on the project…