DEV Community: Aaron Gong

Redoc With VueJS

Aaron Gong — Fri, 21 Feb 2025 00:23:13 +0000

Here is a very short post on using Redoc in VueJS.

Below is a component you can use in any VueJS project. Remember to install redoc and null dependencies.

<template>
  <h2>Redoc Sample</h2>
  <div id="redoc-container"></div>
</template>

<script setup>
// npm install redoc
// npm install null
import * as redoc from 'redoc/bundles/redoc.standalone' // requires null package
import { onMounted } from 'vue'

onMounted(() => {
  redoc.init('http://petstore.swagger.io/v2/swagger.json', { "expandResponses": "200,400" }, document.getElementById('redoc-container'))
})
</script>

<style scoped>
</style>

That's all.

Caveat

Aaron Gong — Thu, 14 Oct 2021 15:14:29 +0000

There could be a potential web performance issue

If you have 3 of the same custom components in your app, and the custom component has huge JS library.

  st.subheader("Component Test")
  rv = my_component(name="NameViteVanilla", key="K1", config=config, nodes=nodes, edges=edges)
  my_component(name="NameViteVanilla", key="K2", config=config, nodes=nodes, edges=edges)
  my_component(name="NameViteVanilla", key="K3", config=config, nodes=nodes, edges=edges)

You could end up loading the library 3 times (see image below). Ouch!

Seems like the multiple reload of JS code also happens if streamlit-aggrid is used.

Code snippet below displaying 3 grids

grid_data1 = AgGrid(titanic_data, key="ag1", gridOptions=gridOptions)
grid_data2 = AgGrid(titanic_data, key="ag2", gridOptions=gridOptions)
grid_data3 = AgGrid(titanic_data, key="ag3", gridOptions=gridOptions)

Snapshot of browser network calls, showing the aggrid related JS file being called three times...

I could be doing something wrong here though. So this definitely needs some investigation...

Adding @antv/g6 To Streamlit Custom Component

Aaron Gong — Sat, 25 Sep 2021 03:57:02 +0000

Steps To Implement

You need to already create the vite vanilla JS custom component in part 2 or this series
From the template folder
Add the @antv/g9 library

cd vite_vanilla_component/frontend
npm i @antv/g6

insert the code below just after import { Streamlit } from 'streamlit-component-lib' on or near the top of the main.js file

import G6 from '@antv/g6';

const gdata = {
  nodes: [
    { id: 'node1', x: 50, y: 350, label: 'A', },
    { id: 'node2', x: 250, y: 150, label: 'B', },
    { id: 'node3', x: 450, y: 350, label: 'C', },
  ],
  edges: [],
};

for (let i = 0; i < 10; i++) {
  gdata.edges.push({ source: 'node1', target: 'node2', label: `${i}th edge of A-B`, });
}
for (let i = 0; i < 5; i++) {
  gdata.edges.push({ source: 'node2', target: 'node3', label: `${i}th edge of B-C`, });
}

const container = document.body.appendChild(document.createElement("div"))
container.setAttribute('id', 'container');
G6.Util.processParallelEdges(gdata.edges);

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
console.log(width, height)
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
  // the edges are linked to the center of source and target ndoes
  linkCenter: true,
  defaultNode: {
    type: 'circle',
    size: [40],
    color: '#5B8FF9',
    style: { fill: '#9EC9FF', lineWidth: 3, },
    labelCfg: {
      style: { fill: '#000', fontSize: 14, },
    },
  },
  defaultEdge: {
    type: 'quadratic',
    labelCfg: { autoRotate: true, },
  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
  nodeStateStyles: {
    hover: { fillOpacity: 0.8, },
    selected: { lineWidth: 5, },
  },
});
graph.data(gdata);
graph.render();

Running

The steps to run are the same as in previous article (right click and open new tab).

You should see the following when navigating to the component url:

Further Improvements

The following are improvements that can be done once the code is added:

Allow end-user to pass in g6 config, nodes and edges from python code
Add graph event listeners to record last clicked node
Modify the button to send last clicked node information back

Streamlit Custom Components + Vite + VueJS

Aaron Gong — Thu, 23 Sep 2021 08:08:41 +0000

Create Component based on VueJS

From the template folder
Create new component using vite and add init.py code for testing the component

