File with CSS and JS files not serving on server and prints ��U�v�8��+

Question

When I run my hapijs app locally it is working but when I deploy it in the server it doesn't work. The page can serve html files but if the HTML file has css or bootsrap then it prints weird symbols like ��U�v�8��+

The link that shows the weird response : https://us-central1-fir-app-85853.cloudfunctions.net/v1/teacher/list

Here is my index.js file.

How can I fix this issue?

'use strict';
const functions = require('firebase-functions');
const api = require('./server');

exports.v1 = functions.https.onRequest(async (event, resp) => {
  let server = await api.startServer();
  const options = {
    method: event.httpMethod,
    headers: event.headers,
    url: event.path,
    payload: event.body
  };

  return server
    .inject(options)
    .then(response => {
        delete response.headers['content-encoding']
        delete response.headers['transfer-encoding']
        response.headers['x-powered-by'] = 'hapijs'
        resp.set(response.headers);
        return resp.status(response.statusCode).send(response.result);
    })
    .catch(error => resp.status(500).send(error.message || "unknown error"));
});

Here is my full source code on github https://github.com/kartikgreen/hapijs-firebase

What is the file you deploy to cloudfront? How do you produce it? — 9000, May 27 '20 at 18:53
It is a cloud function that deploys the hapi js app and starts it. — kartik, May 27 '20 at 18:55
It seem to response fine, what is response.result that you're sending back? Can you post the server code and how you're using css and bootstrap may help. — noobius, May 29 '20 at 19:04

kartik · Accepted Answer · 2020-05-31T12:47:00.563

2

I just removed the 'accept-encoding': 'gzip, deflate, br' line in the request headers' object to not request gzip compression.

This answer is already in the link

edited May 31 '20 at 12:47

answered May 31 '20 at 08:46

kartik

294
3
15

score -1 · Answer 2 · answered May 29 '20 at 19:09

This is very likely a character encoding issue.

There are a few causes, one is a different character encoding being outputted than UTF-8.

so say your document outputs in ISO-8859-1 (known as Latin-1), if you do not set the character set the browser will default to UTF-8. Think of it like outputting chinese and then asking a language parser to treat it as japanese, it will never understand!

Not sure how to do it in hapjs but in PHP you would just add a header as follows:-

header("Content-Type: text/html; charset=ISO-8859-1");

The other possible cause is a Byte Order Mark (BOM).

If your script is accidentally outputting some blank data before it should this can add these invisible characters.

There are loads of answers on BOMs on Stack Overflow so I won't repeat those.

I would normally say run the page through the W3C Internationalisation Checker but your page seems to kill it (which could be down to firebase). Perhaps you could capture the raw output to a file and run it through that way?

I have added my GitHub project link. The code is in functions folder. I added the header but it dint work. — kartik, May 29 '20 at 19:45

File with CSS and JS files not serving on server and prints ��U�v�8��+

2 Answers2