django-vite - HTMX, Alpine.js and TailwindCSS Plugin Installation

Django-Vite 워크플로우에서 Tailwind 플러그인, HTMX, Alpine.js 사용법

안녕하세요! 이번 포스팅에서는 Django-Vite 환경에서 Tailwind CSS 플러그인, HTMX, 그리고 Alpine.js를 어떻게 함께 사용하고 통합하는지 자세히 다뤄보겠습니다.

앞서 Django-Vite 기본 세팅을 다룬 영상이 있었는데, 이번 글은 그보다 한 걸음 더 나아가서 다양한 JS 패키지와 Tailwind 플러그인을 통합하는 방법에 대해 설명합니다.

---

1. Tailwind 플러그인 추가하기: Daisy UI와 Flowbite

먼저 Tailwind CSS에 플러그인을 추가하는 과정을 살펴보겠습니다. 대표적으로 Daisy UI와 Flowbite를 사용해보겠습니다.

1) Daisy UI 설치 및 설정

1. 터미널에서 Daisy UI를 설치합니다.
   

   npm install daisyui

2. main.css 파일에 Daisy UI 플러그인을 추가합니다.
   

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @import "daisyui";
   

   Tailwind 3버전부터는 플러그인 선언이 CSS에서 이렇게 간단해졌습니다.
3. npm run dev로 Vite 개발 서버를 실행하고, Django 서버도 함께 켭니다.
4. Daisy UI 문서에서 버튼 컴포넌트 HTML을 복사해 Django 템플릿에 붙여넣고 확인해보면, Daisy UI 스타일이 적용된 버튼이 나타납니다.

2) Flowbite 설치 및 설정

1. Flowbite도 npm으로 설치합니다.
   

   npm install flowbite

2. main.js에서 Flowbite JS를 import합니다.
   

   import "flowbite";

3. Flowbite의 토스트(toast) 등 인터랙티브 컴포넌트를 템플릿에 추가해 확인할 수 있습니다.

---

2. HTMX 통합하기

HTMX는 서버와의 인터랙션을 쉽게 해주는 라이브러리입니다.

1. npm으로 설치합니다.
   

   npm install htmx.org

2. main.js에서 HTMX를 import하고 전역 변수로 설정합니다.
   

   import htmx from "htmx.org";
   window.htmx = htmx;

3. Django 템플릿 내 버튼 등에 hx-get 같은 HTMX 속성을 추가해 Ajax 요청을 테스트할 수 있습니다.
4. 서버에서 부분 응답을 적절히 처리하도록 뷰를 수정하면, 원하는 영역만 HTMX로 교체하는 UI를 만들 수 있습니다.

---

3. Alpine.js 연동하기

Alpine.js는 경량 자바스크립트 프레임워크로, 간단한 UI 상태 관리를 도와줍니다.

1. npm으로 설치합니다.
   

   npm install alpinejs

2. main.js에 Alpine.js를 import하고 전역 변수로 설정 후 시작합니다.
   

   import Alpine from "alpinejs";
   window.Alpine = Alpine;
   Alpine.start();

3. 템플릿 내에서 x-data, x-show, @click 같은 Alpine 디렉티브를 이용해 토글 UI 등을 구현할 수 있습니다.

---

4. 빌드 및 프로덕션 배포

• npm run build 명령어로 자산을 빌드하면, Vite가 Rollup을 이용해 CSS와 JS를 번들링해줍니다.
• Django 템플릿에서 vite_asset 템플릿 태그를 통해 빌드된 파일을 로드합니다.
• 모든 Tailwind 플러그인, HTMX, Alpine.js 코드가 하나의 최적화된 번들에 포함되어 효율적인 서비스가 가능합니다.

---

마치며

이처럼 Django-Vite 워크플로우에서는 Tailwind 플러그인뿐 아니라, HTMX와 Alpine.js 같은 최신 프론트엔드 기술들을 자연스럽게 통합해 모던하고 인터랙티브한 Django 웹 애플리케이션을 만들 수 있습니다.

더 복잡한 라이브러리(예: Three.js, React, Vue.js)도 비슷한 방법으로 확장 가능하니, 궁금한 점이나 요청사항은 댓글로 남겨주세요!

도움이 되셨다면 좋아요와 구독 부탁드리고, 후원도 감사합니다!

 

---

 

