Ask: gz file and json file not loaded Azure web app static

Question

i currently have azure web app static free tier and it need to load gz & json file from index.html, however when i checked the site through browser console network the file took long time to response i had test in local it work and just wondering whether i need to do something with the staticwebapp.config.json due at first i thought it cause by path target to the file but it seems not that the cause gz data load json file load

this is the code which only in html & ajax for call the gz file

// Fetch the compressed GeoJSON data from new_data.gz
$.ajax({
    // url: '/special-reports/ground-truths/map/new_data.gz',
    url: 'new_data.gz',
    method: 'GET',
    headers: { 'Content-Encoding': 'gzip' },
    xhrFields: {
        responseType: 'arraybuffer' // Set response type to handle binary data
    },
    success: function (compressedData) {
        try {
            // Log the raw data received for debugging
            console.log("Compressed data received:", compressedData);

            // Decompress the data using pako.ungzip
            var decompressedData = pako.ungzip(new Uint8Array(compressedData), { to: 'string' });

            // Parse the decompressed data as JSON
            var geojson = JSON.parse(decompressedData);
            console.log("GeoJSON data loaded successfully.");

            // Process the GeoJSON data
            processGeojsonData(geojson);
        } catch (error) {
            // Log error details if decompression or parsing fails
            console.error("An error occurred while processing the GeoJSON data:", error);
        }
    }
});

below also the structure of the files structure files directory and content of staticwebapp.config.json

{
  "routes": [
    {
        "route": "/special-reports/ground-truths/map",
        "serve": "/special-reports/ground-truths/map/index_test.html",
        "statusCode": 200
    }
],
  "mimeTypes": {
        ".json": "text/json",
        ".gz": "text/gzip"
  }

}

thank you

Have you added staticwebapp.config.json file to your project? — Aslesha Kantamsetti
– Aslesha Kantamsetti, Commented Nov 15, 2024 at 12:43
The issue might be related to your free plan; try upgrading to a standard plan. — Aslesha Kantamsetti
– Aslesha Kantamsetti, Commented Nov 15, 2024 at 12:52
hi @AsleshaKantamsetti, thank you, the code is only use ajax inside index.html and the file gz itself is in same directory of index.html as well For staticwebapp.config.json i only add routes for path directory though, may i know what should i add aside from routes ? — user3327338
– user3327338, Commented Nov 15, 2024 at 15:36

Aslesha Kantamsetti · Accepted Answer · 2024-11-18 12:45:39Z

I created simple index.html to serve the .gz and json files and deployed to Azure Static web App.

The issue is with the Content-Encoding: gzip header in your AJAX request.

Remove the Content-Encoding: gzip header from your AJAX request because Azure automatically serves .gz files as compressed content and handling the compression.

Below is my complete index.html file.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Load Compressed GeoJSON</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
</head>
<body>
  <h1>Load Compressed GeoJSON Data</h1>
  <button id="loadData">Load Data</button>
  <div id="output" style="margin-top: 20px;"></div>
  <script>
    document.getElementById("loadData").addEventListener("click", function () {
      const output = document.getElementById("output");
      output.innerText = "Loading data...";
      $.ajax({
        url: '/new_data.gz', 
        method: 'GET',
        xhrFields: {
          responseType: 'arraybuffer' 
        },
        success: function (compressedData) {
          try {
            let geojson;
            const uint8Array = new Uint8Array(compressedData);
            console.log("Uint8Array representation:", uint8Array);
            try {
              const decompressedData = pako.ungzip(uint8Array, { to: 'string' });
              console.log("Decompressed data:", decompressedData);
              geojson = JSON.parse(decompressedData);
            } catch (decompressionError) {
              console.log("Decompression failed, assuming plain JSON.");
              const textData = new TextDecoder().decode(compressedData);
              geojson = JSON.parse(textData);
            }
            console.log("GeoJSON parsed successfully:", geojson);
            output.innerText = "Data loaded successfully.";
            renderGeoJSONData(geojson);
          } catch (error) {
            console.error("Error processing GeoJSON data:", error);
            output.innerText = "Error processing GeoJSON data. See console for details.";
          }
        },
        error: function (xhr, status, error) {
          console.error("Failed to fetch compressed data:", error);
          output.innerText = `Failed to fetch data: ${status}`;
        }
      });
    });
    function renderGeoJSONData(data) {
      const output = document.getElementById("output");
      output.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`; 
    }
  </script>
</body>
</html>

I created Azure Static web app with Standard Hosting Plan and Build Presets is Custom. enter image description here I am able to load files larger than 20 MB.

Azure Static Web App Output:

enter image description here

Collectives™ on Stack Overflow

Ask: gz file and json file not loaded Azure web app static

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related