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 (
  // ...
    "flamingo.me/pugtemplate"
    // ...
)

func main() {
    // ...
    flamingo.App([]dingo.Module{
      // ...
      new(pugtemplate.Module),
      // ...
    })
}

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):

html
  body
    h1.center 503

    if config('debug.mode')
      .errorDebug
        .errorDebugTitle Debug:
        pre.errorDebugContent.center= 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
  • https://www.npmjs.com/

  • PUG for templating

  • https://pugjs.org/api/getting-started.html

  • Sass for CSS

  • http://sass-lang.com/

  • Webpack for JS / CSS Build

  • https://webpack.js.org/