javascript json azure azure-web-app-service manifest

"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

If your manifest file is at the root level (where your index.html file is placed) you can reference it like the following in the <head> tag of your index.html file:

<link rel="manifest" crossorigin="use-credentials" href="manifest.json"/>

Plus the startUrl property in the manifest file should have the value:

"start_url": "/"

as you target the root as starting point.

Otherwise, if you would serve your app with a specific base URL, you should reflect it in the property value:

Example: 

Considering -->  www.myapp.com/my-other-url-part/

Use:
    "start_url": "/my-other-url-part/"

Or simply:
    "start_url": "./"   <-- This would match any base-href != "/"

You should then set your web server to automatically serve the index.html file (this is often enabled per default)