How do we use Tailwind plugins, HTMX, and Alpine.js in a Django-vite workflow? We're going to dive in and look at that in this video. Now, if you want to know the fundamentals of Django-vite, we did an introductory video on that, it should be appearing on the screen now, and that's going to dive into how to set up Django-vite and get it working in a Django application, but we're going to go a step further in this video and look at integrating other packages and Tailwind plugins into our application, and this approach is going to be extendable to any other JavaScript package that you want to bring into your application. Before we get started, if you want to support the channel, check out our coffee page, and thanks very much to everybody that supported the channel via coffee, and don't forget to like and subscribe as well. Now, what we're going to do to start with is, we're going to start by adding a Daisy UI plugin to the Tailwind setup that we got in the last video, so let's open VS Code.

 

This was our entry point, the main.js file, where we loaded in the main.CSS file, and if we look at that one, that's the one where we import the Tailwind CSS module. Again, for more information on this, check out that previous video. Now, we want to extend. Tailwind CSS with some cool plugins, for example, Daisy UI and Flowbite, so let's go to the documentation here for Daisy UI.

 

Now, of course, to start with, we need to install Daisy UI with npm, and then we're going to add this plugin directive here to the CSS file. So let's go back to VS Code, and what I'm going to do on the terminal here is run that npm install command, and we're going to install Daisy UI, and we can also go back to the documentation and copy this plugin directive here, and let's add that to our main CSS file, and it really is as simple as that if we want to add Daisy UI. If you remember, Tailwind version 3, you had to have a plugins array in the Tailwind config file, it's now as simple as declaring this plugin here with this directive in your CSS file. So let's test this out.

 

What I'm going to do on the terminal here is run the npm run dev command, and if you remember from the previous video, if we look at package.json, that is running the Vite development server. That's going to enable hot module reloading while we develop this application, and on the other terminal, what I'm going to do is start the Django server. Now, there is one change I need to make from the previous video. If we go back to settings.py, we have the Django Vite config here, and We set Dev mode to false at the end of that video, just to show how we would use this in production, but we're going to change that back to True here.

 

Now, once we've done that, we're going to go to Local Host 8000, and we have this page here, and what we're going to do now is try and add a Daisy UI component. So let's go to the Daisy UI documentation, and we're going to go to the button section here, and I'm just going to scroll down and copy some HTML. Let's grab this here, and let's go back to our application, and we have an index.html template. Now, to test that it's working, we're going to add this button here, and I'm also going to.

 

Add a color class here, so button primary, and we're going to save that. And if we go back here to our application, you can see we now have this Daisy UI button appearing, that's the Styles here, and that's the primary color, so that installation has worked. And with our Django-vite setup, if we go back to the config file here, we have this main.js entry point, and if we look at that file here, we're importing the content from main.css, and that includes now this plug-in directive where we import da UI, so we just need to install da UI and declare it here, it's that simple. And I want to add a slightly more complex component here.

 

From DA UI, let's try the timeline just to make sure everything is working. We're going to copy this code here, and let's again go back to our index.html file, and we're going to replace this button, and in fact, not replace, I'm going to paste this code underneath the button, and then we can go back to our application, and you can see we now have this timeline. So DAC UI is now installed. We're now going to move on to flow bite very quickly, and it's going to be a similar process, and I'll leave a link to this page below the video.

 

Here on the right hand side, we have a section for using the bundled JavaScript, so we're going to. Use that after we install Flowbite using npm, so let's copy the npm install command, go back to the terminal, and we're going to run that command. While that's running, we can go back here and check out this bundled JavaScript. So one of the most popular ways of using Flowbite is to include the bundled Javascript file, and we can directly import that into our main JavaScript.

 

That's what we're going to do now, so let's copy that, and there's a slight difference from Daisy UI here. Instead of the CSS file, we're going to use the JavaScript here, and at the top, we can just import Flowbite, and if we go back to the Terminal that's running V here, that should have reloaded and it should still be working fine, and we can then start the Django server at the bottom. And what I'm going to do is grab a toast from Flowy, so I'm going to search for that particular component, and we're going to go to this page here, and let's click this interactive toast that we have here, and we're going to copy the HTML for this. And if this has been installed successfully, we can go back to index.html, and I'm going to remove that timeline that we added and paste in the code for the toast.

 

And if we go back here to Local Host 8000, notice there was a bit of a Flash there, but eventually that has loaded, and we can see the toast here. Now, you will get this flash when you're using the Vite dev server, but when you build these assets for production, you won't get that flash. So, there's a slight bit of latency when the Vite dev server reloads and reserves these static assets, but we can now see that we have this Flowbite toast available, and if we click the cross here, that's going to remove that from the page. So, that's interactive, and it's using the JavaScript in the Flowbite package.

 

