Live Editing Server Files with Edge Code/Brackets

If you haven’t already heard of Adobe Edge Code or Brackets, it is a new HTML/CSS/JS code editor that enables a rapid development cycle by connecting directly to your browser for automatic real-time updates to the HTML content running inside the browser. This promotes rapid development, and allows you to focus on writing your code rather than worrying about all the steps required to switch between your editor and browser and step through development and debugging iterations.

In most contexts we talk about the live HTML/JS/CSS development perspective on the client side, but I’d also like to highlight that Adobe Edge Code and/or Brackets can be used to rapidly develop dynamic server-side web code too. Check out the screencast below to see live editing of dynamically generated HTML content using the latest Brackets release (Sprint 23).

This streamlined workflow can be incredibly powerful, especially for rapid prototyping scenarios. You just focus on writing code and creating an experience. Let the edtior offload the work of updating the live content in your browser to keep you focused on the task at hand.

To enable the Edge Code/Brackets preview on a server, just go into “File->Project Settings”, and then specify a “Preview Base URL” string. The preview base URL will be prefixed to the name of the file that you are editing, and will be used for the browser’s URL in the live connection. So, if you are editing “index.html” with a preview base URL of http://tricedesigns.com, brackets will launch the live connection with the URL “http://tricedesigns.com/index.html”.

However, keep in mind that Edge Code & Brackets’ primary use case is editing HTML/JS/CSS, not server-side languages. The editor won’t have code hinting for your server-side code, unless you are using an extension that enables code hinting (with the exception of NodeJS because JavaScript is supported). The current build of Brackets also changes the live preview URL when you change files. So, if you are editing “index.cfm”, and switch to “content.cfm” in the editor, the live preview will follow, and switch to “http://{urlprefix}/content.cfm”. If the files are intended to be separate, this works great. However, if content.cfm isn’t a standalone file, the live preview won’t be as valuable. Meaning: if content.cfm is actually an included file inside of index.cfm, the live preview of content.cfm may not work the way you want it to. In either case, this can still be a very valuable tool with rapid prototyping.

Speaking of extensions… Edge Code/Brackets is built with an extensible plugin architecture. Since the editor itself and all of the extensions are written with HTML/JS, you can easily extend and customize the tool to add any functionality that you want.

if you’re wondering about the difference between the names Adobe Edge Code and BracketsAdobe Edge Code is Adobe’s distribution of the Brackets editor. Adobe Edge Code has scheduled releases, and includes useful extensions and tie-ins to other Adobe services (for example, Adobe Web Fonts and more). Brackets is the open source project for the core editor itself. Brackets is on a 2-3 week sprint cycle, and is rapidly evolving. Essentially, Brackets is the “engine” that powers Adobe Edge Code.

I chose a simple ColdFusion demonstration because I already had an existing code sample I could reuse, however this will work with PHP, NodeJS, or other server-side scripting libraries. The latest builds of Brackets even have NodeJS built directly into it.

The code that I used in this example is available as a gist for download. This was based on my existing US Census Browser sample PhoneGap application.

Enjoy!

  • Ro

    This is cool. But I think other editor like Sublime Text 2, can do the same thing with live reload. An example of what I’m talking about can be seen here: http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/

    • http://www.tricedesigns.com Andrew

      Submlime can do similar things, so can WebStorm and others. However, I think Brackets has the easiest to use implementation. Also, Brackets has some really cool live edit features in development for inline client and server debugging: http://www.youtube.com/watch?v=ukpoPF61W5A

  • Adam Patterson

    I run into trouble working on files behind mod_rewrite.

    This feature seems to assume that you are possibly starting off a project and not maintaining it.

    TexMate simply refreshes the active browser visible tab. For me this works the best, it can be local, remote, static or Dynamic.

    I have the same problems with all the other “live” previews.

    • http://www.vusisindane.com/ Vusi Sindane

      Have you figured out the solution to this?

      • http://www.adampatterson.ca/ Adam Patterson

        I ended up using Live reload and my workflow now involves more Server Side coding so I use PHP Storm.

  • naman34

    I’m not being able to do this at all with Node.js projects…

    • naman34

      Now that I think about it, its probably not possible. If I use templates, then brackets obviously cannot figure out how which URL to load by seeing the file I’m working on. That said, there should be some way of me telling brackets which URL should open on which files, even if that is a manual process.

      • Alexandr Martynov

        write your own extension

        • naman34

          I’ve been trying to.

  • Raju Shrestha

    How to change live preview browser from chrome to firefox by default.

  • cheapskate01

    Is it possible to live edit a php file from your external server?