TodoMVC Implementation with CFWheels and HTMX
Recently I’ve been playing around with HTMX and really starting to love it. So what is HTMX? From their website:
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
Introduction to htmx
And also:
Why should only
<a>and<form>be able to make HTTP requests?
Why should onlyclick&submitevents trigger them?
Why should onlyGET&POSTmethods be available?
Why should you only be able to replace the entire screen?By removing these arbitrary constraints, htmx completes HTML as a hypertext
Motivation behind htmx
So what does this all mean? Well, in its simplest form, it means being able to build modern web applications with the UX that users have come to expect, with the HTML, CSS, and the backend technology of your choice which in our case is CFML and CFWheels.
So I decide to see if I could build the TodoMVC project using no hand written JavaScript and only relying on HTML, CSS, and CFWheels. I downloaded the template project and took a look at the application specs to get an idea of what to implement.
Here is the video of the running app:
So if you want to run the app locally, you’ll need to have Commandbox installed and the CFWHeels CLI commands for CommandBox installed as well. With those two items taken care of, launch a CommandBox and issue the following commands.
wheels g app name=todo datasourceName=todo template=cfwheels-todomvc-htmx --setupH2
package install
server startLet’s look at those lines and talk about what they do. The first line wheels g app will download the template app from Forgbox.io and create a CFWheels application and name it todo. It also create a H2 database and configures the datasource for you. The next line will install all the dependencies of our app. These include, a few CommandBox modules to make development easier, the CFWheels core framework directory and place it into the wheels folder, and install the H2 drivers into our Lucee server for out application. The last line will start our Lucee server. I’ve also added a setting to automatically run the Database migrations on application startup so the database schema is created.
You can checkout the code on GitHub. Let me know what you think.
EDIT: The Lucee server that starts up will have cfwheels set as its admin password.
Hi Peter,
Thanks for this example, I hadn’t heard of htx before so I thought I would try it out. I followed the steps above but I’m getting an error message relating to h2
lucee.commons.lang.ClassException: cannot load class through its string name, because no definition for the class with the specified name [org.h2.Driver] could be found caused by (java.lang.ClassNotFoundException:org.h2.Driver;java.lang.ClassNotFoundException:org.h2.Driver not found by lucee.core [138];)
Is this an issue with my installation of coldbox?
Ed that error basically means the H2 driver wasn’t installed properly. I tried to take steps to make sure it gets installed automatically but sometimes it just doesn’t like to play ball. The easiest way to solve this is to log into the Lucee administrator and go to the Extension section and click on Applications. Then select the H2 driver and install it. After you install it, restart Lucee. That should get it to work for you. I’ll also look to see how I can make this install a little more robust.
Ed,
I suspect the reason for this was because the Lucee server didn’t get an admin password set on startup. That tends to stop the extension installation. I tend to forget about this step cause I have a file at ~/.box.env that sets a default admin password for all the Lucee servers I start up in CommandBox. I’ve added a default password of `cfwheels` that will get injected into the Lucee server on startup which will allow the H2 driver to be installed. I also tested this in a clean room MacOS VM and it worked. So give it another try by deleting the folder it created and issue the three commands again. Let me know how it goes.
-Peter
Hi Peter,
That’s for getting back to me so quickly, I did as you said and it all seemed ok, the installer doesn’t seem to like the space in one of my folder names:
Navigating to new application...C:\Users\ed\Work Projects\Development\todoERROR (5.4.2+00453)
C:\Users\ed\Work: No such file or directory
Anyway, after the error I went into the folder manually and ran the “package install” command, that completed and after that I ran “server start”. When that happened I got an error in the browser window:
Error while creating file "C:/Users/peter" [90062-172]-= Ed
Sorry you’re having so much trouble but I really want to work through this to make the installation process more robust. So the first issue is the space in directory names. That would be in the CFWHeels CLI. Let me take a look at that quickly.
No need to apologise, I have time and it will help the community for this to be working. I know from experience that having a second pair of eyes and someone to beta test can help a lot 🙂
Okay Ed, I just published a new version of the CLI. Can you issue a `box install cfwheels-cli` to see if it installs the v0.7.2 version. This should handle the spaces in directory paths better. Let me run this whole thing in a Windows PC to see how it behaves. I’ve been too Mac oriented lately.
-Peter
Hi Peter,
I tried the CLI update but when I tried the todo install I got the same error as before. I’m wondering if my update to v0.7.2 worked correctly, is there a way to check the version?
-= Ed
Ed,
I don’t think this is limited to your install. It looks like the CommandBox CFConfig and dotEnv modules are not working on Windows the way they should. I’m looking into it. in the mean time you can resort to doing some of these steps manually. The key is to get the H2 drivers installed into your Lucee server. Point your browser to `http://localhost:/lucee/admin/server.cfm` . This will probably display a note about a password needing to be set for Lucee. The instructions say to create a text file and put a password in it at `/lucee-server/context/password.txt` but it is sometimes hard to find that folder in a CommandBox Lucee server. The easiest way to get there is to use the ComnnadBox system tray app and select Open > Server Home. The location of your server home directory will open up in Windows Explorer. Then open the WEB-INF > Lucee-server > context folders in turn and create a text file named password.txt in there. Then using the CommandBox system tray app select Open > Server Admin if you happened to close the browser. This will bring you back to the No Password set yet! screen. On that screen click on the `import file` button to read in the password.txt file you created. You should get the Lucee admin server login screen. Go ahead and log in with the password you created. Now go to Extension > Applications. Click on the H2 extension and select the 1.3.172 version (should be the only one listed) and click install. This will install the extension and reload Lucee. Now if you go back to the actual app it should run. If you’ve closed that browser tab the easiest way to get back to it is to use the CommandBox system tray again and select Open > Site Home.
This should let you at least run the app and see what it does. I’ll work on getting the install to work on Windows. Now you see why I’m trying to automate all those steps.
Ed,
Just our of curiosity, what happens if you run the box.exe command as administrator? Open Windows Explorer and navigate to where box.exe is installed. Right click on it and select `Run as administrator` and then go through the three installation steps. Change the name in the first call to `todo2` to make sure you get a new installs of the server to launch. I just did this on my Windows box and it worked. So there is some sort of a permission issue at play here. I’m going to have to investigate this further.
-Peter
If you run
package list --systemyou should get a list of all the packages installed. Usually this only lists the packages installed in the current directory but the--systemflag will cause it to display all global commandbox packages as well.When I ran commandbox as administrator it all worked perfectly 🙂 I probably should have thought of that myself but I’ve had one of those days. I did see one error but it doesn’t look like it caused any problems. Mentioning here more for your reference:
Running the post install script...The script [postInstallAll] does not exist in this package.
The To Do app is now running nicely and I can add and remove entries from the list. It’s a nice little demo app and I look forward to playing around with htx, it could solve a bunch of problems for me where I need ajax functions but can’t (or don’t have time to) build it with a framework.
Let me also take this opportunity to say thanks for stepping up to the plate and taking over leadership of the project 😀