Skip to content

Getting Started with Flamingo Carotene

If you have an new Flamingo project this are the steps to do, to use flamingo-carotene:

Prepare the Frontend

Inside your Flamingo project folder:

mkdir -p frontend/src
cd frontend
npm init

(currently beeing implemented: `npx flamingo-carotene init`)

npm i -D flamingo-carotene-core flamingo-carotene-pug

This initializes your frontend project with the following npm modules:

  • flamingo-carotene-core - includes the basic commands and core logic
  • flamingo-carotene-pug - includes the Build logic to work with pug

You now can add your first page template with pug:

echo "Hello World" >  src/page/index.pug

And with this command you can start building your frontend:

npx flamingo-carotene build

The result is stored in the folder frontend/dist.

Prepare the Flamingo project

If you already have a running Flamingo project, this are the steps you need to adjust in order to use the templates generated by Flamingo Carotene:

Add the pugtemplate module in your projects main go file:

import (
  // ...
    // ...

func main() {
    // ...
      // ...
      // ...

Add the default error templates

Add the templates for the default error pages - inside frontend/src/page/error/

  • 404.pug
  • 403.pug
  • 503.pug
  • withCode.pug

With a content like this (adjust it to your needs):

  body 503

    if config('debug.mode')
        .errorDebugTitle Debug: error

Then don't forget to recompile the templates with: npx flamingo-carotene build

Next Steps

After the first steps you can continue with:

  • Read more about Atomic Design
  • Use the flamingo-carotene-webpack package to use webpack to build JS and CSS
  • Use the flamingo-carotene-dev-server package to benefit from Hot reloading during development
  • Use the flamingo-carotene-behavior package to add dynamic javascript for your design components
  • Use the flamingo-carotene-state-manager package to use the page state pattern to communicate and manage state between design components.

Read more about the tools used in Flamingo Carotene modules:

  • NPM

  • PUG for templating


  • Sass for CSS


  • Webpack for JS / CSS Build