$ mkdir vite_vue_component
$ cd vite_vue_component
$ npm init vite@latest frontend --template vue # npm v6 (v7 is different)
$ touch __init__.py # command may be different in Windows

Add in the init.py code below

import os
import streamlit.components.v1 as components

_RELEASE = False

if not _RELEASE:
  _component_func = components.declare_component(
    "vite_vue_component",
    url="http://localhost:3000", # vite dev server port
  )
else:
  parent_dir = os.path.dirname(os.path.abspath(__file__))
  build_dir = os.path.join(parent_dir, "frontend/dist")
  _component_func = components.declare_component("vite_vue_component", path=build_dir)

def my_component(name, key=None):
  component_value = _component_func(name=name, key=key, default=0)
  return component_value

if not _RELEASE:
  import streamlit as st
  st.subheader("Component Test")
  num_clicks = my_component(name = "NameViteVue")
  st.markdown("You've clicked %s times!" % int(num_clicks))

install the frontend node libraries, streamlit-component-lib, create vite.config.js

$ cd frontend
$ npm i
$ npm i streamlit-component-lib

Add the following property to vite.config.js

  base: './',

replace App.vue file with the following code

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="doClick">click</button>
    <p>Count {{ count }}</p>
  </div>
</template>

<script>
import { Streamlit } from 'streamlit-component-lib'
import { ref, onMounted } from 'vue'

export default {
  setup(props, context) {
    const msg = ref('No Msg')
    const count = ref(0)

    const doClick = () => {
      count.value += 1

      Streamlit.setComponentValue(count.value)
    }

    const onRender = (event) => {
      const data = event.detail
      msg.value = `Hello, ` + data.args['name']
      Streamlit.setFrameHeight()
    }

    onMounted(() => {
      Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
      Streamlit.setComponentReady()
      Streamlit.setFrameHeight()
    })

    return {
      doClick,
      count,
      msg
    }
  }
}

</script>

Running the example

From the base directory, navigate to the frontend and serve it from a dev server:

$ cd template/vite_vue_component/frontend
$ npm run dev

On a separate terminal, from base directory, navigate to and run the Streamlit app (assuming python environment has been activated):

$ cd template
$ streamlit run vite_vue_component/__init__.py  # run the example

You should see the following image below. Button click will increment the count.

Streamlit Custom Components + Vite + Vanilla JS

Aaron Gong — Thu, 23 Sep 2021 08:08:20 +0000

Create Component Based On vanilla JS

From the template folder
Create new component using vite and add init.py code for testing the component

$ mkdir vite_vanilla_component
$ cd vite_vanilla_component
$ npm init vite@latest frontend --template vanilla # npm v6 (v7 is different)
$ touch __init__.py # command may be different in Windows

Add in the init.py code below

import os
import streamlit.components.v1 as components

_RELEASE = False

if not _RELEASE:
  _component_func = components.declare_component(
    "vite_vanilla_component",
    url="http://localhost:3000", # vite dev server port
  )
else:
  parent_dir = os.path.dirname(os.path.abspath(__file__))
  build_dir = os.path.join(parent_dir, "frontend/dist")
  _component_func = components.declare_component("vite_vanilla_component", path=build_dir)

def my_component(name, key=None):
  component_value = _component_func(name=name, key=key, default=0)
  return component_value

if not _RELEASE:
  import streamlit as st
  st.subheader("Component Test")
  num_clicks = my_component(name = "NameViteVanilla")
  st.markdown("You've clicked %s times!" % int(num_clicks))

install the frontend node libraries, streamlit-component-lib, create vite.config.js

$ cd frontend
$ npm i
$ npm i streamlit-component-lib
$ touch vite.config.js

vite.config.js should look like below

export default {
  base: './'
}

replace the content of main.js with the following (based on the reactless-template of the original component-template repo)

import { Streamlit } from "streamlit-component-lib"

const span = document.body.appendChild(document.createElement("span"))
const textNode = span.appendChild(document.createTextNode(""))
const button = span.appendChild(document.createElement("button"))
button.textContent = "Click Me!"

let numClicks = 0
let isFocused = false
button.onclick = function() {
  numClicks += 1
  Streamlit.setComponentValue(numClicks)
}

button.onfocus = function() { isFocused = true }
button.onblur = function() { isFocused = false }

