bennadel/Application.cfc

## Application.cfc
component
	output = false
	hint = "I define the application settings and event handlers."
	{

	// Define the application settings.
	this.name = "HelloWorld";
	this.applicationTimeout = createTimeSpan( 0, 1, 0, 0 );
	this.sessionManagement = false;
	this.setClientCookies = false;

	// ---
	// LIFE-CYCLE METHODS.
	// ---

	/**
	* I process the requested script.
	*/
	public void function onRequest( required string scriptName ) {

		// The root-absolute path to this demo app (used in the page module).
		request.appPath = "/hello-world/app";

		// Basecamp's Hotwire Turbo Drive will only work with static ".htm" or ".html"
		// file extensions (at the time of this writing). As such, in order to get Turbo
		// Drive to play nicely with ColdFusion's ".cfm" file extensions, we're going to
		// route all requests through the index file and then dynamically execute the
		// corresponding ColdFusion template.
		// --
		// CAUTION: In a production application, blindly invoking a CFML file based on a
		// user-provided value (path-info) can be dangerous. I'm only doing this as part
		// of a simplified demo.
		if ( cgi.path_info.len() ) {

			var turboScriptName = cgi.path_info
				// Replace the ".htm" file-extension with ".cfm".
				.reReplaceNoCase( "\.html?$", ".cfm" )
				// Strip off the leading slash.
				.right( -1 )
			;

			include "./#turboScriptName#";

		} else {

			include scriptName;

		}

	}

}

## docker-compose.yaml
version: "2.4"

services:

  lucee:
    build:
      context: "./docker/"
      dockerfile: "Dockerfile"
    ports:
      - "80:8080"
      - "8080:8080"
    volumes:
      - "./demos:/app"
    environment:
      BOX_SERVER_APP_CFENGINE: "lucee@5.3.10+97"
      BOX_SERVER_PROFILE: "development"
      cfconfig_adminPassword: "password"
      LUCEE_CASCADE_TO_RESULTSET: "false"
      LUCEE_LISTENER_TYPE: "modern"
      LUCEE_PRESERVE_CASE: "true"

## Dockerfile
FROM ortussolutions/commandbox

RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - \
	&& apt-get install -y \
		build-essential \
		nodejs \

## index.cfm
<cfmodule template="./tags/page.cfm">

	<h1>
		Hello World
	</h1>

	<p>
		This is the root page in my CFML+Hotwire exploration.
	</p>

	<p>
		<a href="sub/index.htm">Try going to a sub folder</a> &rarr;
	</p>

</cfmodule>

## main.js
// Import core modules.
import * as Turbo from "@hotwired/turbo";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

var turboEvents = [
	// "turbo:click",
	// "turbo:before-visit",
	// "turbo:visit",
	// "turbo:submit-start",
	// "turbo:before-fetch-request",
	// "turbo:before-fetch-response",
	// "turbo:submit-end",
	// "turbo:before-cache",
	// "turbo:before-render",
	// "turbo:before-stream-render",
	// "turbo:render",
	"turbo:load",
	// "turbo:before-frame-render",
	// "turbo:frame-render",
	// "turbo:frame-load",
	// "turbo:frame-missing",
	// "turbo:fetch-request-error"
];

for ( var eventType of turboEvents ) {

	document.documentElement.addEventListener(
		eventType,
		( event ) => {

			console.group( "Event:", event.type );
			console.log( event.detail );
			console.groupEnd();

		}
	);

}

## package.json
{
	"name": "hello-world",
	"scripts": {
		"js-build": "parcel build          ./src/js/main.js --dist-dir ./app/dist/",
		"js-watch": "parcel watch --no-hmr ./src/js/main.js --dist-dir ./app/dist/",
		"less-build": "parcel build        ./src/less/main.less --dist-dir ./app/dist/",
		"less-watch": "parcel watch        ./src/less/main.less --dist-dir ./app/dist/"
	},
	"author": "Ben Nadel",
	"license": "ISC",
	"dependencies": {
		"@hotwired/stimulus": "3.2.1",
		"@hotwired/turbo": "7.2.4",
		"@parcel/transformer-less": "2.8.3",
		"parcel": "2.8.3"
	}
}

## page-truncated.cfm
<cfif ( thistag.executionMode == "end" )>

	<cfsavecontent variable="thistag.generatedContent">

		<!doctype html>
		<html lang="en">
		<head>
			<cfoutput>
				<base href="#request.appPath#/hotwire.cfm/" />
			</cfoutput>

			<!---
				CAUTION: Since I'm setting the base-href to route through a ColdFusion
				file, our static assets have to use root-absolute paths so that they
				bypass the base tag settings.
			--->
			<cfoutput>
				<script src="#request.appPath#/dist/main.js" defer async></script>
				<link rel="stylesheet" type="text/css" href="#request.appPath#/dist/main.css"></link>
			</cfoutput>
		</head>
		<body>

			<cfoutput>
				#thistag.generatedContent#
			</cfoutput>

		</body>
		</html>

	</cfsavecontent>

</cfif>

## sub-index.cfm
<cfmodule template="../tags/page.cfm">

	<h1>
		Sub Folder
	</h1>

	<p>
		Folders are a fun, if you can get into it.
	</p>

	<p>
		<a href="index.htm">Back to the root page</a> ^
	</p>

