Blog

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:

box
> 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: https://github.com/coldbox-templates/default

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   readme.md
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=http://site.com/myCustomAppTemplate.zip

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" );

elixir.config.mergeConfig({
    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
	mix
		.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: https://github.com/browserslist/update-db#readme
  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.

Summary

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: https://github.com/coldbox-templates

Add Your Comment

(2)

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

ColdBox 7.2.0 Released

ColdBox 7.2.0 Released

ColdBox, a widely used development platform for ColdFusion (CFML), has unveiled version 7.2. Packed with compelling new features, bug fixes, and enhancements, this release is designed to empower developers by boosting productivity, refining scheduled task capabilities, and enhancing the overall reliability and efficiency of application development. This article will delve into the key highlights of ColdBox 7.2 and elucidate how these advancements can positively impact developers in their daily coding endeavors.

Luis Majano
Luis Majano
November 20, 2023
Into the Box 2023 Series on CFCast

Into the Box 2023 Series on CFCast

Excitement is in the air as we unleash the highly anticipated ITB 2023 series exclusively for our valued CFCast subscribers – and the best part? It's FREE for CFCast members! Now is the perfect time if you haven't joined the CFCast community yet. Plus, we've got an incredible End-of-Year deal that's too good to miss

Maria Jose Herrera
Maria Jose Herrera
November 20, 2023
Ortus Deals are Finally Here!

Ortus Deals are Finally Here!

The much-anticipated Ortus End-of-the-Year Sale has arrived, and it's time to elevate your development experience! Whether you're a seasoned developer, a tech enthusiast, or someone on the lookout for top-notch projects, Ortus has something special in store for you. Brace yourself for incredible discounts across a wide array of products and services, including Ortus annual events, books, cutting-edge services, and more.

Maria Jose Herrera
Maria Jose Herrera
November 15, 2023