How can I use NPM modules with Django inside an app?

Question

I have a Django project with 2 apps. I want to use the Notion API in one of the apps, so I have to install it's NPM module. However, I have never use NPM nor a bundler (I understand I have to use one for the import statement). I have no idea on how to do it. Where should I install the module? Should I install Webpack or something similar? How can I integrate both of this technologies with Django?
Can someone please explain this to me, or reffer to an article/video explaining?
I have been trying for hours now and I can't find anything detailed.
I have checked the following links:

• Django how to use npm modules with static/ templates
• https://gist.github.com/brizandrew/685a588fbefbd64cd95ed9ec4db84848
• https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
• https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
• https://www.techiediaries.com/django-webpack-react/
• https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
• https://pythonrepo.com/repo/owais-django-webpack-loader-python-developing-restful-apis

And a lot more.

They either don't have what I need (they are for react), or I can just not understand them. I know there are probably a lot of articles on this, but either I just can't find them, or they are too complicated for me (sorry I'm dumb).

If anyone can help me, it would make my day.

Thanks!

PS I am using Typescript, but I can use vanilla JS if necessary.

Answer 1

You have two things to do in order to get your app working the way you want.

1. Install, configure, and run a module bundler
2. Use collectstatic

Module bundler:

You have a few choices, but most use webpack because it is the most popular. I prefer rollup but it is all up to preference.

rollup quickstart: https://rollupjs.org/guide/en/#quick-start

webpack: https://webpack.js.org/concepts/

Since you are using Typescript, see the plugins for bundling Typescript

https://webpack.js.org/guides/typescript/

https://github.com/rollup/rollup-plugin-typescript

After you bundle, you should have a main.js file or equivalent. Make sure that main.js is in its own folder. Bundlers will typically do this for you.

Add that directory to your STATICFILES_DIRS in settings.py .

Note that you will need to set a STATIC_ROOT for this to work. This will be a folder that you will store your collected static files at.

Run python manage.py collectstatic

Sidenote: if you are using python manage.py runserver to start your application, you don't need to run collectstatic

Answer 2

For those looking for a -workaround solution- this should be great

I found this website that provides you with the bundles to imported in your static files (.html)

So, for my case I needed to download Chart.js latest version's bundle and I found it available here

https://cdnjs.com/libraries/Chart.js

and add it to your html like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1+190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>