# Integrating Javascript code in a DevPack Component

**URL:** <https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164>\
**Category:** Elements API\
**Created:** [July 25, 2025, 5:19am UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164 "2025-07-25T05:19:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 5:19am UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/1 "2025-07-25T05:19:27Z")

</div>

@dan or @ben I spent a bunch of time this morning with Mr. Bot trying to figure out how to get the JS code for my custom component integrated into a DevPack component. We encountered numerous issues that appear to require the assistance of the Big Guns.

All of the properties and the HTML code for the component work just fine, but the JS code never appears to be called. The file is loaded and is set up in the hooks.js file in the components file hierarchy.

Is there any way I can get some help on making this work?

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 8:07am UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/2 "2025-07-25T08:07:23Z")

</div>

i’ve also had problems adding JS code to my projects lately. after many tests (and asking the elementi-bot!), i now put my JS-code in a separate file, like [Dan shows in his video](https://docs.realmacsoftware.com/elements-docs/elements-app/how-to/add-snow-to-your-website).

maybe this way will help you …

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 25, 2025, 9:05am UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/3 "2025-07-25T09:05:01Z")

</div>

You can include JS (and additional files) in the pack or on a per component basis.

Check the Docs:

1. [Component Assets](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/components/assets)
2. [Shared Assets](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/components/shared-files/assets)

But, more importantly [check the code on GitHub](https://github.com/realmacsoftware/RWElementDevPacks/tree/main), it includes an example of both!

If you get stuck, post on here for help, and we’ll get it all working for you 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 6:57pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/4 "2025-07-25T18:57:15Z")

</div>

Yes, all of my JS code is already in a separate file, but the code is never being called.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 7:00pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/5 "2025-07-25T19:00:55Z")

</div>

@dan Yes, I already have the code in place for this, but the problem we encountered was that the `{{assetPath}}` appeared not to be returning the correct path to the asset, which is why the bot flagged it as a bug in our attempt to get this working.

Of course, because the path was incorrect, the JS code could not be found. It did appear as if the JS file was being loaded, though.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 7:02pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/6 "2025-07-25T19:02:38Z")

</div>

Did you include the JS code with or without `<script> </script>` in the JS file?  
For me, it only works without it. Otherwise, the script doesn’t output anything.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 7:07pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/7 "2025-07-25T19:07:23Z")

</div>

@handshaper

instead of using “{{assetPath}}”, I always use the hardcoded way for the path.

 ![Bildschirmfoto 2025-07-25 um 21.03.55](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/1/213eae6d489d9d71db63cf580b8499960e2b0c64.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 25, 2025, 7:57pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/8 "2025-07-25T19:57:22Z")

</div>

@Pegasus you don’t need to edit the site template, you can [use Portal](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/components/templates/portal) to add code into the head area.

That way you can make your component work when placing it in any site 🙂

btw. You also shouldn’t be hard coding paths, this is almost ALWAYS a bad idea…

@handshaper I don’t think there is a bug in `{{assetPath}}` we use it ourselves, so I wonder if you’re not quite using it correctly… if you share code with us we can take a look and point you in the right direction 🙂

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 8:11pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/9 "2025-07-25T20:11:44Z")

</div>

@dan

however, if I instead use `<script src="{{resourcePath}}/sonntagsButtons.js"></script>`, my script also no longer works.

edit: ok. i have to use: `<script src="{{page.resourcesPath}}/scripts/sonntagsbuttons.js"></script>`

that’ works for me

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 8:13pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/10 "2025-07-25T20:13:50Z")

</div>

@dan Here is the code in the hooks.js file.

```auto
const transformHook = (rw) => {
   const { preview } = rw.props;
   const { mode } = rw.project
   const { assetPath } = rw.component;

    // show preview if `preview` is true, or we are NOT in edit mode
    const showPreview = preview || mode !== 'edit';

   rw.setProps({
     showPreview, 
     assetPath
   });
};

exports.transformHook = transformHook;

```

