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/hostsand I have this line127.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:
composeryarnyarn 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 runyarn build:productionand 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 runyarn 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!