0

Is it possible to pass data from a .js file to a .pug file without using Node? I'm using a very basic setup where I run and bundle my project with Parcel.js. I'm not using a Node.js backend with Express and I do not aspire to. I simply want to be able to fetch data in my app.js-file and display it using Pug. But even this setup does not show the name-variable on the page:

index.pug

doctype html
html(lang="en")
    head
        title Homepage
    body
        p My name is #{name}
        script(type="module", src="./app.js")

app.js

const name = "Holy Kiwi";

package.json

{
  "name": "frontend-javascript-edhub-pug",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "parcel index.pug",
    "build": "parcel build index.pug"
  },
  "devDependencies": {
    "@parcel/transformer-pug": "^2.0.0",
    "parcel": "^2.0.0",
  },
  "dependencies": {
    "pug": "^3.0.2"
  }
}

Other things I've tried that didn't work

  • Exporting the variable from the app.js script: export const name = 'Kiwi';;
  • Creating a pug variable and then importing the script-variable into it: - const name = import { name } from './app.js';

I really hope you can help me out!

holy_kiwi
  • 1
  • 1
  • 2
    What do you mean when you say you don’t want to use Node.js? This already is Node.js. As long as you have package.json you essentially use Node itself. The JS code either runs on the browser on the v8 engine or on node. That is how it works. – Link Nov 02 '21 at 08:38
  • @Link I'm sorry I meant that I'm not using a Node and Express backend – holy_kiwi Nov 02 '21 at 08:47
  • Since you use @parcel/transformer-pug you can use .pugrc file as shown here https://parceljs.org/languages/pug/#locals – Molda Nov 02 '21 at 09:08

1 Answers1

-1

As you have the pug package installed, you can use the renderFile method:

const pug = require("pug");
const html = pug.renderFile("./path_to/index.pug", { name: "Holy Kiwi"});

The above produces the following string in the object html, and you can "display" it according to your needs:

<!DOCTYPE html><html lang="en"><head><title>Homepage</title></head><body><p>My name is Holy Kiwi</p><script type="module" src="./app.js"></script></body></html>
Old Geezer
  • 14,854
  • 31
  • 111
  • 198