Compoxure changes my javascript

[0xR]

My web app doesn't work when I run it through compoxure and I found out it is because the Javascript is changed. I tried changing the hogan delimiters from {{ }} to <% %> but then compoxure doesn't replace my cx element anymore.

[gabceb]

The issue seems to be that delimiters are not being passed to https://github.com/tes/parxer/blob/master/lib/core.js#L9. Could you mind creating a failing test on the parxer project and I can look into fixing the issue

[0xR]

I don't have time to figure out how to add tests on the parxer project. I can give some example for files with and without compoxure.

This is ocLazyLoad.js before and after compoxure. I have similar issues with angular. That might look like there is some html minification going on.

http://pastebin.com/E4PKa3Ub http://pastebin.com/3uEY9axH

[0xR]

It might have something to do with the contentTypes in the configuration. What I am doing is putting compoxure in front of an angular application which will serve html, javascript, images and a websocket connection for browsersync. I tried "contentTypes":["html", "javascript"] but that doesn't help much.

What would make sense if I could provide a regex or a function to determine whether the content has to be parsed or can just pass through.

[cliftonc]

@gabceb I'll pick up the delimiters not being passed.

@0xR I'm not sure I completely get your use case? We serve HTML through compoxure, not the other assets - in our use case we serve all of those via a CDN separately.

But if you specify 'passThrough: true' on your backend configuration it should just proxy all non HTML assets through completely un-parsed.

https://github.com/tes/compoxure#configuration https://github.com/tes/compoxure/blob/master/src/middleware/passthrough.js#L8

[cliftonc]

Just to add - it definitely won't proxy the web-socket request, you'll need to send that to a different host.

[0xR]

While developing it is easier to have a limited number of servers running. I also worked around the issue by adding a proxy in front of compoxure to make sure only html runs through compoxure, but now I have these servers running to do simple development:

1. origin server
2. included service
3. compoxure
4. reverse proxy

Having said that, I didn't try the passThrough option. This might solve the need for the proxy.

[cliftonc]

Ok - let us know if you need anything more, and if passThrough works for you.

[hedav85]

I'm running into a similar issue. I have a node.js web application with a default Bootstrap template (SB Admin 2). I want to use Compoxure as a proxy for UI composition. It seems that Compoxure delivers corrupt JavaScript. Chrome tells me that the JavaScript has invalid syntax. If I call my backend directly all works fine. I set the passTrhough configuration like mentioned before, but it doesnt change anything.

This is my configuration:

{
    "parameters": {
        "servers": {
            "local": "http://localhost:3000"
        }
    },
    "backend": [
        {
            "pattern": ".*",
            "timeout": "5000",
            "target":"http://localhost:3000",
            "host":"localhost",
            "ttl":"10s",
            "cacheKey":"backend:{{url:path}}",
            "dontPassUrl": false,
            "quietFailure": true,
        "contentTypes": ["html","css"],
            "passThrough": true
        }
    ],
    "hogan":{
        "delimiters":"{{ }}"
    }
}

Did I miss a specific contentType for JavaScript?

[cliftonc]

Updated your comment to highlight the config as code.

Let me take a look.

[cliftonc]

Ok, the problem is that the passThrough property passes through anything that matches this:

https://github.com/tes/compoxure/blob/master/src/middleware/passthrough.js#L7

    var isPassThrough = function(req) {
      if (!req.backend.passThrough) { return false }
      if (req.method !== 'GET') { return true; }
      if (req.contentType === 'text/html') { return false; }
      if (req.contentType === 'html') { return false; }
      if (req.contentType === '*/*') { return false; }
      return true;
    }

For javascript or css, all browsers send through a content accepts header of */*.

Which means that Compoxure can't current figure out if it is something it should parse or not, it currently defaults to Yes by default - e.g. it assumes that the request is parseable unless proven otherwise.

The pass through stuff was really written to proxy POST / PUT type actions (e.g. api interactions) vs serving static assets through it.

I'm really not sure how I could resolve this simply, but will give it more thought. My original recommendation that you serve static assets away from your main app still stands - it's really good practice.

If you use bosco (https://github.com/tes/bosco), it does this for you and serves them locally via bosco cdn.

[hedav85]

Now in the new year I found time to investigate again in this issue. I found a solution for this problem. I found out that the content type of the JS request was text/html and thats why compoxure has tries to parse JS the files with the HTML parser and delivers corrupt JS. If I define the contentTypes in the config in the following way:

"contentTypes":["application/javascript","html"]

then the content type of the request is correct and it will pass through.

[cliftonc]

Ok, that makes sense, great to hear that you figured it out and it still works. I'll put something in the docs about it.

[cliftonc]

Investigate making an extra check somewhere around here: https://github.com/tes/compoxure/blob/master/src/middleware/proxy.js#L158 that checks what the content-type is in the response, and if it's not text/html then send the content straight through unparsed.