Entwicklung

14. November 202118. October 2022

Using gin with pongo2/v4 or v5 and embedded templates

You’d like to use pongo2/v4 with gin and embed templates with go:embed.

I’m using cobra for my cli parsing and commands.
So

mkdir -p ~/go/src/git.icod.de/dalu/ui
cd ~/go/src/git.icod.de/dalu/ui
cobra init --pkg-name git.icod.de/dalu/ui
cobra add ui

mkdir -p ~/go/src/git.icod.de/dalu/ui

cd ~/go/src/git.icod.de/dalu/ui

cobra init --pkg-name git.icod.de/dalu/ui

cobra add ui

edit cmd/ui.go

package cmd

import (
	"errors"
	"fmt"
	"io/fs"
	"os"
	"strings"

	"<your pkg path>/ui"
	"code.icod.de/dalu/ginpongo2/v5"
	"github.com/flosch/pongo2/v5"
	"github.com/gin-gonic/gin"
	"github.com/spf13/cobra"
)

const (
	prefixTCP  = "tcp:"
	prefixUNIX = "unix:"
)

var (
	uiDebug bool
	uiAddr  string
)

// uiCmd represents the ui command
var uiCmd = &cobra.Command{
	Use:   "ui",
	Short: "serves the management ui over http",
	RunE: func(cmd *cobra.Command, args []string) error {
		if !uiDebug {
			gin.SetMode(gin.ReleaseMode)
		}
		r := gin.Default()
		r.SecureJsonPrefix(")]}',\n")
		r.MaxMultipartMemory = 8 << 20
		if uiDebug {
			fmt.Println("debug mode")
			fl, e := pongo2.NewLocalFileSystemLoader("ui/templates/")
			if e != nil {
				return e
			}
			hr := ginpongo2.New(true, fl)
			r.HTMLRender = hr
		} else {
			fmt.Println("release mode")
			subFS, e := fs.Sub(ui.Templates, "templates")
			if e != nil {
				return e
			}
			fl := pongo2.NewFSLoader(subFS)
			hr := ginpongo2.New(false, fl)
			r.HTMLRender = hr
		}

		// Static
		r.Static("/assets/", "./assets/")

		r.GET("/", func(cx *gin.Context) {
			ctx := make(pongo2.Context)
			type Data struct {
				Target  string
				Message string
			}
			ctx["data"] = &Data{
				Target:  "World",
				Message: "It's a great day to be alive",
			}
			cx.HTML(200, "index", ctx)
		})

		// serve
		if strings.HasPrefix(uiAddr, prefixTCP) {
			addr := strings.TrimPrefix(uiAddr, prefixTCP)
			fmt.Println("listening on", addr)
			return r.Run(addr)
		} else if strings.HasPrefix(uiAddr, prefixUNIX) {
			addr := strings.TrimPrefix(uiAddr, prefixUNIX)
			if _, e := os.Stat(addr); errors.Is(e, os.ErrNotExist) {
				fmt.Println("listening on", addr)
				return r.RunUnix(addr)
			} else {
				if e := os.Remove(addr); e != nil {
					return e
				} else {
					fmt.Println("listening on", addr)
					return r.RunUnix(addr)
				}
			}
		} else {
			return nil
		}
	},
}

func init() {
	rootCmd.AddCommand(uiCmd)
	uiCmd.Flags().BoolVar(&uiDebug, "debug", false, "enable dev mode")
	uiCmd.Flags().StringVar(
		&uiAddr,
		"addr",
		"tcp:localhost:8080",
		"either tcp: or unix: e.g. tcp:localhost:3030 unix:/tmp/listen.sock",
	)
}

100

101

102

103

104

105

106

package cmd

import (

"errors"

"fmt"

"io/fs"

"os"

"strings"

"<your pkg path>/ui"

"code.icod.de/dalu/ginpongo2/v5"

"github.com/flosch/pongo2/v5"

"github.com/gin-gonic/gin"

"github.com/spf13/cobra"

)

const (

prefixTCP = "tcp:"

prefixUNIX = "unix:"

)

var (

uiDebug bool

uiAddr string

)

// uiCmd represents the ui command

