Brackets - Live Preview not working

Piju picture Piju · Aug 3, 2014 · Viewed 66.7k times · Source

I found this awesome program(html editor) called Brackets and it's by Adobe. Now reason why i got the editor was because i wanted to Live Preview PHP code, but i found out later that i needed a Wamp Server.

Now, i was in the mood of making an about page but i couldn't live preview. Live Preview Base URL is empty, and when i try to live preview, i get this: > http://puu.sh/aDkET/4209ec1192.png < and the lightning bolt is half orange(i heard it needs to be red to work). I have tried the lot... Entering as Live Preview Base URL to http(semicolon)//localhost:(insertporthere)/ <-- Wamp Server, tried only localhost, left it empty, I don't know how to make this work.. I am stuck and i basically need real preview..

Please, please help me! D: I have searched the internet looking for solutions, but no. If you can, a step-by-step tutorial would be much appreciated :)

Kind regards, - PiguFilms

Answer

peterflynn picture peterflynn · Aug 11, 2014

The Live Preview "Base URL" is the localhost URL that corresponds to the root folder of your project. Brackets uses this to map from a local path on disk to the server URL which serves up that same file: it takes the HTML file's path relative to the project root, appends that relative path onto the Base URL, and then launches the resulting full URL in Chrome.

So, for example:

  • If your page is at http://localhost/myapp/page.php and the page.php file is in a "myapp" subfolder of your project, your base URL is just http://localhost/.
  • If your page is at http://localhost/myapp/page.php and the page.php file is in the root of your project, your base URL is http://localhost/myapp/ (this way the path is "/page.php" relative to both bases).

If you think you have the Base URL set correctly but it's still not working, try going to the same URL manually in your browser to make sure your server is operating correctly.

More details on using Live Preview with your own local server can be found here: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.