function onRender(event) {
  const data = event.detail
  if (data.theme) {
    const borderStyling = `1px solid var(${
      isFocused ? "--primary-color" : "gray"
    })`
    button.style.border = borderStyling
    button.style.outline = borderStyling
  }
  button.disabled = data.disabled
  let name = data.args["name"]
  textNode.textContent = `Hello, ${name}! ` + String.fromCharCode(160)
  Streamlit.setFrameHeight()
}

Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
Streamlit.setComponentReady()
Streamlit.setFrameHeight()

Running the example

From the base directory, navigate to the frontend and serve it from a dev server:

$ cd template/vite_vanilla_component/frontend
$ npm run dev

On a separate terminal, from base directory, navigate to and run the Streamlit app (assuming python environment has been activated):

$ cd template
$ streamlit run vite_vanilla_component/__init__.py

You should see the image below, and clicking the button should increment the count.

The component looks truncated. To fix this, set body style in the component to have margin: 0;.

Streamlit Custom Components + Vite

Aaron Gong — Thu, 23 Sep 2021 08:08:02 +0000

Why use vite?

With vite you can build you streamlit custom components based on various frameworks supported by vite:

vue
react
vanilla JS
preact
svelte

For all the choices listed above, you are able to also chose to use them with Typescript.

The initial steps is similar to the readme in the component-template repository.

streamlit / component-template

Templates and example code for creating Streamlit Components

Streamlit Component Templates

This repo contains templates and example code for creating Streamlit Components.

For complete information, please see the Streamlit Components documentation!

Overview

A Streamlit Component is made out of a Python API and a frontend (built using any web tech you prefer).

A Component can be used in any Streamlit app, can pass data between Python and frontend code, and and can optionally be distributed on PyPI for the rest of the world to use.

Create a component's API in a single line of Python:

import streamlit.components.v1 as components

# Declare the component:
my_component = components.declare_component("my_component", path="frontend/build")

# Use it:
my_component(greeting="Hello", name="World")

Build the component's frontend out of HTML and JavaScript (or TypeScript, or ClojureScript, or whatever you fancy). React is supported, but not required:

class MyComponent

…

View on GitHub

Clone the component-template repo

$ git clone https://github.com/streamlit/component-template.git
$ cd component-template

Create a new Python virtual environment for the template

# NOTE: the commands may differ (eg. python3 instead of python)
# due to the way your python is installed, or your OS
$ cd template
$ python -m venv my_venv  # create venv
$ . my_venv/bin/activate   # activate venv
$ pip install streamlit # install streamlit

Once you are done, from here on, we start creating our custom components.

FastAPI + SAML on Keycloak

Aaron Gong — Sat, 26 Jun 2021 04:37:01 +0000

TL:DR; a quick article to help FastAPI users get SAML working on their application.

Getting Started

The code and instructions are found at https://github.com/ais-one/fastapi-saml

Less than 100 lines of code
Only 4 dependencies to install
Requirements and setup are all documented

If there is a problem please raise an issue, so that documentation and code can be improved.

Summary

This may look like a very short article but to get this working took quite a lot of time and effort...

searching on Google and Stack-Overflow
choosing which library to use
digging into the library itself to find out what went wrong
many trial and error

Thank you and hope it is helpful to you.

Setup MongoDB On WSL Ubuntu 18.04

Aaron Gong — Mon, 20 Apr 2020 08:20:46 +0000

Introduction

This article will cover the use of MongoDB on WSL (Windows Subsytem For Linux) Ubuntu. Other than installation and we will cover some caveats, use cases such as migration, upgrade process.

ADVISORY: Do not use WSL for production. We are only using it here to learn how to use Ubuntu OS version of MongoDB - on a windows machine.

Installation

The are 2 commonly used packages available for MongoDB on Ubuntu

mongodb
mongodb-org

mongodb-org is the package described in official MongoDB documents.

mongodb

If you use mongodb package, you will be able to install easily and run smoothly.

sudo apt-get update
sudo apt-get install mongodb
sudo service mongodb start

However, the current version installed is 3.6 and you will miss out on using MongoDB Transactions introduced from 4.0 onwards.

mongodb-org

For mongodb-org package, although you can install and manually run the latest stable version.

NOTE: Even though official documentation says MongoDB is not supported on WSL, you can still try and install.