This what is defined at the beginning of the index.html file.

```auto
<script src="{{assetPath}}/privacy-consent.js"></script>

```

The privacy-constent.js file is currently located in the component’s current directory.

 ![CleanShot 2025-07-25 at 10.13.03@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/3/9343673353cf3bed74b4c554131212e6c6d32081.png)

I will have to move this eventually because the code is shared with the other component that is part of the pack. But for now I just want to get this one component working properly.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 8:16pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/11 "2025-07-25T20:16:14Z")

</div>

try: `{{page.resourcesPath}}`

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 8:29pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/12 "2025-07-25T20:29:53Z")

</div>

> [@dan](#):
>
> @Pegasus you don’t need to edit the site template, you can [use Portal](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/components/templates/portal) to add code into the head area.
> 
> That way you can make your component work when placing it in any site 🙂
> 
> btw. You also shouldn’t be hard coding paths, this is almost ALWAYS a bad idea…

Is there perhaps an explainer video about this? Honestly, half of the time I have no idea what I’m building with the help of the “elementi-bot” or how I manage to get it working at all.

i’m more the type to try, fail, learn, and then start all over again until it finally works somehow.

So a video on how to use that “portal feature” would be super helpful for someone like me!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 8:51pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/13 "2025-07-25T20:51:32Z")

</div>

Is this in place of the {{assetPath}}?

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 25, 2025, 9:03pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/14 "2025-07-25T21:03:20Z")

</div>

you probably need to put “page.” before assetPath.

`<script src="{{assetPath}}/privacy-consent.js"></script>`

try the following  
`<script src="{{page.assetPath}}/privacy-consent.js"></script>`

* * *

that didn’t work for me  
`<script src="{{resourcePath}}/sonntagssuttons.js">`

but this works  
`<script src="{{page.resourcesPath}}/scripts/sonntagsbuttons.js"></script>`

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 9:49pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/15 "2025-07-25T21:49:43Z")

</div>

> [@Pegasus](#):
>
> page.resourcesPath

I tried that and it did not work either. I hope someone can shed some light on this as it is very frustrating having everything working except the code that makes it all happen.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2025, 10:21pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/16 "2025-07-25T22:21:09Z")

</div>

The code in the JS file DOES NOT use `<script>`.

Sorry some how the forum did not show the last piece of info above.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 26, 2025, 8:34pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/17 "2025-07-26T20:34:22Z")

</div>

@dan I’m still having no luck getting this working, so I could really use some help to understand what is wrong that isn’t allowing the JS code to work.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 26, 2025, 9:28pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/18 "2025-07-26T21:28:30Z")

</div>

@dan OK, because I was having no luck integrating a separate JS file I decided to go with a different approach. Instead, I added the code as a script inside the HTML code and then moved it to the appropriate location using the portal code.

So far, this approach seems to be working, so now I have a working DevPack for my privacy consent stuff. Yippee!

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 27, 2025, 8:52am UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/19 "2025-07-27T08:52:25Z")

</div>

it seems there is a bug when loading JavaScript files.

If I specify the path like this, the file isn’t loaded and doesn’t run:

```auto
<script src="{{page.resourcesPath}}/scripts/JavaScriptFileName.js"></script>

```

this one works

```auto
<script src="{{page.resourcesPath}}/scripts/javascriptfilename.js"></script>

```

However, if the script file name is written entirely in lowercase, it works without any issues.

Do .js file names always have to be lowercase? Or is there another reason for this behavior?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 27, 2025, 5:00pm UTC](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164/20 "2025-07-27T17:00:27Z")

</div>

My filename was all lowercase, but it contains a hyphen. I wonder if that is the problem. I’ll have to test it today.

[Next page](https://forums.realmacsoftware.com/t/integrating-javascript-code-in-a-devpack-component/49164.md?page=2)