Browser sync, Wordpress and MAMP

sage
1

Running gulp watch tries to launch (but never does) my Sage-themed site at http://localhost:3000

Problem is, I normally manage my test WP sites using MAMP. For example: http://localhost:8888/sandbox/

Previously, when using Roots 7+ with LiveReload, this wasn’t the case. I was able to have my site watched at: http://localhost:8888/sandbox/

What is the correct setup? Should I change my WP site url and/or protocol number?

Looking at manifest.json, visiting http://example.dev locally doesn’t produce anything either.

Also, I’ve confirmed BrowserSync is running on http://localhost:3001/

2

Alright, so we know browserSync is working because you can get to it with :3001…

First of all, have you tried updating the devUrl at the bottom of the manifest.json like it says in the documentation?

If that doesn’t work, you might have to play with your proxy settings in the browsersync task in the gulp file, or use virtual hosts with mamp, and then set your devUrl to that virtual host.

Let us know if that gets you going. Also, I know people get comfy with MAMP but I would really recommend checking out some MAMP alternatives like our very own Bedrock, VVV, or any WordPress vagrant box. MAMP really doesn’t mimic any live production server.

3

Inside gulpfile.js, setting BrowserSync’s proxy to: "localhost:8888/sandbox/" remedied that, but I’m sure there’s a smarter way.

@JulienMelissas Thanks, the server-side is a bit foreign to me. Yes, I’ve been using MAMP all these years just because I didn’t know any better. I will check out some better alternatives though.

1 Like
4

@djmtype change

to localhost:8888/sandbox/

2 Likes
5

Thanks @austin. That makes more sense to place the URL inside the manifest.

6

I had a similar problem (even if my final address is htt://mywebsite:8888) opened a github issue and found a solution by adding the snippet below the the base.php file.

<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.2.1.0.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));</script>

Hope that it helps.

7

I think i have the same Problem!
I am a newbie with this topic. Therefore i purchased the video “Theme Development with Gulp and Bower”. I followed the instructions and managed to install all components. Then i wanted to run BrowserSync with “gulp watch”

. It opens a new tab with localhost:3000 but it loads and loads until “server not found” message appears (timeout). whats wrong? I can access localhost:3001 to see BrowserSync settings. I have no clue of what is wrong here. I am using Mamp for Mac on my localhost with default ports. So when i access http://localhost i get to my root (= my web root is a folder in my users dir). In my root i installed wordpress and sage theme: _htdocs/sage/Wordpress/wp-content/themes/sage
so when i access localhost, i get into /_htdocs/

8

found the problem (thanks to austin). i had to edit the file manifest.json -> devUrl to (in my case) http://localhost:3000/sage/Wordpress/
you should point that out more clearly. because it was mentioned nowhere.

9

Hey @nicmare

It’s mentioned right here: https://github.com/roots/sage/blob/6786e17a9683ad4c16c89c46727f06b0e03e376e/README.md#available-gulp-commands

If you think there is a better way to call attention to that I would appreciate a pull request. We need all the help we can get.

1 Like
10

Submitted a PR for ya @austin & @nicmare: https://github.com/roots/sage/pull/1380

11

I would like to share my case.

I’m using MAMP (so far, until I have been acquainted with VV) with the Apache port 80.

I run into a lot of issues, until "devUrl": "localhost/wordpressinstallation" works!

Thanks guys

2 Likes
12

I seem to be having the same issue, but instead of it going to my localhost:8888 path, it goes to localhost:3000.
I updated devUrl to http://localhost:8888/path-to-my-bedrock-project
and I tried it with /web and now just about any path I could think of so, sorry if this is a n00b question, but is there anything else I could be doing wrong or another way to set this up with bedrock & sage using MAMP?
Thank you!

1 Like