So, we can see now how we can integrate plugins for Tailwind CSS into our applications. We've done it with Daisy UI and Flowbite, there are also a number of others. If you have any recommendations or things you want to see on the channel, let me know in the comments. Let's now move on, and we're going to look at HTMX.

 

Now, I'm on the HTMX documentation, and we're going to go to the installation section of this documentation. Now, typically on this channel, we are using the CDN just to get up and running very quickly. What we're going to do now is we're going to look at the npm and webpack sections, so let's start by copying the npm install command, and we're going to go back to VS code, and we're going to paste that in there and install. Into this nodejs environment, now once we've got that installed locally, of course, it's going to add HTMX to the node modules directory, and we can then use HDMX very easily inside our build process.

 

Now, we can look at the web pack docs here, the process is going to be similar for vit in many ways. Vit is kind of like a replacement for webpack, but the Core Concepts are going to be the same. Now, we are going to need to modify it slightly, and that's because V uses es modules instead of common JS, and that means that this statement here, where we set the HTMX property on the window object, that's not going to work because of This require statement, so we're going to modify this input at the top very slightly, but I'm going to copy it, and let's go back to our application and go to the main.js. Now, just to make this a bit more clear, I'm going to remove the console log statements and those other imports, and let's import HTMX.org, but we're actually going to import HTMX from that package, and once we've imported HTMX, we can then start using the attributes, but we can also set it on the window object, so we're going to make HTMX globally accessible by setting on that window object, so window.HTMX is going to be equal to HTMX that we've.

 

Imported here at the top on line three. Now let's save this main.js, and that should trigger a rebuild here of the Vite development server, and we can now test, can we send an HTMX request? So let's go back to index.html, and I'm going to go to the top here. Let's go to this button that we defined, and I'm going to add some HTMX attributes here, so we're going to add a get request, and I have a URL in this Django application, so I'm going to use the URL template tag here, and the name of that URL is index. If we look at urls.py, you can see that one here, so let's close this, and we're going to save this file and see what happens now.

 

Going to restart the Django server on the terminal, and we can go back to the browser. So we're now on this page here, and if I click this button, notice that something pretty weird is happening. So this is definitely not what you would want to happen in a real application, but we're getting some kind of response here, and that is being swapped into the page. So that implies the HTMX is working, and if we go to the terminal at the bottom here, this is the request that was sent, and let's just look at the network tab to verify this.

 

So I'm on the dev tools here, on the network tab, I'm going to refresh the page, and then if we click This button, notice that we are sending this Ajax request to the back end, and that is all being triggered by HTMX, so let's close this off. We know that HTMX is installed and it's working, it's part of this vite build process, and it's contributing now to this crazy user interface that we see in front of us. Now, the reason this user interface is so bad is because we're sending this request to the index URL, and that's in turn hitting up this view here in the Django project, and that's returning the entire index.html template, and that's trying to swap that into the button, and the reason for that is that the button is. The element that's triggering the request, so by default that's going to be the target for the response content to swap into the DOM.

 

Now, we're going to fix this just to make it work, so we could, for example, give the button an ID here, and I'm just going to give it the ID of "click." And then from the response content, we could use HX-Select and only select the click button to make sure it's actually only replacing the button itself, and to replace that entire button, we can set the swap to Outer HTML. If you want to know more about these attributes, check out the HTMX series that we did that's appearing on the screen now. Now, if we go back here, we should be able to refresh the page. When we click the button, what's actually happening here is that the server sends back the entire page as a response, but we're only selecting out the button itself here by using its ID that you can see here, and the swap mechanism of outer HTML takes the original button here, and it replaces it with this new button coming back from the server.

 

So it's a completely pointless HTMX transition, but the point here is that HTMX is now installed and it's working in our project. We're now going to move on and we're going to look at Alpine JS, so Alpine JS is going to. be the last part of this video, we're going to add that to the workflow that we have, to the build process that we're using Django-vite for. So, I'm on the installation page of the Alpine.js documentation.

 

I'll leave a link to that below the video. There are two ways to easily include Alpine into your project: we can either include it from a script tag, or we can import it as a module. Now, the script tag is the CDN approach here that you see, or you can download the source code and just reference that locally. We're going to look at the module approach, so let's go to this section here and we're going to copy the npm install.

 

command. So again, when we're doing this, what we need to do is install these packages locally using npm, and that's going to install them into that node modules directory, and it will also install any dependencies of these projects. So Alpine JS is now installed. What we can do is go back to the documentation, and to import Alpine into your bundle, all we need to do is import the package, and then again, just like HTMX, we can set that on the window object, and then we call the Alpine.start method.

 

