[SOLVED] "Manifest: Line: 1, column: 1, Syntax error"

"Manifest: Line: 1, column: 1, Syntax error"

I'm using Vue.js to create a Progressive Web Application (PWA) as a school project. Whenever I host the website with Azure I get "Manifest: Line: 1, column: 1, Syntax error".
I don't have this problem on localhost …

Chrome DevTools responds with :

/manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 GET https://serviceworkerspike.azurewebsites.net/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

How can I correct the error?

I have the following line in my index.html :

<link rel="manifest" href="/manifest.json">

Here is my manifest.json file :

{
  "name": "MessageBoardUCN",
  "short_name": "MessageBoardUCN",
  "theme_color": "#ff095a",
  "background_color": "#feaaee",
  "display": "standalone",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

What I have tried

Using lower-case letters in the name and short_name properties – messageboarducn.
Setting starturl to the hosted URL or to "/".
Moving the manifest.json file to the root directory or to the src/ directory, but other guides told me it should be in the same folder as index.html, and public/ is the default for that.

This is my file structure.

The hosted URL, https://serviceworkerspike.azurewebsites.net, doesn't work anymore.

Solution

I had the exact same problem (on an Azure Windows Web Service). I just created a new web.config in the root folder with the following content (or edit the existing, if there is one):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

This adds the mime configuration for json-files.