title: How do I exchange data between .pug file and a linked .js file without Node?
body: <p>Is it possible to pass data from a <code>.js</code> file to a <code>.pug</code> file without using Node? I'm using a very basic setup where I run and bundle my project with Parcel.js. <strong>I'm not using a Node.js backend with Express and I do not aspire to.</strong> I simply want to be able to fetch data in my <code>app.js</code>-file and display it using Pug. But even this setup does not show the <code>name</code>-variable on the page:</p>
  <p><strong>index.pug</strong></p>
  <pre><code>doctype html
  html(lang=&quot;en&quot;)
      head
          title Homepage
      body
          p My name is #{name}
          script(type=&quot;module&quot;, src=&quot;./app.js&quot;)
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>const name = &quot;Holy Kiwi&quot;;
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend-javascript-edhub-pug&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;app.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;parcel index.pug&quot;,
      &quot;build&quot;: &quot;parcel build index.pug&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@parcel/transformer-pug&quot;: &quot;^2.0.0&quot;,
      &quot;parcel&quot;: &quot;^2.0.0&quot;,
    },
    &quot;dependencies&quot;: {
      &quot;pug&quot;: &quot;^3.0.2&quot;
    }
  }
  </code></pre>
  <p><strong>Other things I've tried that didn't work</strong></p>
  <ul>
  <li>Exporting the variable from the <code>app.js</code> script: <code>export const name = 'Kiwi';</code>;</li>
  <li>Creating a pug variable and then importing the script-variable into it: <code>- const name = import { name } from './app.js';</code></li>
  </ul>
  <p>I really hope you can help me out!</p>