title: Relative paths with fetch in Javascript
body: <p>I was surprised by an experience with relative paths in JavaScript today. I’ve boiled down the situation to the following:</p>
  <p>Suppose you have a directory structure like:</p>
  <pre><code>app/
     | 
     +--app.html
     +--js/
          |
          +--app.js
          +--data.json
  </code></pre>
  <p>All my <code>app.html</code> does is run <code>js/app.js</code></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;title&gt;app.html&lt;/title&gt;
  &lt;body&gt;
  &lt;script src=js/app.js&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p><code>app.js</code> loads the JSON file and sticks it at the beginning of <code>body</code>:</p>
  <pre><code>// js/app.js
  fetch('js/data.json') // &lt;-- this path surprises me
    .then(response =&gt; response.json())
    .then(data =&gt; app.data = data)
  </code></pre>
  <p>The data is valid JSON, just a string:</p>
  <pre><code>&quot;Hello World&quot;
  </code></pre>
  <p>This is a pretty minimal usage of <code>fetch</code>, but I am surprised that the URL that I pass to <code>fetch</code> has to be relative to <code>app.html</code> instead of relative to <code>app.js</code>. I would expect this path to work, since <code>data.json</code> and <code>app.js</code> are in the same directory (<code>js/</code>):</p>
  <pre><code>fetch('data.json') // nope
  </code></pre>
  <p>Is there an explanation for why this is the case?</p>