Browsersync is part of my pug to HTML build system and I use it with every website I make. Never used it with PHP but that’s also possible. Later I convert to PHP to use includes and other nice stuff.
im not running a local host, i just use my live host for testing… that way i know it works as intended and not some buried difference between them and my local i have to unearth.
Hi!
Today, we added a cool new feature to Pinegrow that lets you use BrowserSync to have a live browser preview of the page you are editing in Pinegrow. The preview is updated whenever you make an edit in Pinegrow - without having to save the file.
BrowserSync is a free tool that you can easily install on your computer.
The new feature is loaded from our live server, there is no Pinegrow update to install.
To use it, just restart Pinegrow Web Editor.
Note that Pinegrow PRO 5.98 and internet connection are required for this to work
You will also need to install BrowserSync, if you don’t have it yet.
Don’t worry, our guide covers all the steps and different ways you can use BrowserSync with Pinegrow.
2 Likes
Since I use my Mac as its own server, is BrowserSync redundant for me? The only difference I notice is that now I have to click twice to preview my page in a browser… once to click on the icon and then again to select “Open the page in a browser” from the dropdown menu, which doesn’t make any sense for me.
Is there a way to uninstall it so a single click on the icon will open the page in my browser? 
@randyrie This is the first iteration of the feature and any feedback is welcome to improve it, but aren’t you interested in not having to click at all?
No click at all?? How is this done? (I must be missing something).
@randyrie use CTRL + B (CMD + B on Mac) to open the page in browser preview without asking.
Yep… I already knew about this keyboard shortcut… but it opens into the PG server… I still have to manually adjust the URL so my php pages can run.
e.g., the PG server: http://localhost**:4000**/donations.html does not run server-side scripts like PHP whereas http://localhost**/faithcentre**/donations.html will run my PHP scripts.
Since I’ve gotten used to this ‘bump’, it is pretty much a mute issue for me now, albeit disappointing for a high-caliber app like PG.
@randyrie - While you can’t have a live preview you can have the browser update on save without clicking the button in Pinegrow or reloading the browser. I use MAMP and start my browser-sync in the same way that @Emmanuel does. I have my project in the directory where I’m serving my files from. In MAMP this is my application htdocs folder. So for example, if I have a project named “bootstrap-tut”, when I spin the server up it is served as “http://localhost:8888/bootstrap-tut/” I’m not sure how your localserver serves or from where, so you will have to make some modifications. The proxy and files will have to be changed to match your set-up.
To watch for changes I open a terminal and enter:
browser-sync start --proxy "localhost:8888/bootstrap-tut" --files "/Applications/MAMP/htdocs/bootstrap-tut/**/*"
Now anytime I save any file in my project it will automatically update the browser. Actually, it detects changes as I’m working, but only updates on save. I’m not sure if this will be an improvement in your workflow or not.
Cheers,
Bob
Thanks @RobM for your input.
I do use PG’s slick browser hookup whenever I’m building an html website but I more frequently build PHP websites so I can employ a database (PHP/MySQL) to collect, store, and retrieve data.
PG currently does not have the means to run server-side scripts but my localhost on my Mac running macOS 10.15.7 is setup with Apache/PHP/MySQL and runs my PHP webppages perfectly. I just have to alter the URL so it avoids using PG’s localhost server.
I’m hoping someday the PG folks will add the capability to their editor to run server-side scripts like PHP - more for convenience than necessity (Adobe’s Dreamweaver, which I’ve dropped since adopting PineGrow, had me spoiled since it ran server-side scripts natively).
With regards to the editor being able to run PHP (or any server-side) scripts - it is really unlikely. The program runs on the Chromium engine. Basically you are using a browser page with a lot of JavaScript when you run PG.
What about this kind of stuff? I have no clue that’s why I ask!
That is sort of the opposite. This library lets you control chromium from PHP, not run PHP scripts in chromium.
1 Like
i don’t like how adding this feature mangled my local host settings and connection to VSC… and i esp don’t like that it now requires two clicks to see the page in my browser, rather than one.
can we get toggle for this in the settings instead of making users interact with a sub menu under the button for the simple task of previewing your site in a browser, regardless of whether you are using browser sync or not… i am not.
it might be cool, but i don’t need it
2 Likes
Thanks for your feedback.
Regarding the process, instead of using the menu, you can use CTRL + B (CMD + B on Mac) to open the page in browser preview without asking.
1 Like
I agree with @randyrie on this.
I use my iMac localhost also with Apache/PHP/MySQL set up and it works well.
I also use the ResponsivelyApp browser with localhost to show the website in 4 resolutions
I am fortunate to have 2 x 27" screens though.
Browser sync could be better implemented in PG
As in real life the minority users have the loudest voices but I guess PG will stand or fall on usability by the majority in the end.
1 Like