However, the service will not be able to install (I suspect due to WSL Ubuntu only supporting system V init). You will get the following error if you try to run the service.

sudo service mongod start
initctl: Unable to connect to Upstart: Failed to connect to socket /com/ubuntu/upstart: Connection refused
mongod: unrecognized service

Running as a service issue can be fixed by following the steps in this github comment.

You manually create the service using the following script https://raw.githubusercontent.com/mongodb/mongo/master/debian/init.d, and now you can use...

sudo service mongod start

Which One To Use

This will depend on your requirements. If you need to use an updated version, use mongodb-org. If you need something quick and easy to install, use mongodb.

NOTE: the configuration file names are different for each package

mongodb - /etc/mongodb.conf
mongodb-org - /etc/mongod.conf

Data Migration / Backup / Restore

As mentioned in the official MongoDB documents https://docs.mongodb.com/manual/core/backups/

Starting from MongoDB 4.2, mongodump should not be used as part of backup strategy if you are using sharded clusters and transactions in progress. Use the other recommended methods instead.

However, in a development environment, you can use mongodump and mongorestore to backup, restore and migrate data and indexes.

# backup
$ mongodump --archive=my_dump

# do some upgrade

# restore
$ mongorestore --archive=my_dump

Setting Up Replication Set

Replication is used to provide redundancy and high-availibility. They are also required if you are need to use Transactions.

Config File Changes

In /etc/mongod.conf (mongodb-org package), set the replication.replSetName property.

replication:
   oplogSizeMB: <int>
   replSetName: <string>
   enableMajorityReadConcern: <boolean>

Restart the service after changes are made.

Start Replication

Connect to MongoDB using the mongo client and start up or check for replication set using the following commands

# start up replica set
> rs.initiate()

# check replica set status
> rs.status()

Conclusion

There are many more topics to cover for MongoDB, especially for running smoothly in a production environment.

Some topics to cover include:

Security
Sharding
Change streams
Administration
MongoDB internals and storage engines

As an alternative to doing it all by yourself, you can use Mongo Atlas and leave the operational work to others while you focus on your business data and logic.

Caveats When Choosing 3rd Party Libraries For Your Application

Aaron Gong — Sun, 29 Mar 2020 23:35:45 +0000

Introduction

This is the first of a series of articles providing insights on choosing 3rd party libraries.

There are caveats and pitfalls to be aware of which may have a huge impact on your application, such as complete code rewrites, resource usage, etc.

Such caveats might have overlooked, not stated on the documentation, or hidden somewhere in the issues list.

Hence, one has to do their due diligence when choosing 3rd party libraries and study their ABCs (architecture, behavior and codes) before using them.

Some of actions to take before on-boarding a library are:

searching online for more information, reviews, comparison with alternatives
looking into the issues list
going through the code and dependencies (if library is opensource)
testing out with debugging tools, monitor console, network requests, slow network conditions

The Caveat

"Hidden" performance issues. On the surface the library may look to be working well.

However, it may be written in a way that can cause usability problems in poor network environment, as we shall see...

The Example

Here we look at a feature rich phone number input library vue-phone-number-input and its demo site. NOTE: A few other Javascript country flag selection libraries has the same caveat too!

The evaluation on the demo site was performed on 18 March 2019 1130Hrs +8GMT

The initial load looks alright, with only a few requests fired.

The Issue

When you click the country dropdown with flag, you see many HTTP requests (refer to image below). There are about 240 of them, each of them representing a country flag.

This can be a problem on slow or intermittent networks. Also seeing 240 requests being made on a single click just does not look professional.

Some Suggestions

Look for similar libraries that uses Intersection Observer to lazy load the images, or load the images as a single image and then use offsets to get the portion you need. You basically want to reduce the number of requests
Learn more about i18n in-depth. Countries and flags are politically sensitive, some libraries have different list of "recognized countries"
You also need to consider number and date formats, LTR or RTL, character sets, etc. Balancing application size and language support
Try to go Native as much as possible
Consider CSS customization flexibility and frontend UI being used
Worst case, you may need to implement your own better solution... really!

Thank you for taking you time to read this article. Hope it has provided you some useful insights.

VueJS+NodeJS Evergreen Cookbook

Aaron Gong — Wed, 24 Jul 2019 02:48:40 +0000

