Comments (11)
Just a last things. Which version of node are you using ?
Latest version
from starter-bootstrap.
Hi @amarineau,
if this issue is still relevant, could you try to define your localhost URL via the devServer open
option?
devServer: {
static: {
directory: path.join(__dirname, "assets"),
},
client: {
overlay: false,
},
open: [ 'http://localhost/starter-bootstrap' ], // Add your localhost URL here
liveReload: true,
hot: false,
compress: true,
devMiddleware: {
writeToDisk: true,
},
},
from starter-bootstrap.
Hi !
Thanks for your feedback and i tried add the open but nothing change. No self reload when i change something ...
Think i've a problem between my config of LocalWP and webpack.
I probably must use the "localhost" instead of "Site domains" for the router mode in LocalWP.
Edit: Yes it's :) !! But i don't really understand why doesn't work with "Site domains".
from starter-bootstrap.
Yes i tried but no results and i can confirm when i switch for localhost
modifications on assets/* are reload automatically.
It's a good way to add the open
to force the great localhost port but i think webpack have probably a deep solution to use a local site name and localhost together but i'm not used to it.
Thanks for your resarch and feedbacks
Great job in it !
from starter-bootstrap.
This issue is hard to reproduce without knowing your local server setup.
- The theme needs to be extracted in
{localhost}/wp-content/themes/my-bootstrap-theme
- The theme needs to be activated in your WordPress instance via
{localhost}/wp-admin/themes.php
After running npm run watch
you should see something like
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8080/
...
[webpack-dev-server] Content not from webpack is served from '/{localhost}/wp-content/themes/my-bootstrap-theme/assets' directory
(!) Ignore the provided [webpack-dev-server] urls. Instead just open your WordPress instance in the browser as you would do normally e.g. http://localhost/my-wordpress-site
and everything should work out of the box - even the live reload after changing the assets files.
Hope this helps!
from starter-bootstrap.
I've 2 local server configurations, first one with phpmonitor (valet) and the other one is Local.
But same same with my problem.
So my URI for check the site is http://test.local/
I don't understand why my configuration may be a problem.
In fact, i can check the wordpress when i use this http://test.local/ but the hot reloading doesn't work when I modify something in the theme's files.
from starter-bootstrap.
Just tested it on a Local installation (https://localwp.com - latest version). Everything seems to work fine and the site is autorefreshing after modifying main.scss
.
Just to be clear. Hot reloading only works when updating a frontend file like .scss/.js
in the /assets
directory. It will not work with .php
files, etc.
This issue already has been labeled as help wanted so maybe someone else from the community knows a solution to your problem.
from starter-bootstrap.
Yeah was clear :)
Just a last things. Which version of node are you using ?
from starter-bootstrap.
Did you try to add your actual site domain (i.e. http://test.local/, etc.) in open
?
And could you confirm that after switching to localhost
everything is working now?
If so, we'll update the webpack config to include the additional open
option.
Thanks in advance!
from starter-bootstrap.
Hey there !
After a long time, i've found the solution !
This one can reload the page during modifications. This script is probrably optimizable but it's work fine for me.
Feel free to get this one if you would try it.
You can (finally) close this issues ;)
const path = require('path');
const removeEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const webpackConfig = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...webpackConfig,
mode: 'development', // Use development mode
devServer: {
static: {
directory: path.join(__dirname, 'assets'),
},
client: {
overlay: false,
},
open: true,
liveReload: true,
hot: false,
compress: true,
devMiddleware: {
writeToDisk: true,
},
proxy: {
'/': {
target: 'http://mysite.local', // URL of your local WordPress site
changeOrigin: true,
},
},
watchFiles: {
paths: ['**/*.php'], // Watch PHP files for reloading
options: {
ignored: /node_modules/,
},
},
port: 8080, // Port for the Webpack development server
},
context: path.resolve(__dirname, 'assets'),
entry: ['./main.js', './main.scss'],
plugins: [
...webpackConfig.plugins,
new removeEmptyScriptsPlugin({
stage: removeEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
}),
],
};
from starter-bootstrap.
Awesome. Thanks for posting your workaround @amarineau - this may be helpful to others!
from starter-bootstrap.
Related Issues (20)
- New user of this wonderful starter theme and upgrade, add zip package creation HOT 1
- Gutenberg Block Editor not adding styles. HOT 1
- How can I import jQuery and other js files to main.js? HOT 6
- Error in plugin "webpack-stream" HOT 1
- Latency with Browser reload HOT 1
- Why both gulp and webpack ?? HOT 1
- the_content(); does not work anywhere in template
- Site brand logo? (Navbar) HOT 1
- Please show a woocommerce sample HOT 1
- WordPress 6.01 Breaks Menu HOT 2
- Deprecated dependencies? HOT 2
- wordpresscom include HOT 1
- Use of content width HOT 1
- Inconsistent use of curly braces for implications HOT 1
- Critical Error Caused by Footer HOT 1
- Color modes not work HOT 2
- Css HOT 4
- Package vulnerabilities HOT 2
- Unable to be override files via child themes HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from starter-bootstrap.