Atom PHP Live Preview

Question

I would like to achieve the impossible! After much research I simply can not get a live preview of a basic PHP website to work in my environment.

I have Windows 7/10 development machines and the first goal is to be able to make changes to PHP / CSS / SCSS files and see the changes appear automatically, on saving a document - without having to refresh the browser manually.

I'm using Atom v1.5, Wampserver v3.0.6 and have tried almost everything....LiveReLoad, BrowserSync etc etc.

The current setup works apart from live preview, in that I can display the websites and even go to different machines on the LAN and get to the website....but if I try and install Atom packages and or Chrome browser extensions, I generally get absolutely no response (ie no error message.)

Many thanks for anyone who can help with this - it surely must be a basic requirement for any professional developer?

Answer 1

Even though I've only just asked this question - I'd been working on it all day....however I have finally found a combination of tools and settings that worked!

The solution I found is:

1. Install Atom Live Server
2. Install Chrome Live Web Server Extension
3. Set the "Actual Server Address" in the Chrome Extension to whatever you have set in your Wampserver Alias - your httpd-hosts.conf file
4. Set the "Live Server Address" to your localhost + the port number gained from starting Atom Live Server: something like "http://127.0.0.1:4769"
5. Allow these requests through your firewalls on all applicable machines.

Note that Atom Live Server starts with a different port every time - so use the built in options to start on a fixed port, so that you don't have to keep changing the settings in the Chrome extension.

EG In Atom editor, ctrl-alt-5 to start it on port 5000