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

Unveiling the Future of CFML Development - 3rd Round of Sessions

Unveiling the Future of CFML Development - 3rd Round of Sessions

Welcome back to our journey into the future of CFML development! As excitement continues to build for Into the Box 2024, we're thrilled to bring you the latest updates on what promises to be a transformative event. Continuing our blog post series, let's delve deeper into the third wave of session releases and discover the key surprises awaiting attendees. Learn More

Maria Jose Herrera
Maria Jose Herrera
March 01, 2024
Elevate Your ColdBox Experience and Skills

Elevate Your ColdBox Experience and Skills

We're thrilled to announce a significant overhaul of our ColdBox training experience to ensure it's nothing short of extraordinary! We've listened closely to your feedback and made significant improvements geared towards transforming you into a ColdBox superhero. Learn What's New!

Maria Jose Herrera
Maria Jose Herrera
February 20, 2024
Ortus Redis Extension v3.3.0 Released!

Ortus Redis Extension v3.3.0 Released!

We are very excited to bring you another release for our Redis Lucee Extension. The most significant feature in this release is the addition of the `` and `redisLock{}` tag, which allows you perform a lock across all instances in a cluster.

Ortus Redis Extension v3.3.0 gives you greater control over concurrent modifications in a distributed environment, utilizing your distributed cache to prevent overlaps!

Jon Clausen
Jon Clausen
February 16, 2024