Browsersync stuck on reloading

sage
1

Hi

I have installed the Sage 9 theme on a windows PC. I get this output

$ yarn start
/c/Program Files (x86)/Yarn/bin/yarn: line 3: readlink: command not found
yarn start v1.0.1
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

DONE Compiled successfully in 5141ms 13:53:35

[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://project-name.test
[Browsersync] Access URLs:

   Local: http://localhost:3001
External: http://10.0.0.49:3001

      UI: http://localhost:3002

UI External: http://10.0.0.49:3002

[Browsersync] Watching files…

DONE Compiled successfully in 3338ms

A browser opens a blank/empty page and its loading, but nothing appears.

When I go to

http://localhost:3002

I can see the Browsersync UI.

I run a xamp server on localhost:3000, but stopping this does not solve the problem.

I also have

127.0.0.1 http://project-name.test

In my hosts file.

I have disabled the firewall.

Here is my config.json

{
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “F:/xampp/htdocs/wp-content/themes/indredata”,
“devUrl”: “http://project-name.test”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
“app//*.php",
"config//.php",
"resources/views/**/.php”
]
}

Any ideas?

2

Update your proxyUrl port if 3000 is already going to be in use.

3

Many Thanks for the reply!

I stopped xamp, ran fkll :3000 and ran yarn start again.

[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://project-name.test
[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://10.0.0.49:3000

      UI: http://localhost:3001

UI External: http://10.0.0.49:3001

[Browsersync] Watching files…

Now its running on port 3000, but still I have a blank page thats loading.

I do not get any errors in the console.

I have tried to use port 3020. I have never used it before.

I find it strange that the UI works, but not the actual page. Perhaps BS does not fint the public dir.
I have also tried different publicPaths, but to no avail.

4

Can you access the site at http://project-name.test?

5

Hi

No, I get this error message

ERR_NAME_NOT_RESOLVED

I have this in my hosts file

127.0.0.1 http://project-name.test

I can not ping this

$ ping http://project-name.test
Ping request could not find host http://project-name.test. Please check the name and try again.

If I remove the http:// in the hosts file I can ping it.

$ ping project-name.test

Pinging project-name.test [127.0.0.1] with 32 bytes of data:
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128

Ping statistics for 127.0.0.1:
Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),
Approximate round trip times in milli-seconds:
Minimum = 0ms, Maximum = 0ms, Average = 0ms

But, if I remove the http:// from the config.js file. I get a 404 error in the browser when I run yarn

6

Your hosts file should not include the protocol (i.e. http://). All the hosts file does it tell your system what domain to resolve to a particular IP. You’re probably breaking it by including the protocol.

You also cannot ping something w/ a protocol: ping is doing just trying to resolve a domain to an IP—giving it a protocol will confuse it, because it will try to resolve the http://project-name.test as a domain, which it is not (it is a URL).

Your config.json does need the protocol though, because it is asking for a URL, not a domain.

1 Like
7

Thanks!

I don’t have the protocol in the hosts file and the ping replies. I have the protocol in the config.json file and get a 404 error

It leads me to think i might be the publicPath.

I have tried different versions

“publicPath”: “/wp-content/themes/indredata/”
“publicPath”: “\wp-content\themes\indredata\”
“publicPath”: “f:xampp\htdocs\wp-content\themes\indredata”
“publicPath”: “f:xampp\htdocs\wp-content\themes\indredata\”
“publicPath”: “f:xampp/htdocs/wp-content/themes/indredata”

The doble backslash is an attempt to make it work on windows.

Here you see the location I run yarn from

Andreas@SISSI /f/xampp/htdocs/wp-content/themes/indredata
$ yarn run start
/c/Program Files (x86)/Yarn/bin/yarn: line 3: readlink: command not found
yarn run v1.0.1
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

DONE Compiled successfully in 4297ms 20:55:05

[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://project-name.test
[Browsersync] Access URLs:

   Local: http://localhost:3020
External: http://10.0.0.49:3020

      UI: http://localhost:3001

UI External: http://10.0.0.49:3001

[Browsersync] Watching files…

8

Hi

It is not the publicPath that is the problem. I added this to my hosts file

127.0.0.1 example.test

With no servers running, I ( of course ) got the same 404 when visiting example.test as in the post above.

I have also tried an external server that routes back til the local machine

http://test.localtest.me

yarn start v1.0.1
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js
Webpack is watching the files…
 DONE  Compiled successfully in 1698ms                                                                                                               16:55:1
 DONE  Compiled successfully in 337ms                                                                                                                16:55:14

[BS] [HTML Injector] Running...
[Browsersync] Proxying: http://test.localtest.me
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3020
    External: http://10.0.0.49:3020
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.0.49:3001
 ----------------------------------
[Browsersync] Watching files...

Both
http://test.localtest.me
and
http://localhost:3020
gives me 404

at
http://localhost:3001
I see the browser-sync UI

I do not have any more ideas on what could be wrong. Do you?

9

bs

Here is the browsersync UI. All the links takes me to a 404.

Does Browsersync make logs?

10

If your test site 404s then Browsersync isn’t going to make things work.

Browsersync requires a working webserver already in place.

1 Like
12

Hi and thanks

I run a xamp server on localhost:3000

I guess there is something wrong with my apache setup.

Do you know any documentation for this?

13

Hi @andreaslyngstad - I may be misunderstanding you, but your xampp server shouldn’t be running on localhost:3000; that’s where Browsersync should be running.

If you need help setting up xampp, or configuring Apache inside it, I would visit those projects or Google for tutorials.

My recommendation if you want to make setting up a local server as simple as humanly possible would be to install Local by Flywheel. https://local.getflywheel.com/

I would make sure no xampp services are running, install Local, add a site, copy your theme, and update any host/path references as needed (e.g., the devUrl).

14

Lookup ‘xampp virtual hosts’

15

Thanks @mmirus - I installed Local by Flywheel: It works! I guess I had to setup some virual host in apache, But I could not find the proper settings for Browser Sync. Thanks to you I can start develop my first page using the sage theme.

@ben Thanks for all your replies and effort. There should be some mention of a working server in the listed dependencies under theme installation. There is a lot of components that gets installed with composer. It is a lot of new things to comprehend at once. Perhaps there could be a suggestion to use Local by flywheel for nobs like me. Just to get up and running.

1 Like