var uiCmd = &cobra.Command{

Use: "ui",

Short: "serves the management ui over http",

RunE: func(cmd *cobra.Command, args []string) error {

if !uiDebug {

gin.SetMode(gin.ReleaseMode)

}

r := gin.Default()

r.SecureJsonPrefix(")]}',\n")

r.MaxMultipartMemory = 8 << 20

if uiDebug {

fmt.Println("debug mode")

fl, e := pongo2.NewLocalFileSystemLoader("ui/templates/")

if e != nil {

return e

}

hr := ginpongo2.New(true, fl)

r.HTMLRender = hr

} else {

fmt.Println("release mode")

subFS, e := fs.Sub(ui.Templates, "templates")

if e != nil {

return e

}

fl := pongo2.NewFSLoader(subFS)

hr := ginpongo2.New(false, fl)

r.HTMLRender = hr

}

// Static

r.Static("/assets/", "./assets/")

r.GET("/", func(cx *gin.Context) {

ctx := make(pongo2.Context)

type Data struct {

Target string

Message string

}

ctx["data"] = &Data{

Target: "World",

Message: "It's a great day to be alive",

}

cx.HTML(200, "index", ctx)

})

// serve

if strings.HasPrefix(uiAddr, prefixTCP) {

addr := strings.TrimPrefix(uiAddr, prefixTCP)

fmt.Println("listening on", addr)

return r.Run(addr)

} else if strings.HasPrefix(uiAddr, prefixUNIX) {

addr := strings.TrimPrefix(uiAddr, prefixUNIX)

if _, e := os.Stat(addr); errors.Is(e, os.ErrNotExist) {

fmt.Println("listening on", addr)

return r.RunUnix(addr)

} else {

if e := os.Remove(addr); e != nil {

return e

} else {

fmt.Println("listening on", addr)

return r.RunUnix(addr)

}

} else {

return nil

}

func init() {

rootCmd.AddCommand(uiCmd)

uiCmd.Flags().BoolVar(&uiDebug, "debug", false, "enable dev mode")

uiCmd.Flags().StringVar(

&uiAddr,

"addr",

"tcp:localhost:8080",

"either tcp: or unix: e.g. tcp:localhost:3030 unix:/tmp/listen.sock",

)

}

ui/templates.go

package ui

import "embed"

//go:embed templates/*
var Templates embed.FS

package ui

import "embed"

//go:embed templates/*

var Templates embed.FS

ui/templates/base.html.twig

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {%- block meta %}{% endblock -%}
    <title>{{ title }}</title>
    {%- block js %}{% endblock -%}
    {%- block css %}{% endblock -%}
</head>
<body>
{%- block body %}{% endblock -%}
{%- block jsbottom %}{% endblock -%}
</body>
</html>

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

{%- block meta %}{% endblock -%}

<title>{{ title }}</title>

{%- block js %}{% endblock -%}

{%- block css %}{% endblock -%}

</head>

<body>

{%- block body %}{% endblock -%}

{%- block jsbottom %}{% endblock -%}

</body>

</html>

ui/templates/layout.html.twig

{% extends "base.html.twig" %}
{%- block css %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{% endblock -%}
{%- block js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock -%}
{%- block body %}
<div class="container">
  <div class="row">
    <div class="col-2">
      {%- block left -%}{% endblock -%}
    </div>
    <div class="col-8">
      {%- block middle -%}{% endblock -%}
    </div>
    <div class="col-2">
      {%- block right -%}{% endblock -%}
    </div>
  </div>
</div>
{% endblock -%}

{% extends "base.html.twig" %}

{%- block css %}

{% endblock -%}

{%- block js %}

{% endblock -%}

{%- block body %}

{%- block left -%}{% endblock -%}

</div>

{%- block middle -%}{% endblock -%}

</div>

{%- block right -%}{% endblock -%}

</div>

{% endblock -%}

ui/templates/index.html.twig

{% extends "layout.html.twig" %}
{%- block middle %}
  <div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold">Hello {{data.Target}}</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">{{data.Message}}</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">You got it</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Huh?</button>
      </div>
    </div>
  </div>
{% endblock -%}

{% extends "layout.html.twig" %}

{%- block middle %}

<h1 class="display-5 fw-bold">Hello {{data.Target}}</h1>

<p class="lead mb-4">{{data.Message}}</p>

</div>

{% endblock -%}

and finally run

go mod tidy

1	go mod tidy

to download packages

Any questions -> leave a comment

24. March 202122. March 2022

Go/Golang Run embedded bash script or node/js,python,php,ruby etc

Since Go v1.16 there’s the embed package, a simple tool to embed files as filesystems of simple strings or []bytes.

While it has its downsides, I was recently met with a challenge. I’d like to run bash scripts I wrote because it’s more efficient to just run a bash script than breaking my fingers writing os/exec stuff.

Anyhow it’s pretty simple really. Any shell command has a standard input and output. You just assign the file pointer (aka the Reader) to the os.Command’s Stdin.
Continue reading “Go/Golang Run embedded bash script or node/js,python,php,ruby etc”

5. March 202130. November 2021

Watch out! It’s the Angular Thought Police!

So, yesterday I was visiting Angular’s discord server, because after a little over a month with Vue I was missing Angular’s components and way to express event listeners and 2-way binding of variables as well as the class based approach.
Vue2 is a simple, super productive framework, especially with Quasar, with a rich ecosystem and excellent libraries like vuex-orm, which is really fantastic, mind blowing.
It’s not perfect, nothing in this world is. The same way that Angular isn’t perfect or React or Svelte.
The worst part of Angular is the forced rxjs, if you’re doing anything more complex than a Hello World application anyway.
Continue reading “Watch out! It’s the Angular Thought Police!”

25. February 202130. November 2021

Keycloak-js client with Quasar (now updated for v2)

So you’d like to use openid-connect (oidc), especially keycloak (kc) in your Quasar app.

There’s a package, @dsb-norge/vue-keycloak-js . I’d recommend you fork it and create your own version with the keycloak-js version that matches your Keycloak server. However it also works with just the version used in this git repository.

The git repository is available at
https://github.com/dsb-norge/vue-keycloak-js

This is for Quasar v1

Alright let’s get started.

1. Create a file named silent-check-sso.html with the following content:

<html>
<body>
<script>
  parent.postMessage(location.href, location.origin)
</script>
</body>
</html>

<html>

<body>

parent.postMessage(location.href, location.origin)

</script>

</body>

</html>

Put that file in the public directory as its path is
public/silent-check-sso.html.

2. Create boot/keycloak.js

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import axios from 'axios'

export default async ({ Vue, router, store, app }) => {
  async function tokenInterceptor () {
    axios.interceptors.request.use(config => {
      config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`
      return config
    }, error => {
      return Promise.reject(error)
    })
  }

  return new Promise(resolve => {
    Vue.use(VueKeyCloak, {
      init: {
        onLoad: 'login-required', // or 'check-sso'
        flow: 'standard',
        pkceMethod: 'S256',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
        checkLoginIframe: false // otherwise it would reload the window every so seconds
      },
      config: {
        url: 'https://your.keycloak.installation/auth',
        realm: 'your-realm-name',
        clientId: 'your-client-id'
      },
      onReady: (keycloak) => {
        tokenInterceptor()
        resolve()
      }
    })
  })
}

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'

import axios from 'axios'

export default async ({ Vue, router, store, app }) => {

async function tokenInterceptor () {

axios.interceptors.request.use(config => {

config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`

return config

}, error => {

return Promise.reject(error)

})

}

return new Promise(resolve => {

Vue.use(VueKeyCloak, {

init: {

onLoad: 'login-required', // or 'check-sso'

flow: 'standard',

pkceMethod: 'S256',

silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',

checkLoginIframe: false // otherwise it would reload the window every so seconds

config: {

url: 'https://your.keycloak.installation/auth',

realm: 'your-realm-name',

clientId: 'your-client-id'

onReady: (keycloak) => {

tokenInterceptor()

resolve()

}

})

}

3. Reference the created boot file in quasar.conf.js

// ...
    boot: [
      'i18n',
      'axios',
      'keycloak'
    ],
// ...

// ...

boot: [

'i18n',

'axios',

'keycloak'

// ...

And that’s really all there is to it.

After this is done you can access the keycloak object via $keycloak in your template.

This is for Qusasar v2:

Thanks a bunch to Excel1 and yusufkandemir for figuring it out.

First you have to upgrade or use the v2 branch of @dsb-norge/vue-keycloak-js.
e.g. npm i @dsb-norge/vue-keycloak-js@2
or use your own fork

But essentially you do whatever you would do for v1 only the boot/keycloak.js file is different

The boot/keycloak.js file

import { boot } from 'quasar/wrappers'
import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import axios from 'axios'

export default boot(async ({ app, router, store }) => {
  async function tokenInterceptor () {
    axios.interceptors.request.use(config => {
      config.headers.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}`
      return config
    }, error => {
      return Promise.reject(error)
    })
  }

  return new Promise(resolve => {
    app.use(VueKeyCloak, {
      init: {
        onLoad: 'login-required', // or 'check-sso'
        flow: 'standard',
        pkceMethod: 'S256',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
        checkLoginIframe: false
      },
      config: {
        url: 'https://my.keylcoak.domain/auth',
        realm: 'my.realm',
        clientId: 'my-client_id'
      },
      onReady: (keycloak) => {
        tokenInterceptor()
        resolve()
      }
    })
  })
})

import { boot } from 'quasar/wrappers'

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'

import axios from 'axios'

export default boot(async ({ app, router, store }) => {

async function tokenInterceptor () {

axios.interceptors.request.use(config => {

config.headers.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}`

return config

}, error => {

return Promise.reject(error)

})

}

return new Promise(resolve => {

app.use(VueKeyCloak, {

init: {

onLoad: 'login-required', // or 'check-sso'

flow: 'standard',

pkceMethod: 'S256',

silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',

checkLoginIframe: false

config: {

url: 'https://my.keylcoak.domain/auth',

realm: 'my.realm',

clientId: 'my-client_id'

onReady: (keycloak) => {

tokenInterceptor()

resolve()

}

})

and of course don’t forget to add it to the boot array in quasar.conf.js

10. February 202130. November 2021

vue dev server with nginx

The Nginx conf is the same for any sock-js site. It can be used for Vue and Angular and Svelte, not sure about React but I’d guess it uses sock-js as well.

My dev domain is qxdsladmin.local in this example.

/etc/nginx/conf.d/qxdsladmin.local.conf

server {
    listen 80;
    listen [::]:80;
    server_name qxdsladmin.local;
    root /home/darko/WebProjects/qxdsladmin/public/;
    index index.html;
 
    error_log /var/log/nginx/qxdsladmin.local.error;
 
    location / {
        proxy_pass http://localhost:4201;
        proxy_read_timeout 30;
        proxy_connect_timeout 30;
        proxy_redirect off;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
    }
 
    location /sockjs-node/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        rewrite ^/(.*)$  /$1  break;
        proxy_set_header Host localhost;
        proxy_pass http://localhost:4201/;
    }
 
    location ~ ^/api/v1/.* {
	proxy_pass http://unix:/tmp/qxdsl-proxy.sock;
	proxy_read_timeout 30;
        proxy_connect_timeout 30;
        proxy_redirect off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
    }
}

server {

listen 80;

listen [::]:80;

server_name qxdsladmin.local;

root /home/darko/WebProjects/qxdsladmin/public/;

index index.html;

error_log /var/log/nginx/qxdsladmin.local.error;

location / {

proxy_pass http://localhost:4201;

proxy_read_timeout 30;

proxy_connect_timeout 30;

proxy_redirect off;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

}

location /sockjs-node/ {

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

rewrite ^/(.*)$ /$1 break;

proxy_set_header Host localhost;

proxy_pass http://localhost:4201/;

}

location ~ ^/api/v1/.* {

proxy_pass http://unix:/tmp/qxdsl-proxy.sock;

proxy_read_timeout 30;

proxy_connect_timeout 30;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

}

This location ~ ^/api/v1/.* is a mountpoint for the backend http api, which in my case is a RESTful Go API.

The vue part, create a file named vue.config.js in the project’s root dir.
So if you used vue create vxdsladmin it’s the directory you go to when doing cd vxdsladmin.

module.exports = {
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0',
        port: 4201,
        public: 'qxdsladmin.local'
    }
}

module.exports = {

devServer: {

disableHostCheck: true,

host: '0.0.0.0',

port: 4201,

public: 'qxdsladmin.local'

}

This works for me, but maybe it can be improved. Let me know if that’s the case.