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!”
DSL Vergleich relaunch
Das Vergleichsportal für Internetzugangstarife, DSL Tarife, Kabel Tarife, Glasfaser Tarife ist seit heute in neuer Version verfügbar.
Aktuell sind nur wenige Tarife in der Datenbank, doch das wird sich im Laufe der Zeit ändern.
Besuchen Sie folgenden Link: DSL Vergleich
Keycloak-js client with Quasar
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
Alright let’s get started.
1. Create a file named silent-check-sso.html with the following content:
|
1 2 3 4 5 6 7 |
<html> <body> <script> 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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
|
1 2 3 4 5 6 7 |
// ... 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.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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.
|
1 2 3 4 5 6 7 8 |
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.
nvm upgrade to latest LTS and migrate all installed packages
This command is also in the readme of nvm, however I put it here on my blog so I don’t have to search the readme and previously google for the readme 😉
|
1 |
nvm install 'lts/*' --reinstall-packages-from=current |
For the record, a link to the readme of nvm