Introduction

Cookbook Rule #1 - Do Not Build Up Technical Debt

As developers we create different applications. Along the way, we come up with code recipes for ORMs, GraphQL, SSO, charts, OpenAPI, Vue/React SPA, etc.

These recipes solve real world problems and can be reused elsewhere!

The Evergreen Cookbook Project

The project originally began life as a CRUD Component.

As more and more functionality and codes were added, the code "recipes" were consolidated in a "Cookbook" for future use.

If you just want to dive in, visit the project.

ais-one / cookbook

VueJS + NodeJS Evergreen Cookbook

1 - IMPORTANT - Read Me First!

The templates (express and vuejs template) and libraries (shareable libraries and tools) projects referenced in the Recipes are based on the two principles below.

1.1 - Updateable Templates

Your project is created using a template. If template updates, can upstream changes be merged with minimal impact on userland codes?

Yes and it is achieved through:

Design
- Create folder where all userland code is placed, template must NOT touch this folder
- template should not to be part of a monorepo
Process
- clone template and create remote called upstream pointing to template
- update framework when necessary by merging upstream into origin

1.2 - Manageable Sharing

You have code shared between multiple projects and libraries. If the code is updated, is breaking dependents and dependencies avoidable?

Yes, based on the following principles:

Shared libraries should be isolated and versioned. Use last-known-good version and update when ready
…

View on GitHub

Considerations

The recipes must be continuously maintained:

adding new recipes and removing obsolete ones
updating and improving existing recipes (e.g. cleaner code)

We also should bear in mind the following which have impact on cookbook users:

make it easy for users to build and maintain multiple projects based on the cookbook
make it easy for users to update their projects when cookbook recipes are updated
easy to deploy using CI/CD, containers

Recipes

Some available recipes in the cookbook are:

GraphQL & subscriptions
SAML2, OpenID Connect, OAuth social logins, JWT, refresh token, 2FA/TOTP
Multi-part forms, file uploads, signup uploads
REST, OpenAPI documentation and validation
Web components - Webcam, Canvas inputs, CRUD table
MongoDB, replication, transactions, streams
SQL Query Builders, migration, seed
cors, body parser, helmet, connect-api-history-fallback
Automated testing
Visualization (Charts, Maps, etc.)
Logging

Find out how each recipe works by checking out, building, and running the code while referencing the project documents.

Cookbook Web Frontend Type

There are 3 ways to build a web frontend application

Single Page Application (SPA)
Server-Side Rendered (SSR)
Static Sites

The table below shows the comparison between the 3 ways.

After comparing the feature of each way, the decision was to focus on SPA and Static Sites.

Some Historical Notes

A CRUD component was developed in late 2017 due to a desire to create a better table editor using VueJS 2 and Vuetify 1.
A backend project and authentication was added as this was needed. Features and applications start getting added, updated, removed.
Vuetify 2 (3Q 2019) introduced breaking changes. Hence the need to look at more stable or reduced number of dependencies.
Backend structure was re-organized to allow same codebase on multiple projects.
Project was again re-organized when docker and CI/CD had to be taken into account.
With ES Modules introduced, a no bundler version of the frontend was created. The CRUD UI was also migrated to a use Web Components and Bulma CSS.
Docker compose files for applications such as DB, Redis, Kafka, Vault were added to support local development.
Vue3 broke Vue2 plugins, fortunately the project did not use many plugins (it used libraries like leafletJS directly instead). The migration was quite painless.
Escaped much pain when VueJS and its 3rd party libraries update, e.g.:
- vee-validate v1 -> v2 -> v3 -> v4 (keeps breaking)
- vue-apollo (cannot use for Vue3 yet)
- vue-rx (cannot use for Vue3 yet)
- vuetify v1 -> v2 -> v3 (keeps breaking)
Experience with a sister project helped in addressing cookbook user considerations stated above.
Now awaiting npm workspaces in the upcoming NodeJS 16 LTS release... and focus on project stability.

ais-one / favv

Fullstack Web Application Framework With FastAPI + Vite + VueJS. Streamlit for rapid development.

Hope you find the cookbook project, and its recipes helpful.

The cookbook is continuously being updated and improved to remain relevant and useful.

We are looking for contributors and maintainers to continuously make it better.

Thank you for taking your time to read this.