Browsersync not working, and stuck loading localhost:3000

Hi guys,

I’m new here. I just set up Trellis, Bedrock and now trying to set up Sage.

I ran the composer command to set up my new theme in the themes directory:

composer create-project roots/sage mytheme dev-master
cd mytheme
yarn && yarn build

This all ran with no problems.

However, when I run yarn start, localhost:3000 opens up in my browser but just remains blank and keeps trying to load.

I’m able to access the Browsersync UI by going to localhost:3001 with no problem but cannot see anything on localhost:3000.

Also when I make any changes to scss or php files, there is no indication that it has picked up the changes.

My config.json file looks like this:

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

Going directly to http://testsite.dev works file and shows my wordpress site. But localhost:3000 just doesn’t load.

Any advice would be appreciated! Thanks guys

1 Like

Just an update, when I am not connected to any network, I’m able to load up localhost:3000 but when I’m connected to my router, localhost:3000 doesnt work, and neither does 192.168.0.152:3000 (the ip address of my computer)

Figured this out… it was the OS X firewall that was causing issues.

Disabled the firewall and had to do a restart before things worked

2 Likes

I’ve got these strange anomalies also in my dev machine and sure it is about my mid-2009 MBP :blush: and its conf (I would like to know one day what all I have done wrong while learning to use terminal, ssh, npm etc :slight_smile: ) that probably causes all this mess, because with almost every new project I do vagrant up today I need to restart all the engines (sometimes twice) to get live reload working properly in my machine :frowning: :smiley: :frowning: :smiley:

after my very first project set up almost 2 years ago Safari just lost ability to show anything from localhost:xxxx until this spring it somehow cured itself of this desease and works again …

I’ve experienced blank page after yarn run watch because

"devUrl"

inside theme/resources/assets/config.json

was different than canonical URL in ansible/development/wordpress_sites.yml

Hope this help to anyone with this issue.

6 Likes

+1 @aitor, That was my problem all along.
When I configured the composer, I mistyped, erased and re-writed on the console, but it logged all my keystrokes instead of just what showed on the screen before submitting.

Aparently I too was completely blind by Sage GitHub install page, they straightforward say that this step should be taken before Yarn:

Theme development
Run yarn from the theme directory to install dependencies
Update resources/assets/config.json settings:
devUrl should reflect your local development hostname
publicPath should reflect your WordPress folder structure (/wp-content/themes/sage for non-Bedrock installs)

¯\(ツ)

3 Likes

Thanks for that, sorted out my problem without too much heading scratching :slight_smile:

Hello
i am fetching same issues
here is my configuration
{
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “/app/themes/sage”,
“devUrl”: “http://saga_new.test”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
“app//*.php",
"config/
/.php",
"resources/views/**/
.php”
]
}

i was try all above solution but it not working … please help me…

2 Likes

Thanks a lot, dude, it help me on my Linux & Sage 8 :mage:

Yes! Helped me! Thanks.