# How to add Javascript the right way in Sage10

**URL:** https://discourse.roots.io/t/how-to-add-javascript-the-right-way-in-sage10/25047
**Category:** sage
**Tags:** sage10
**Created:** 2023-03-29T14:44:09Z
**Posts:** 8

## Post 1 by @meemal — 2023-03-29T14:44:09Z

Want to add my own custom JavaScript to my small theme.

I’ve found that this is working ok, putting it in the app.js file like so.

```
import domReady from '@roots/sage/client/dom-ready';

/**
 * Application entrypoint
 */
domReady(async () => {
  console.log('test1');
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
import.meta.webpackHot?.accept(console.error);
```

But it doesn’t seem great for theme organisation, and its very different from Sage9 so i suspect there is another way of doing things. I can’t find any help on this in the docs, on any part of the javascript aspect at all. Is anyone able to point me in the right direction on how you split up your .js files and load them properly?

---

## Post 2 by @csorrentino — 2023-03-29T15:12:19Z

Here’s a link that should get you started: [Modules, introduction](https://javascript.info/modules-intro)

If I’m understanding your question, you’re looking to break up your app.js file into modules. Here’s a simplified example from a recent project:

**/resources/scrpts/animations.js**

```
export const animations = async (err) => {
  if (err) {
    console.error(err);
  }

  // ...
};

import.meta.webpackHot?.accept(animations);
```

**/resources/scripts/app.js**

```
import domReady from '@roots/sage/client/dom-ready';
import {animations} from './animations.js';

/**
 * Application entrypoint
 */
domReady(async () => {
  animations();
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
import.meta.webpackHot?.accept(console.error);
```

---

## Post 3 by @meemal — 2023-03-30T09:03:00Z

Thank you @csorrentino for taking the time to respond to me, and with such a clear example! It’s working perfectly.

Much appreciated!

---

## Post 4 by @James0r — 2023-04-02T07:17:22Z

Is this the recommended pattern for all modules being imported into app.js?

I’m new to sage and I’m assuming that some syntactic sugar has been used for other frameworks using HMR, or maybe this is new since I’ve used Webpack last.

---

## Post 5 by @aitor — 2023-04-02T09:27:02Z

You can also import ES modules conditionally

```
const main = async (err) => {
    if (err) {
        // handle hmr errors
        console.error(err);
    }

    if (document.body.classList.contains('home')) {
        const {default: Hero} = await import('./Hero/HomeHero.js');
        new Hero(document.querySelector('canvas.webgl'));

        // ALTERNATIVE SINTAX:
        // import('./Hero/HomeHero.js').then(({default: Hero}) => {
        // new Hero(document.querySelector('canvas.webgl'));
        // });

        const {default: SwiperFrontPage} = await import('./swiperFrontPage.js');
        new SwiperFrontPage();

        // ALTERNATIVE SINTAX:
        // import('./swiperFrontPage.js').then(({default: SwiperFrontPage}) => {
        // new SwiperFrontPage();
        // });
    }
};
```

---

## Post 6 by @James0r — 2023-04-02T20:52:21Z

Oh damn that’s powerful. Thx.

So for Sage 10 out of the box it could look something like

```
domReady(async (err) => {
  if (err) {
    console.error(err);
  }

  if (document.body.classList.contains('single-post')) {
    const { SinglePost } = await import('./singlePost.js');
    new SinglePost()
  }
});
```

---

## Post 7 by @aitor — 2023-04-02T21:56:57Z

Yes. Bud has documentation about dynamic imports:

> **[JS modules | bud.js](https://bud.js.org/guides/modules/js-modules#dynamic-imports)**
>
> Learn how to write JS modules for your bud.js app

---

## Post 8 by @meemal — 2023-04-04T09:03:52Z

That’s fantastic! I can see how powerful this will be for making themes as sleek as possible.