Hello,
In past projects I used BrowserSync to access my project on my phone. Now BrowserSync isn’t included anymore in the project I add it myself (with help of others on this forum).
My bud config file looks like this;
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
const bs = require('browser-sync-webpack-plugin')
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets('images')
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('resources/views/**/*', 'app/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy('http://sitename.com.test')
/**
* Development URL to be used in the browser.
*/
.serve('http://0.0.0.0:3000')
/**
* Target URL to be proxied by the dev server.
*
* This is your local dev server.
*/
.use({
name: 'browser-sync-webpack-plugin',
make: () => new bs({proxy: 'http://sitename.com.test'}),
});
};
My package json look like this;
{
"name": "sage",
"private": true,
"browserslist": [
"extends @wordpress/browserslist-config"
],
"engines": {
"node": ">=16.0.0"
},
"scripts": {
"dev": "bud dev",
"build": "bud build",
"translate": "yarn translate:pot && yarn translate:update",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
"translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
"translate:compile": "yarn translate:mo && yarn translate:js",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print",
"translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
},
"devDependencies": {
"@alpinejs/collapse": "^3.10.2",
"@roots/bud": "5.8.7",
"@roots/bud-postcss": "^5.8.7",
"@roots/bud-sass": "^5.8.7",
"@roots/bud-tailwindcss": "5.8.7",
"@roots/sage": "5.8.7",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.2",
"alpinejs": "^3.10.2",
"browser-sync": "^2.27.10",
"browser-sync-webpack-plugin": "^2.3.0",
"flickity": "^3.0.0"
}
}
When I use the yarn dev command this is the result;
mode development hash d79ff4d3843ece3c84b6
bud 5.8.7 webpack 5.72.1
node 18.3.0
server url: http://0.0.0.0:3000/
proxy url: http://sitename.com.test/
webpack built bud d79ff4d3843ece3c84b6 in 3365ms
[Browsersync] Proxying: http://sitename.com.test
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3001
**External: http://false:3001**
----------------------------------
UI: http://localhost:3002
UI External: http://localhost:3002
My external url is broken now, and I can’t figure out why. So it’s not possible for me now to access the website on my phone.
Any suggestions :)?
