Adobe Brackets Live Preview can't reach Node.js server

Question

I'm having trouble running a Node.js server with Adobe Brackets. Once in live preview (the URL is http://localhost:SOMERANDOMPORT/path/to/file.html), I start the server. If I type http://localhost:3000/test straight into another tab, it displays the correct JSON.

I then added an event function to an element in file.html that upon clicking it makes an AJAX request to my server and uses the response to change some of its inner HTML. However, clicking the element in live preview fails, and the error callback gets called instead.

How can I fix this? I suspect it has to do with the fact that the AJAX request sends to http://localhost:SOMERANDOMPORT/test rather than http://localhost:3000/test, but I can't seem to find a solution.

Everything runs locally. Below is my server:

var express = require('express');
var mysql = require('mysql');

var app = express();

app.get('/test', function(req, res){
    var connection = mysql.createConnection(...);

    connection.query("SELECT author FROM posts", function(err, results) {
        if (err) {
            console.log(err);
            console.log('Error on retrieving data.');
            res.send(err);
            return;
        }
        console.log(results[results.length - 1]);
        res.send(results[results.length - 1]); // return last row
    });

    connection.end();
});

app.listen(3000);
console.log('Listening on port ' + port);

And the event function:

function getAuthor() {
    $.ajax({
        type: 'GET',
        url: '/test',,
        success: function(data, status) {
            $('.author').text('Authored by ' + data.author);
        },
        error: function(jqXHR, status, error) { // this always get called
            $('.author').text('Something went wrong.');
        }
    });
}

I appreciate any help.

Answer 1

The simplest fix is to point Live Preview directly at your own Node server, letting it serve up the pages itself from the correct port number (rather than serving the pages from Brackets's built-in server that's on a different port). See instructions on the Brackets wiki under "Using your own backend."

The downside is that HTML live updating is disabled - but you'll still get CSS live updating, and Brackets falls back on a simpler "live reload" on save for HTML content.

To keep live HTML updating enabled you'd need to work around the port number difference somehow. You could hardcode a localhost:3000 base URL for testing, but you'll run same-origin problems due to the port numbers not matching. Working around that would be pretty involved (set up CORS on your Node server, etc.).

One other option for keeping the full Live Preview experience is to shim all your $.ajax() calls so they return hardcoded dummy data without hitting the server. If you're already doing some mocking for unit tests, you might be able to reuse that existing infrastructure for this.