ColdBox Application Templates

Grant Copley June 19, 2023

Spread the word

Grant Copley

June 19, 2023

Spread the word

Share your thoughts

ColdBox 7 dropped just over a month ago, and as part of those updates, the ColdBox Application Templates have also been updated. If you didn't know already, there are a handful of application templates that you can use to get up and running with ColdBox quickly.

Here is a listing of the latest supported templates:

Default - The default ColdBox application template.

Elixir - The default template with ColdBox Elixir support for asset pipelines

Modern - A fresh new approach to ColdBox applications that are non-root based. *experimental

REST - A base REST API using ColdBox

REST HMVC - An HMVC REST API using modules

Super Simple - Barebones conventions.

Using Templates

If you have CommandBox installed, you can create a new ColdBox application using the default application template with the following command:

> mkdir myapp --cd
> coldbox create app

Once the commands finishes, you will find a folder with all of the folders and files from the default application template:

CommandBox:myapp> ls
 <DIR>   .vscode/
 <DIR>   build/
 <DIR>   coldbox/
 <DIR>   config/
 <DIR>   handlers/
 <DIR>   includes/
 <DIR>   interceptors/
 <DIR>   layouts/
 <DIR>   lib/
 <DIR>   models/
 <DIR>   modules_app/
 <DIR>   testbox/
 <DIR>   tests/
 <DIR>   views/
6.0 KB   .DS_Store
1.2 KB   .cfconfig.json
2.4 KB   .cfformat.json
1.6 KB   .cflintrc
0.1 KB   .dockerignore
0.3 KB   .editorconfig
0.6 KB   .env
0.6 KB   .env.example
0.5 KB   .gitattributes
0.3 KB   .gitignore
0.2 KB   .markdownlint.json
4.0 KB   Application.cfc
1.6 KB   box.json
1.1 KB   favicon.ico
0.4 KB   index.cfm
5.8 KB
0.5 KB   robots.txt
0.1 KB   server.json

We can specify a skeleton argument if we want to create a ColdBox application using a different template other than the default.

> coldbox create app skeleton=rest
> coldbox create app skeleton=SuperSimple

The command above will install the REST API or SuperSimple application templates into the current folder. The skeleton argument can accept the name of the template, as well as any valid ForgeBox Endpoint ID, which can include a Git repo or HTTP URL pointing to a package.

> coldbox create app skeleton=

Elixir Template

One of my favorite templates to use is the Elixir template. If you are working heavily with JavaScript and any frontend JavaScript frameworks such as VueJS or React, this template has everything you need to get up and running in a few minutes.

> coldbox create app skeleton=Elixir

ColdBox Elixir makes working with Webpack much easier. Let's take a look.

In the ROOT of your application, you should now find a webpack.config.js file.

const elixir 	= require( "coldbox-elixir" );
const webpack 	= require( "webpack" );

    plugins: [
        // globally scoped items which need to be available in all templates
        new webpack.ProvidePlugin({
			// $              : "jquery",
			// jQuery         : "jquery",
			// "window.jQuery": "jquery",
			// "window.$"     : "jquery",
            // "Vue"          : ["vue/dist/vue.esm.js", "default"],
            // "window.Vue"   : ["vue/dist/vue.esm.js", "default"]

 | Elixir Asset Management
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your ColdBox application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.

module.exports = elixir( mix => {

	// Mix App styles
		.js( "App.js" )
		.sass( "App.scss" );

} );

Our JavaScript and SASS assets ( by convention ) can be found in the resources folder and this is where you would place your code for the app.

CommandBox:myapp> ls resources/assets/js/
0.0 KB   .gitkeep
0.2 KB   App.js

CommandBox:myapp> ls resources/assets/sass/
May 19,2023  21:05:  38   H         0.0 KB   .gitkeep
May 19,2023  21:05:  38             0.3 KB   App.scss

To get Elixir to compile our assets down, we just need to make sure we have Node and NPM installed, and run the following.

npm install
npm run dev
npm run watch # if you want to use the watcher

If everything ran successfully, you'll see an output similar to this:

+ webpack@5.87.0
added 41 packages from 29 contributors and audited 548 packages in 8.813s

64 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

  build [=         ] 10%Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly:
  build [========= ] 93%(node:91150) [DEP_WEB

The JavaScript and CSS assets are placed by convention in the includes folder.

If you look layouts/Main.cfm file, you will find this in the HTML header:

<link href="#html.elixirPath( "css/App.css" )#" rel="stylesheet">

This will include a reference to the includes folder where your CSS is compiled down automatically.

<link href="/includes/css/App.css" rel="stylesheet">

Covering the features of Elixir are outside of scope of this posting, but by using #html.elixirPath#, you can take advantage of Elixir's Asset Versioning, where a unique file name is created anytime your CSS or JavaScript changes - therefore allowing you to cache your assets and force your application users to download a new file only when changes are made.


What I love most about these templates is just the amount of time they save me. With a few commands, you can have all the folders and files scaffolded out for you and get straight to developing your next great idea.

Be on the lookout for additional templates as more are being added over time.

You can find the latest Application templates currently available on Github:

Add Your Comment


Jun 20, 2023 15:31:09 UTC

by Andrew Kretzer

What are the current things to look out for with the modern template? I note that it's been marked as experimental for quite some time so would love to know what to be on the lookout for and/or what to help try to test?

Jun 20, 2023 21:02:51 UTC

by Grant Copley

Hi Andrew, Mainly I would look out for errors related to file and folder paths. With the modern template, the core ColdBox folders ( config, handlers, interceptors, views, etc ) are placed into a folder called "app". JavaScript and CSS assets exist within a "public" folder and only public files for your app are placed inside this folder.

Recent Entries

Ortus March Newsletter

Ortus March Newsletter

Welcome to Ortus Solutions’ monthly roundup, where we're thrilled to showcase cutting-edge advancements, product updates, and exciting events! Join us as we delve into the latest innovations shaping the future of technology.

Maria Jose Herrera
Maria Jose Herrera
April 01, 2024
Into the Box 2024 Last Early Bird Days!

Into the Box 2024 Last Early Bird Days!

Time is ticking, with less than 60 days remaining until the excitement of Into the Box 2024 unfolds! Don't let this golden opportunity slip away; our exclusive Early Bird Pricing is here for a limited time only, available until March 31st. Why wait? Secure your seat now and take advantage of this steal!

Maria Jose Herrera
Maria Jose Herrera
March 20, 2024
Ortus February Newsletter 2024

Ortus February Newsletter 2024

Welcome to Ortus Solutions’ monthly roundup, where we're thrilled to showcase cutting-edge advancements, product updates, and exciting events! Join us as we delve into the latest innovations shaping the future of technology.

Maria Jose Herrera
Maria Jose Herrera
March 06, 2024