4

Adobe Brackets has a live preview feature which lets me view a HTML webpage whilst I'm working on the .css and .html files.

I'm now starting work on a WordPress website which involves .html, .css, .js and .php files. How can I live preview a WordPress website using Brackets?

henrywright
  • 195
  • 1
  • 4
  • 14
  • This is something the Brackets community is aware of, but as of right now the Live Preview functionality will not work with server based websites (i.e. CMS powered website like WP). You can follow the latest here: https://github.com/adobe/brackets/issues/3007 – Trevor Feb 08 '15 at 18:26

3 Answers3

3

I think I figured out a solution to this!

You can set a Live Preview Base URL in your project settings. When Brackets tries to preview the page, it will load the file name and path in your project of the current file, appended to the end of that base URL.

The issue with WordPress is that the path and filename of the php file you are working on in your project is rarely in any way related to the URL you will be accessing to execute that code and view your template page.

So, what do we do if we want our server to serve up a different page than what the browser requested? URL rewriting!

I set my Base URL in brackets to http://server.dev/theme/ and then created an .htaccess file for Apache on my development server. Here's an example:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule theme/archive.php "/?m=201510"
    RewriteRule theme/ "/"
    RewriteRule theme/header.php "/"
    RewriteRule theme/footer.php "/"
    RewriteRule theme/page.php "/?page_id=16080"
    RewriteRule theme/search.php "/?s=asdf"
    RewriteRule theme/sidebar.php "/"
    RewriteRule theme/single.php "/?p=16247"
</IfModule>

As you can see, you need to choose some arbitrary page requests for some of the files you'll be editing.

To be sure, there are many other issues with workflow and refreshing, at least in testing on Brackets 1.5, but this solves one big problem of using Brackets' Live Preview for WordPress.

NReilingh
  • 5,737
  • 3
  • 27
  • 52
2

You can use Live Preview with your own backend (such as a WordPress server), but it comes with certain caveats:

  • You need a server running locally, pointing at the same folder you have open for editing in Brackets
  • Live HTML updating is disabled -- though you still get live CSS updating (and selector highlighting). Brackets falls back to simple "live reload" when you edit HTML, PHP, or other files.

The documentation has more detailed info: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

peterflynn
  • 417
  • 2
  • 10
  • 1
    Only thing is I found if I use Live Preview with a local server and a WordPress site, it tries to load PHP files as part of the website path. For a CMS this is not correct. For example if my page template file name is pg-home.php I go to live preview and it load: http://site.local/pg-home.php which is not correct. Am I missing something obvious here? – Trevor May 01 '15 at 17:54
  • @Trevor Just thought of something that could possibly work for this -- using a RewriteRule on your custom server to make brackets THINK it's loading the file it wants to preview successfully... I'll add an answer if it works. – NReilingh Dec 21 '15 at 04:03
0

I wish you could, however Brackets' Live preview feature seems to be built around a static workflow. There's no support whatsoever for previewing any dynamic languages and, as far as I know, there's no plans to add it either.

It's a shame too because it renders the app completely useless to me. :-/

Joey the Squid
  • 1
  • Note: you _can_ still get live CSS updating (or LESS or SCSS) even if you have dynamic content coming from your own backend. See my answer below. – peterflynn Nov 06 '14 at 22:37