</cfmodule>
	component
	output = false
	hint = "I define the application settings and event handlers."
	{

	// Define the application settings.
	this.name = "HelloWorld";
	this.applicationTimeout = createTimeSpan( 0, 1, 0, 0 );
	this.sessionManagement = false;
	this.setClientCookies = false;

	// ---
	// LIFE-CYCLE METHODS.
	// ---

	/**
	* I process the requested script.
	*/
	public void function onRequest( required string scriptName ) {

	// The root-absolute path to this demo app (used in the page module).
	request.appPath = "/hello-world/app";

	// Basecamp's Hotwire Turbo Drive will only work with static ".htm" or ".html"
	// file extensions (at the time of this writing). As such, in order to get Turbo
	// Drive to play nicely with ColdFusion's ".cfm" file extensions, we're going to
	// route all requests through the index file and then dynamically execute the
	// corresponding ColdFusion template.
	// --
	// CAUTION: In a production application, blindly invoking a CFML file based on a
	// user-provided value (path-info) can be dangerous. I'm only doing this as part
	// of a simplified demo.
	if ( cgi.path_info.len() ) {

	var turboScriptName = cgi.path_info
	// Replace the ".htm" file-extension with ".cfm".
	.reReplaceNoCase( "\.html?$", ".cfm" )
	// Strip off the leading slash.
	.right( -1 )
	;

	include "./#turboScriptName#";

	} else {

	include scriptName;

	}

	}

	}
	version: "2.4"

	services:

	lucee:
	build:
	context: "./docker/"
	dockerfile: "Dockerfile"
	ports:
	- "80:8080"
	- "8080:8080"
	volumes:
	- "./demos:/app"
	environment:
	BOX_SERVER_APP_CFENGINE: "lucee@5.3.10+97"
	BOX_SERVER_PROFILE: "development"
	cfconfig_adminPassword: "password"
	LUCEE_CASCADE_TO_RESULTSET: "false"
	LUCEE_LISTENER_TYPE: "modern"
	LUCEE_PRESERVE_CASE: "true"
	FROM ortussolutions/commandbox

	RUN curl -fsSL https://deb.nodesource.com/setup_19.x \| bash - \
	&& apt-get install -y \
	build-essential \
	nodejs \
	<cfmodule template="./tags/page.cfm">

	<h1>
	Hello World
	</h1>

	<p>
	This is the root page in my CFML+Hotwire exploration.
	</p>

	<p>
	<a href="sub/index.htm">Try going to a sub folder</a> →
	</p>

	</cfmodule>
	// Import core modules.
	import * as Turbo from "@hotwired/turbo";

	// ----------------------------------------------------------------------------------- //
	// ----------------------------------------------------------------------------------- //

	var turboEvents = [
	// "turbo:click",
	// "turbo:before-visit",
	// "turbo:visit",
	// "turbo:submit-start",
	// "turbo:before-fetch-request",
	// "turbo:before-fetch-response",
	// "turbo:submit-end",
	// "turbo:before-cache",
	// "turbo:before-render",
	// "turbo:before-stream-render",
	// "turbo:render",
	"turbo:load",
	// "turbo:before-frame-render",
	// "turbo:frame-render",
	// "turbo:frame-load",
	// "turbo:frame-missing",
	// "turbo:fetch-request-error"
	];

	for ( var eventType of turboEvents ) {

	document.documentElement.addEventListener(
	eventType,
	( event ) => {

	console.group( "Event:", event.type );
	console.log( event.detail );
	console.groupEnd();

	}
	);

	}
	{
	"name": "hello-world",
	"scripts": {
	"js-build": "parcel build ./src/js/main.js --dist-dir ./app/dist/",
	"js-watch": "parcel watch --no-hmr ./src/js/main.js --dist-dir ./app/dist/",
	"less-build": "parcel build ./src/less/main.less --dist-dir ./app/dist/",
	"less-watch": "parcel watch ./src/less/main.less --dist-dir ./app/dist/"
	},
	"author": "Ben Nadel",
	"license": "ISC",
	"dependencies": {
	"@hotwired/stimulus": "3.2.1",
	"@hotwired/turbo": "7.2.4",
	"@parcel/transformer-less": "2.8.3",
	"parcel": "2.8.3"
	}
	}
	<cfif ( thistag.executionMode == "end" )>

	<cfsavecontent variable="thistag.generatedContent">

	<!doctype html>
	<html lang="en">
	<head>
	<cfoutput>
	<base href="#request.appPath#/hotwire.cfm/" />
	</cfoutput>

	<!---
	CAUTION: Since I'm setting the base-href to route through a ColdFusion
	file, our static assets have to use root-absolute paths so that they
	bypass the base tag settings.
	--->
	<cfoutput>
	<script src="#request.appPath#/dist/main.js" defer async></script>
	<link rel="stylesheet" type="text/css" href="#request.appPath#/dist/main.css"></link>
	</cfoutput>
	</head>
	<body>

	<cfoutput>
	#thistag.generatedContent#
	</cfoutput>

	</body>
	</html>

	</cfsavecontent>

	</cfif>
	<cfmodule template="../tags/page.cfm">

	<h1>
	Sub Folder
	</h1>

	<p>
	Folders are a fun, if you can get into it.
	</p>

	<p>
	<a href="index.htm">Back to the root page</a> ^
	</p>

	</cfmodule>