I've stumbled upon a weird thing.

When I run browsersync as browser-sync start -p localhost:8000 and try to log into Craft's admin at localhost:3000/admin I get the message "An unknown error occurred."

If I enter the wrong password, nothing at all appears nor happens.

This can be worked around by logging in once at localhost:8000/admin, and then accessing the proxied version after... But I'd be sweet if I could login through the proxied version :)

Any suggestions on how this can be resolved?

Here's the log generated once I've deleted all the contents of the logs and then press the login button: http://pastebin.com/3LjbQLj0

  • I've tried to inspect the network tab to check if there's anything useful there: i.imgur.com/iM8VgZi.png Seems like it tries to push me to the dashboard...
    – Ole
    Commented Jan 20, 2017 at 20:31
  • There's no response on the login POST either, it's all empty - not the usual JSON "success:true, returnUrl: ..."
    – Ole
    Commented Jan 20, 2017 at 20:35
  • 1
    Instead of using localhost:port, can you try using a dedicated vhost maybe?
    – Brad Bell
    Commented Aug 9, 2017 at 22:08
  • Solved it with a different approach! Thanks for the suggestion though - answered my own question now :)
    – Ole
    Commented Aug 14, 2017 at 11:38

1 Answer 1


Forgot about this question! I've since solved it by using a different approach.

Now I'm injecting the broser-sync script via its config, avoiding injection if the url is '/admin/', and redirecting to :8000 if '/admin/' is visited from :3000

Here's my whole working browser-sync.js config file, for those few other souls searching for something similar:

Note: I'm auto-injecting the webpack dev build with this config as well.

const sync = 3000
const script = 'browser-sync-client.js'

const php = 8000
const webpack = 1337
const adminPath = '/admin/'
const address = require('ip').address()

module.exports = {
    port: sync,
    proxy: {target: `${address}:${php}`},

    files: [

    ui: false,
    open: false,
    notify: false,
    ghostMode: false,
    socket: {clientPath: ''},

    logLevel: 'info',
    logPrefix: 'Browser-sync',

    watchEvents: ['change', 'add'],

    rewriteRules: [
        {match: /<\/head>/i, fn(request, result, match) {
            return `<script src="http://${address}:${webpack}/build.js"></script>` + match

    snippetOptions: {
        ignorePaths: adminPath + '*',
        rule: {
            match: /<\/body>/i,
            fn(snippet, match) {
                return `<script src="http://${address}:${sync}/${script}"></script>` + match

    middleware: [function(request, result, next) {
        if (request.url.startsWith(adminPath)) {
            result.writeHead(301, {Location: `http://${address}:${php}${request.url}`})
        } else {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.