So I'm just going to copy these three lines of code, and we can go back to our entry point, which was main.js, and in this file. What we can do is just paste those lines of code, so now we're importing Alpine. We set that on the window object, just like HTMX, to make it globally accessible, and then we call Alpine.doStart. Now let's test this out and see if it's working.

 

What I'm going to do is go back to index.html, and we have this button here, and we have a toast underneath it. Now I'm going to start the server so that we can see what this is like, and we can go back to Local Host here, and when we refresh the page, we can see this user interface. What I'm going to do now is surround this content with a div, and we're going to make that an Alpine component now. The way to do that is to create an element, such as a div, and we can add an X data property to that element, and what we want to do when we click this button is we want to toggle whether or not the toast is shown on the page, so let's create an object here inside X data.

 

This is a JavaScript object, essentially, and it's going to have a Boolean property called show toast, and by default, we're going to set that to false, and then we can close the div off, and I'm going to tab all of this content over here, and that's going to live inside that Alpine JS component, and then we can close off the div at the bottom. Now, once we've added the component, let's scroll back up here to the button. When we click this button, we want to change the value of "show toast," and we basically want to invert that. So, for example, it starts off as being false, when we click the button, we want to change it from false to true, and the next time we click the button, we want to go back to false.

 

So, with Alpine, what we can do here is add a click listener here, and the statement that we're going to add here is we're going to take the "show toast" property, and we're going to set that to the inverse of whatever it is at the current moment, so again, from false to true, and so on. Now, once we've added That we can go to the div that represents the toast, and we're going to add a very simple property from Alpine.js, and that's the x-show attribute, and we're going to set that to showToast. So, in other words, when that value is false, this div and all of its children are going to be hidden on the page. They're not going to be shown, because x-show evaluates to false based on the state that we have in the Alpine component, and then when we click this button above, it's going to change the state of showToast from false to true, and therefore x-show will evaluate to true, and it's going to toggle this on the page.

 

Now I'm going to save. This, and what we can do, is go back to our application, and we can see that the toast no longer appears on the page when we click the button. It does appear, and we can now toggle whether or not that's shown just by clicking this button here. So this proves that Alpine is installed, and it's now working in this application, and with this setup in our Django application being powered by Vite and the Django Vite package, we're now able to build nice modern Django web applications using Tailwind and any number of plugins for Tailwind, as well as HTMX and Alpine.js, and HTMX is used for sending new requests to the back end, and Performing updates and updating the DOM in response, and you can, you can also use Alpine.js for client interactivity.

 

If you want to know more about Alpine.js, check out the video appearing on the screen now. And what Vite does in this workflow is it takes this entry point, which is main.js, and if we look at that here, this file here is handling the import of the CSS, and that CSS contains the import of Tailwind CSS and the DAUI plugin. And in main.js, we also import Flowbite, HTMX, and Alpine.js, so all of that is in the entry point, and Vite is going to use Rollup to bundle all of that into a single output file. Now we can show that output.

 

file. So what I'm going to do is stop the server here, and instead of mpm run dev, we're going to run the npm run build command, and that's going to build for production. Now, if we look at what's generated here, it's in the assets directory, and that's because in the build section of the V config file, we're specifying the assets directory as the output directory here. So let's go there, and we're going to look at the jangle assets that have been generated, and we can see we have a single CSS and a single JS file.

 

Now what I want to do is just look at the JS file here, and it's optimized for production, so it's been minified. A little bit, as you can see, and if we search here, for example, for HTMX, we can find that that code is part of this final bundle, and the same applies if we search for Alpine, code from the Alpine package is now part of this bundle that we're going to serve to our different clients that are requesting this application. And if we look at the base HTML file and go to the Head tag here, we're using the vite asset template tag to reference that entry point, and we can have multiple entry points, by the way, we have a single one here, and basically this entry point is going to be mapped to the built JS file that you see here, and that's Going to happen using this manifest.json file, if you want to see more about that, check out the previous video, but essentially, it takes that reference here and it maps it to this one here. So all of the code from the packages that we import into our entry point, and also any packages that those files that we're importing, is going to be included in that bundle and allows us to serve this single GS file back to our clients, as well as the CSS for Tailwind and Daisy UI.

 

So that's all for this video, if you'd like to see more advanced topics, potentially bundling more complex packages like 3GS or even React and VJs, then Let me know in the comments, and if you found this content useful, check out our coffee page. And thank you to everyone who's supported the channel, and don't forget to subscribe if you haven't already done so. Thanks again, and we'll see you in the next video..