Package: webpack-tools
Stimulus and Webpack Tools for DjangoMake the usage of stimulus and webpack in Django fun (again)!IntroductionThis module comes with two django management commands to help
with the setup as well as the execution of stimulus / webpack in django
by using the well-knownconvention over configurationapproach.Getting startedSetupFirst, you need a Django project. If you dont already have an app, create a new one.
E.g. usingpython manage.py startapp demo apps/demoand add it asapps.demoin your settings.InstallationNext, install thewebpack-toolsmodule in your python runtime, e.g. usingpip install webpack-toolsor via yourrequirements.txt.Add'webpack_tools'to yourINSTALLED_APPSin your `settings``Install WebpackTo prepare your project (not just your app!) for the usage of webpack (and npm if not already done) just typepython manage.py webpack --init-fullThis willinitialise npm (if nopackage.jsonis found)create a defaultwebpack.config.js(if none exists)install all necessary npm packages for the execution of the webpack configAfter that, you can always execute webpack simply by typingpython manage.py webpack --buildNote: Both commands can also be combined.Create Stimulus Controllers (and View Templates)Sadly, we have nothing to pack yet.
So its time to create a Stimulus controller and integrate it in a view template.Therefore, we have thepython manage.py stimuluscommand.To install one (or more) Controllers in your app, just executepython manage.py stimulus {app.name} {controller1} .. {controllerN}where {app.name} refers to the name of your app, as installed in yoursettings.
You can give zero or more controllers to be created. Those should be named all lower with no special characters!The plugin will thenCreate a folder/javascriptin your app root folder (if it doesnt already exist).Create anapplication.jswith sensible defaults (auto detection of controllers during webpack execution) if it doesnt exist.Create a subfolder/controllers(if it doestn exist)Create a stub for each controller named{controller}_controller.js(the default convention, in stimulus).Optionally, you can also create one (or more) view template which has the proper setup to get started even quicker.
For that, just append--templates {template1} .. {templateN}to the command above, i.e.python manage.py stimulus {app.name} {controller1} .. {controllerN} --templates {template1} .. {templateN}This will then create the respective templates in your apps/templatefolder and create ready to use templates.Bundling with webpackNow its the right time to come back towebpacks--bundlecommand.
So just executepython manage.py webpack --bundleto get your Entrypoint (theapplication.jscreated above) with all controllers available.
Those will be bundled in a singleapplication.jsfile which will be copied tostatic/js/application.jswhere it can be imported in your templates (see the auto generated templates for the exact syntax).Final wordsNow, just take the stub template, integrate it in a view, wire up an url and... boom, your stimulus controllers are up and running, and ready to use.Note: After changes in your controllers, dont forget to callpython manage.py webpack --bundleto recreate the bundled asset.Installing Controllers from other AppsWhen you have a modular structure in your modules (or even install third-party modules) you may come accross the case where you want to
include controllers from other modules into your entrypoint (application.js).
There are two approaches. One is that the other modules provide npm packages and the other is to use relative imports to specify the path of the controllers js-file relative to your entrypoint.Theinstall_controllerhelps you in the second case and does all necessary changes in yourapplication.jsfile.
If one app defines a Controller (from the structure defines above) and it should be added to an entrypoint in another app, one can use theinstall_controllercommand.
The Syntax ispython manage.py install_controller <target-app> <source-app> <controller-name>If you have two appsapps/demoandapps/demo2and want to install athe controllerMycontrollerfromapps/demo/javascript/controllers/mycontroller_controller.jsintoapps/demo2s entrypoint (which isapps/demo2/javascript/application.js) then you have to use the commandpython manage.py install_controller apps.demo2 apps.demo mycontrollerRelease NotesRelease 0.2.0Added theinstall_controllercommandRelease 0.1.1Fixed a bug wherestimulusonly works with--templatesoption.Release 0.1.0Initial ReleaseCommunity and DiscussionPlease feel free to join the project on github:https://github.com/hotwire-django/stimulus-webpack-toolsor join our Slack:https://join.slack.com/t/hotwire-django/shared_invite/zt-kl0e0plt-uXGQ1PUt5yRohLNYcVvhhQ(if its not working just pingj.feinauer@pragmaticminds.defor an invite or open an issue on github).