Forem: João Victor

🧠✨ Extending OpenSearch Dashboards: A Complete Plugin Guide

João Victor — Mon, 02 Feb 2026 12:07:20 +0000

Introduction
Prerequisites
Understanding the Architecture
Step-by-Step Plugin Creation
Advanced Features
Testing and Debugging
Deployment
Troubleshooting
Resources

Introduction

What is an OpenSearch Dashboards Plugin?

An OpenSearch Dashboards plugin is a modular extension that adds custom functionality to your OpenSearch Dashboards installation. Plugins can:

Create new visualizations and dashboards
Add custom data sources
Implement specialized search interfaces
Integrate external services
Extend existing functionality

Why Create a Plugin?

Create a plugin when you need to:

Customize the user interface beyond standard configurations
Add business-specific features not available in core OpenSearch
Integrate third-party services or APIs
Create reusable components across multiple dashboards
Implement specialized data processing or analytics

About This Guide

For more insights and to explore my other repositories or access this post in Portuguese, be sure to visit my GitHub profile at my GitHub.

Prerequisites

Before you begin, ensure you have:

Required Software

Software	Minimum Version	Purpose
Node.js	14.x or higher	Runtime environment
Yarn	1.22.x	Package manager
Git	2.x	Version control
Code Editor	Any	VS Code recommended

Note: minimum version requirements may vary depending on the OpenSearch Dashboards version in use. Always check the official documentation for the target release to ensure full compatibility of the development environment. The example above is based on OpenSearch Dashboards version 2.11.

Required Knowledge

JavaScript/TypeScript: Basic to intermediate level
React: Understanding of components and hooks
REST APIs: How to create and consume APIs
Command Line: Basic terminal/command prompt usage

Verify Your Setup

Run these commands to verify your environment:

# Check Node.js version
node --version
# Should output: v14.x.x or higher

# Check Yarn version
yarn --version
# Should output: 1.22.x or higher

# Check Git version
git --version
# Should output: 2.x.x or higher

Understanding the Architecture

Plugin Structure Overview

Before diving into code, let's understand how OpenSearch Dashboards plugins are organized:

my-plugin-name/
│
├── opensearch_dashboards.json    # Plugin metadata and dependencies
├── package.json                   # NPM package configuration
├── tsconfig.json                  # TypeScript configuration
│
├── public/                        # Client-side code (runs in browser)
│   ├── index.ts                   # Public plugin entry point
│   ├── plugin.ts                  # Main plugin class
│   ├── application.tsx            # React app initialization
│   ├── components/                # React components
│   │   └── app.tsx               # Main app component
│   └── types.ts                   # TypeScript type definitions
│
└── server/                        # Server-side code (runs on backend)
    ├── index.ts                   # Server plugin entry point
    ├── plugin.ts                  # Server plugin class
    ├── routes/                    # API route definitions
    └── types.ts                   # Server-side types

Key Concepts

1. Plugin Lifecycle

Plugins follow a specific lifecycle:

Initialization: Plugin is loaded and initialized
Setup: Dependencies are configured, routes registered
Start: Plugin becomes active and functional
Stop: Cleanup when plugin is disabled

2. Client-Server Architecture

Public (Client): Handles UI, user interactions, browser-side logic
Server: Manages API endpoints, data processing, OpenSearch communication

3. Core Services

OpenSearch Dashboards provides core services:

HTTP: Create API routes and make requests
Notifications: Display toast messages and alerts
SavedObjects: Store and retrieve plugin data
Application: Register and navigate between apps

Step-by-Step Plugin Creation

Step 1: Set Up Your Development Environment

1.1 Clone OpenSearch Dashboards Repository

# Clone the repository
git clone https://github.com/opensearch-project/OpenSearch-Dashboards.git

# Navigate into the directory
cd OpenSearch-Dashboards

# Checkout the version you're targeting (e.g., 2.11)
git checkout 2.11

Why? You need the OpenSearch Dashboards source code to develop and test plugins locally.

1.2 Install Dependencies

# Install all dependencies (this may take 10-15 minutes)
yarn osd bootstrap

What does this do?

Installs all required packages
Links dependencies between plugins
Prepares the development environment

⏱️ Grab a coffee! This process takes time but only needs to be done once.

Step 2: Generate Your Plugin

2.1 Use the Plugin Generator

# Run the generator from the OpenSearch Dashboards root directory
node scripts/generate_plugin.js my-custom-plugin

# When prompted, answer:
# - Generate a plugin in ./plugins? Yes
# - Would you like to create the plugin in a different folder? No
# - Should your plugin have server-side code? Yes
# - Should your plugin have a UI component? Yes

What just happened?

A complete plugin scaffold was created in plugins/my-custom-plugin
All necessary files and folders were generated
Basic TypeScript configurations were set up

2.2 Navigate to Your Plugin

cd plugins/my-custom-plugin

Step 3: Configure Plugin Metadata

3.1 Understanding `opensearch_dashboards.json`

Open opensearch_dashboards.json and update it:

{
  "id": "myCustomPlugin",
  "version": "1.0.0",
  "opensearchDashboardsVersion": "2.11.0",
  "server": true,
  "ui": true,
  "requiredPlugins": ["data"],
  "optionalPlugins": ["visualizations"],
  "requiredBundles": []
}

Field Explanations:

id: Unique identifier (camelCase, no spaces)
version: Your plugin version (follows semantic versioning)
opensearchDashboardsVersion: Compatible OSD version
server: Set to true if plugin has backend code
ui: Set to true if plugin has frontend UI
requiredPlugins: Plugins that MUST be installed
optionalPlugins: Plugins that enhance functionality if available

3.2 Configure `package.json`

{
  "name": "my-custom-plugin",
  "version": "1.0.0",
  "description": "A custom plugin for OpenSearch Dashboards",
  "main": "target/my-custom-plugin",
  "opensearchDashboards": {
    "version": "2.11.0",
    "templateVersion": "1.0.0"
  },
  "scripts": {
    "build": "yarn plugin-helpers build",
    "plugin-helpers": "node ../../scripts/plugin_helpers"
  },
  "devDependencies": {
    "@types/react": "^17.0.3"
  }
}

Step 4: Build the Client-Side (Frontend)

4.1 Create the Plugin Class (`public/plugin.ts`)

import { CoreSetup, CoreStart, Plugin } from '../../../src/core/public';

// Define what your plugin provides to other plugins during setup
export interface MyCustomPluginSetup {}

// Define what your plugin provides after it starts
export interface MyCustomPluginStart {}

export class MyCustomPlugin implements Plugin<MyCustomPluginSetup, MyCustomPluginStart> {

  /**
   * Setup is called when the plugin is initialized
   * This is where you register your application
   */
  public setup(core: CoreSetup) {
    // Register the main application
    core.application.register({
      id: 'myCustomPlugin',
      title: 'My Custom Plugin',

      // Where the app appears in the navigation
      category: {
        id: 'customCategory',
        label: 'Custom Tools',
        order: 1000,
      },

      // The function that renders your app
      mount: async (params) => {
        // Lazy load the app component
        const { renderApp } = await import('./application');
        return renderApp(core, params);
      },
    });

    return {};
  }

  /**
   * Start is called when all plugins are set up
   * This is where you can use services from other plugins
   */
  public start(core: CoreStart) {
    return {};
  }

  /**
   * Stop is called when the plugin is being shut down
   * Clean up any resources here
   */
  public stop() {
    // Cleanup code here
  }
}

Key Points:

setup(): Runs once during initialization - register your app here
mount(): Lazy loads your React app for better performance
start(): Runs after all plugins are ready - use plugin dependencies here

4.2 Create the Entry Point (`public/index.ts`)

import { PluginInitializerContext } from '../../../src/core/public';
import { MyCustomPlugin } from './plugin';

/**
 * This is the entry point for your plugin
 * OpenSearch Dashboards calls this function to create your plugin instance
 */
export function plugin(initializerContext: PluginInitializerContext) {
  return new MyCustomPlugin();
}

// Export plugin types for other plugins to use
export { MyCustomPluginSetup, MyCustomPluginStart } from './plugin';

4.3 Create the React Application (`public/application.tsx`)

import React from 'react';
import ReactDOM from 'react-dom';
import { AppMountParameters, CoreStart } from '../../../src/core/public';
import { MyPluginApp } from './components/app';

/**
 * Renders the React application into the DOM
 * @param core - OpenSearch Dashboards core services
 * @param params - Mount parameters including the DOM element
 */
export const renderApp = (
  core: CoreStart,
  params: AppMountParameters
) => {
  // Render the React app
  ReactDOM.render(
    <MyPluginApp coreStart={core} />,
    params.element
  );

  // Return cleanup function
  return () => {
    ReactDOM.unmountComponentAtNode(params.element);
  };
};

4.4 Create the Main Component (`public/components/app.tsx`)

import React, { useState } from 'react';
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiPageContentBody,
  EuiPageHeader,
  EuiTitle,
  EuiText,
  EuiButton,
  EuiSpacer,
} from '@elastic/eui';
import { CoreStart } from '../../../../src/core/public';

interface MyPluginAppProps {
  coreStart: CoreStart;
}

export const MyPluginApp: React.FC<MyPluginAppProps> = ({ coreStart }) => {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(counter + 1);

    // Show a success toast notification
    coreStart.notifications.toasts.addSuccess({
      title: 'Button Clicked!',
      text: `Counter is now ${counter + 1}`,
    });
  };

  return (
    <EuiPage>
      <EuiPageBody>
        <EuiPageHeader>
          <EuiTitle size="l">
            <h1>My Custom Plugin</h1>
          </EuiTitle>
        </EuiPageHeader>

        <EuiPageContent>
          <EuiPageContentBody>
            <EuiText>
              <h2>Welcome to Your Custom Plugin!</h2>
              <p>
                This is a basic plugin template. You can extend it with your own
                functionality.
              </p>
            </EuiText>

            <EuiSpacer size="l" />

            <EuiText>
              <p>Counter: <strong>{counter}</strong></p>
            </EuiText>

            <EuiSpacer size="m" />

            <EuiButton fill onClick={handleClick}>
              Increment Counter
            </EuiButton>
          </EuiPageContentBody>
        </EuiPageContent>
      </EuiPageBody>
    </EuiPage>
  );
};

What's happening here?

Elastic UI (EUI) Components: Using pre-built UI components for consistency
State Management: Using React hooks (useState) for interactivity
Core Services: Accessing notifications through coreStart

Step 5: Build the Server-Side (Backend)

5.1 Create the Server Plugin (`server/plugin.ts`)

import {
  CoreSetup,
  CoreStart,
  Plugin,
  Logger,
  PluginInitializerContext,
} from '../../../src/core/server';

export class MyCustomPluginServer implements Plugin {
  private readonly logger: Logger;

  constructor(initializerContext: PluginInitializerContext) {
    this.logger = initializerContext.logger.get();
  }

  public setup(core: CoreSetup) {
    this.logger.info('MyCustomPlugin: Setting up');

    // Create a router for API endpoints
    const router = core.http.createRouter();

    // Register a GET endpoint
    router.get(
      {
        path: '/api/my-custom-plugin/hello',
        validate: false, // We'll add validation later
      },
      async (context, request, response) => {
        this.logger.info('Hello endpoint called');

        return response.ok({
          body: {
            message: 'Hello from my custom plugin!',
            timestamp: new Date().toISOString(),
          },
        });
      }
    );

    // Register a POST endpoint with data
    router.post(
      {
        path: '/api/my-custom-plugin/data',
        validate: {
          body: schema.object({
            name: schema.string(),
            value: schema.number(),
          }),
        },
      },
      async (context, request, response) => {
        const { name, value } = request.body;

        this.logger.info(`Received data: ${name} = ${value}`);

        return response.ok({
          body: {
            success: true,
            received: { name, value },
          },
        });
      }
    );

    return {};
  }

  public start(core: CoreStart) {
    this.logger.info('MyCustomPlugin: Started');
    return {};
  }

  public stop() {
    this.logger.info('MyCustomPlugin: Stopping');
  }
}

5.2 Add Request Validation (`server/plugin.ts` - enhanced)

import { schema } from '@osd/config-schema';

// Inside your route definition:
router.get(
  {
    path: '/api/my-custom-plugin/search',
    validate: {
      query: schema.object({
        term: schema.string({ minLength: 1, maxLength: 100 }),
        page: schema.number({ defaultValue: 1, min: 1 }),
        size: schema.number({ defaultValue: 10, min: 1, max: 100 }),
      }),
    },
  },
  async (context, request, response) => {
    const { term, page, size } = request.query;

    // Your search logic here

    return response.ok({
      body: { results: [], total: 0 },
    });
  }
);

Why validation matters:

Security: Prevents malicious input
Data Integrity: Ensures correct data types
Clear API Contract: Documents expected parameters

5.3 Create Server Entry Point (`server/index.ts`)

import { PluginInitializerContext } from '../../../src/core/server';
import { MyCustomPluginServer } from './plugin';

export function plugin(initializerContext: PluginInitializerContext) {
  return new MyCustomPluginServer(initializerContext);
}

export { MyCustomPluginServer as Plugin };

Step 6: Connect Frontend to Backend

6.1 Create an API Service (`public/services/api.ts`)

import { HttpSetup } from '../../../../src/core/public';

export class ApiService {
  private http: HttpSetup;

  constructor(http: HttpSetup) {
    this.http = http;
  }

  /**
   * Fetch hello message from the backend
   */
  async getHello(): Promise<{ message: string; timestamp: string }> {
    try {
      const response = await this.http.get('/api/my-custom-plugin/hello');
      return response;
    } catch (error) {
      throw new Error(`Failed to fetch hello: ${error.message}`);
    }
  }

  /**
   * Send data to the backend
   */
  async sendData(name: string, value: number): Promise<any> {
    try {
      const response = await this.http.post('/api/my-custom-plugin/data', {
        body: JSON.stringify({ name, value }),
      });
      return response;
    } catch (error) {
      throw new Error(`Failed to send data: ${error.message}`);
    }
  }
}

6.2 Use the API in Your Component

// In public/components/app.tsx
import React, { useState, useEffect } from 'react';
import { ApiService } from '../services/api';

export const MyPluginApp: React.FC<MyPluginAppProps> = ({ coreStart }) => {
  const [message, setMessage] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const api = new ApiService(coreStart.http);

    const fetchData = async () => {
      try {
        const data = await api.getHello();
        setMessage(data.message);
      } catch (error) {
        coreStart.notifications.toasts.addDanger({
          title: 'Error',
          text: error.message,
        });
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [coreStart]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <EuiPage>
      {/* Your UI here */}
      <EuiText><p>{message}</p></EuiText>
    </EuiPage>
  );
};

Step 7: Build and Test Your Plugin

7.1 Development Mode

# From the OpenSearch Dashboards root directory
yarn start

# This will:
# - Start the development server
# - Watch for file changes
# - Enable hot reloading
# - Run on http://localhost:5601

Access your plugin:

Open browser to http://localhost:5601
Look for "Custom Tools" in the left sidebar
Click "My Custom Plugin"

7.2 Build for Production

# Navigate to your plugin directory
cd plugins/my-custom-plugin

# Build the plugin
yarn build

# This creates a ZIP file in:
# build/my-custom-plugin-1.0.0.zip

Advanced Features

Working with OpenSearch Data

Query OpenSearch from Backend

// In server/plugin.ts
router.get(
  {
    path: '/api/my-custom-plugin/search-data',
    validate: {
      query: schema.object({
        index: schema.string(),
        query: schema.string(),
      }),
    },
  },
  async (context, request, response) => {
    const { index, query } = request.query;

    try {
      // Get OpenSearch client
      const client = context.core.opensearch.client.asCurrentUser;

      // Perform search
      const searchResponse = await client.search({
        index: index,
        body: {
          query: {
            match: {
              _all: query,
            },
          },
        },
      });

      return response.ok({
        body: {
          hits: searchResponse.body.hits.hits,
          total: searchResponse.body.hits.total,
        },
      });
    } catch (error) {
      this.logger.error(`Search failed: ${error}`);
      return response.customError({
        statusCode: 500,
        body: { message: 'Search failed' },
      });
    }
  }
);

Adding Plugin Configuration

Define Configuration Schema (`server/index.ts`)

import { schema, TypeOf } from '@osd/config-schema';

export const configSchema = schema.object({
  enabled: schema.boolean({ defaultValue: true }),
  apiKey: schema.string({ defaultValue: '' }),
  maxResults: schema.number({ defaultValue: 100, min: 1, max: 1000 }),
});

export type MyPluginConfig = TypeOf<typeof configSchema>;

export const config = {
  schema: configSchema,
};

Use Configuration in Plugin

// In server/plugin.ts
export class MyCustomPluginServer implements Plugin {
  private config: MyPluginConfig;

  constructor(initializerContext: PluginInitializerContext) {
    this.logger = initializerContext.logger.get();
    this.config = initializerContext.config.get<MyPluginConfig>();
  }

  public setup(core: CoreSetup) {
    if (!this.config.enabled) {
      this.logger.info('Plugin is disabled');
      return {};
    }

    // Use config values
    const maxResults = this.config.maxResults;
    // ...
  }
}

User Configuration File

Users can configure your plugin in config/opensearch_dashboards.yml:

myCustomPlugin:
  enabled: true
  apiKey: "your-api-key-here"
  maxResults: 50

Creating Custom Visualizations

// In public/plugin.ts
public setup(core: CoreSetup, { visualizations }: SetupDeps) {
  // Register custom visualization
  visualizations.createReactVisualization({
    name: 'my_custom_viz',
    title: 'My Custom Visualization',
    icon: 'visArea',
    description: 'A custom visualization for specialized data',
    visConfig: {
      component: MyCustomVizComponent,
    },
    editorConfig: {
      optionsTemplate: MyCustomVizOptions,
    },
    requestHandler: 'custom',
    responseHandler: 'none',
  });
}

Saved Objects

Define Saved Object Type

// In server/plugin.ts
public setup(core: CoreSetup) {
  core.savedObjects.registerType({
    name: 'my-custom-object',
    hidden: false,
    namespaceType: 'single',
    mappings: {
      properties: {
        title: { type: 'text' },
        description: { type: 'text' },
        config: { type: 'object', enabled: false },
      },
    },
    migrations: {},
  });
}

Use Saved Objects

// Create
const savedObject = await context.core.savedObjects.client.create(
  'my-custom-object',
  {
    title: 'My Object',
    description: 'Description here',
    config: { setting1: 'value1' },
  }
);

// Read
const object = await context.core.savedObjects.client.get(
  'my-custom-object',
  'object-id'
);

// Update
await context.core.savedObjects.client.update(
  'my-custom-object',
  'object-id',
  { title: 'Updated Title' }
);

// Delete
await context.core.savedObjects.client.delete(
  'my-custom-object',
  'object-id'
);

Testing and Debugging

Unit Testing

Install Testing Dependencies

yarn add --dev @testing-library/react @testing-library/jest-dom

Example Component Test

// public/components/__tests__/app.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { MyPluginApp } from '../app';

describe('MyPluginApp', () => {
  const mockCoreStart = {
    notifications: {
      toasts: {
        addSuccess: jest.fn(),
      },
    },
  };

  it('renders the title', () => {
    render(<MyPluginApp coreStart={mockCoreStart as any} />);
    expect(screen.getByText('My Custom Plugin')).toBeInTheDocument();
  });

  it('increments counter on button click', () => {
    render(<MyPluginApp coreStart={mockCoreStart as any} />);
    const button = screen.getByText('Increment Counter');

    fireEvent.click(button);

    expect(screen.getByText('Counter: 1')).toBeInTheDocument();
  });
});

Run Tests

yarn test

Debugging Tips

Enable Debug Logging

// In your plugin
this.logger.debug('Debug message here');
this.logger.info('Info message');
this.logger.warn('Warning message');
this.logger.error('Error message');

Browser DevTools

Open browser DevTools (F12)
Go to Sources tab
Find your plugin files under localhost:5601
Set breakpoints
Interact with your plugin to trigger breakpoints

Server-Side Debugging

Add this to your launch configuration:

{
  "type": "node",
  "request": "launch",
  "name": "Debug OpenSearch Dashboards",
  "program": "${workspaceFolder}/scripts/opensearch_dashboards",
  "args": ["--dev", "--no-base-path"],
  "console": "integratedTerminal"
}

Deployment

Installing Your Plugin

Method 1: Install from ZIP

# Build your plugin first
cd plugins/my-custom-plugin
yarn build

# Install the plugin
bin/opensearch-dashboards-plugin install file:///path/to/my-custom-plugin-1.0.0.zip

# Restart OpenSearch Dashboards

Method 2: Install from URL

bin/opensearch-dashboards-plugin install https://example.com/my-custom-plugin-1.0.0.zip

Method 3: Manual Installation

# Copy plugin to plugins directory
cp -r my-custom-plugin /path/to/opensearch-dashboards/plugins/

# Restart OpenSearch Dashboards

Removing Your Plugin

bin/opensearch-dashboards-plugin remove my-custom-plugin

# Restart OpenSearch Dashboards

Updating Your Plugin

# Remove old version
bin/opensearch-dashboards-plugin remove my-custom-plugin

# Install new version
bin/opensearch-dashboards-plugin install file:///path/to/my-custom-plugin-2.0.0.zip

# Restart OpenSearch Dashboards

Troubleshooting

Common Issues and Solutions

Issue: Plugin Won't Load

Symptoms:

Plugin doesn't appear in sidebar
Error messages in console

Solutions:

# 1. Check plugin ID matches in all files
# 2. Verify opensearch_dashboards.json is valid
# 3. Check server logs:
tail -f /var/log/opensearch-dashboards/opensearch-dashboards.log

# 4. Restart with verbose logging:
bin/opensearch-dashboards --verbose

Issue: Build Fails

Symptoms:

yarn build produces errors

Solutions:

# 1. Clear cache and rebuild
rm -rf build/ target/ node_modules/
yarn install
yarn build

# 2. Check TypeScript errors:
yarn type-check

# 3. Verify all imports are correct

Issue: API Calls Fail

Symptoms:

404 errors on API endpoints
CORS errors

Solutions:

// 1. Verify route registration:
router.get(
  {
    path: '/api/my-custom-plugin/endpoint',  // Must start with /api/
    validate: false,
  },
  handler
);

// 2. Check server logs for errors

// 3. Test endpoint directly:
curl http://localhost:5601/api/my-custom-plugin/endpoint

Issue: Hot Reload Not Working

Solutions:

# 1. Stop the dev server
# 2. Clear build artifacts:
rm -rf optimize/ .cache/

# 3. Restart dev server:
yarn start

Performance Optimization

Lazy Loading

// Instead of:
import { HeavyComponent } from './heavy_component';

// Use:
const HeavyComponent = React.lazy(() => import('./heavy_component'));

// In your render:
<React.Suspense fallback={<div>Loading...</div>}>
  <HeavyComponent />
</React.Suspense>

Minimize Bundle Size

// Avoid importing entire libraries:
// ❌ Bad:
import _ from 'lodash';

// ✅ Good:
import debounce from 'lodash/debounce';

Best Practices Checklist

Development

[ ] Use TypeScript for type safety
[ ] Follow Elastic UI Framework guidelines
[ ] Implement proper error handling
[ ] Add loading states for async operations
[ ] Validate all user inputs
[ ] Use meaningful variable and function names
[ ] Add comments for complex logic

Security

[ ] Validate all API inputs with schemas
[ ] Sanitize user-provided data
[ ] Use proper authentication/authorization
[ ] Don't expose sensitive data in logs
[ ] Implement rate limiting for APIs

Performance

[ ] Lazy load heavy components
[ ] Minimize bundle size
[ ] Debounce frequent operations
[ ] Use pagination for large datasets
[ ] Cache frequently accessed data

Testing

[ ] Write unit tests for components
[ ] Write integration tests for APIs
[ ] Test error scenarios
[ ] Test with different data sets
[ ] Perform cross-browser testing

Documentation

[ ] Document all public APIs
[ ] Provide usage examples
[ ] Document configuration options
[ ] Include troubleshooting guide
[ ] Keep README up to date

Resources

Community

OpenSearch Forum: https://forum.opensearch.org/
Slack Channel: https://opensearch.org/slack
Stack Overflow: Tag opensearch-dashboards

Learning Resources

React Documentation: https://react.dev/
TypeScript Handbook: https://www.typescriptlang.org/docs/
REST API Best Practices: https://restfulapi.net/

Quick Reference

Common Commands

# Generate plugin
node scripts/generate_plugin.js <plugin-name>

# Install dependencies
yarn osd bootstrap

# Start dev server
yarn start

# Build plugin
yarn build

# Run tests
yarn test

# Install plugin
bin/opensearch-dashboards-plugin install <plugin-path>

# Remove plugin
bin/opensearch-dashboards-plugin remove <plugin-name>

# List installed plugins
bin/opensearch-dashboards-plugin list

Useful Code Snippets

Show Toast Notification

coreStart.notifications.toasts.addSuccess('Success message');
coreStart.notifications.toasts.addWarning('Warning message');
coreStart.notifications.toasts.addDanger('Error message');

Navigate to Another App

coreStart.application.navigateToApp('discover', {
  path: '#/view/some-id',
});

Make HTTP Request

const response = await coreStart.http.get('/api/endpoint');
const data = await coreStart.http.post('/api/endpoint', {
  body: JSON.stringify({ key: 'value' }),
});

Excellent post. Clear, thoughtful, and very accurate in capturing how different developer mindsets shape teams and software over time!!!

João Victor — Tue, 16 Dec 2025 20:08:21 +0000

Urvisha Maniar

Dec 15 '25

The 12 Developer Mindsets I’ve Seen in My Career (And What They Teach Us About Building Software)

#programming #developer #productivity #ai

Comments 15

3 min read

📊🔍 OpenSearch Dashboards: Optimizing Massive Data Queries (Big Data) with Asynchronous Search

João Victor — Wed, 05 Nov 2025 00:47:17 +0000

Working with logs, telemetry, or large-scale datasets in OpenSearch can result in slow and heavy queries. This guide covers everything we need to know about optimizing searches using the Asynchronous Search API in OpenSearch Dashboards. For more insights and to explore my other repositories or access this post in Portuguese, be sure to visit my GitHub profile at my GitHub.

🧩 Architecture and Concepts

OpenSearch consists of:

Cluster → group of nodes that store and process data.
Shards → distributed index fragments.
Dashboards → visualization interface and REST Dev Tools.
Plugins → extensions such as Security, Reports, and Asynchronous Search.

The asynchronous search (_plugins/_asynchronous_search) executes queries in the background, allowing progress tracking, cancellation, or retrieval without blocking the client.

Simplified flow:

[Dashboards / API]
   ↓
POST /_plugins/_asynchronous_search
   ↓
→ Cluster processes the query in the background
   ↓
← Returns ID
   ↓
GET /_plugins/_asynchronous_search/{id}
DELETE /_plugins/_asynchronous_search/{id}

⚙️ Full Request Example

POST /_plugins/_asynchronous_search?index=logs*,events*&keep_on_completion=true&wait_for_completion_timeout=2s
{
  "size": 5000,
  "track_total_hits": false,
  "_source": ["timestamp", "source_ip", "event_type"],
  "query": {
    "bool": {
      "filter": [
        {
          "range": {
            "@timestamp": { "gte": "now-30d" }
          }
        }
      ],
      "must": [
        {
          "query_string": {
            "query": "*malware*",
            "fields": ["message", "event_type"],
            "analyze_wildcard": true,
            "allow_leading_wildcard": true
          }
        }
      ]
    }
  }
}

✅ Expected Response (simplified)

{
  "id": "F3B7E5A6-24C3-11EF-AEA3-12AB34CD56EF",
  "is_partial": false,
  "is_running": true,
  "response": {
    "took": 134,
    "timed_out": false,
    "hits": { "total": 2381, "hits": [] }
  }
}

🧠 Synchronous vs Asynchronous Search

Type	Endpoint	Blocks Client	Ideal for
Synchronous	`POST /_search`	✅ Yes	Fast queries (<5s)
Asynchronous	`POST /_plugins/_asynchronous_search`	❌ No	Big Data, reports, multi-index queries

Asynchronous search immediately returns an ID, and processing continues on the server side.

📈 Key Parameters

Parameter	Description	Example	Notes
`index`	Target indices	`logs, events`	Use wildcards cautiously
`keep_on_completion`	Keeps result after completion	`true`	Required for later retrieval
`wait_for_completion_timeout`	Initial wait before returning ID	`2s`	Keeps client responsive
`keep_alive`	Result retention period	`1d`, `7d`	Useful for scheduled reports
`track_total_hits`	Counts all documents	`false`	Disable for Big Data
`_source`	Returned fields	`["timestamp", "message"]`	Avoid wildcard `*`

🔍 Query Structure

Optimized example:

{
  "bool": {
    "filter": [
      { "range": { "@timestamp": { "gte": "now-7d" } } }
    ],
    "must": [
      { "match": { "event_type": "unauthorized_access" } }
    ]
  }
}

Expected Output:

{
  "hits": {
    "total": 542,
    "max_score": 1.0,
    "hits": [
      {
        "_index": "logs-2025.11",
        "_id": "Dfgh12345",
        "_source": {
          "timestamp": "2025-11-03T22:14:25Z",
          "event_type": "unauthorized_access",
          "source_ip": "192.168.3.24"
        }
      }
    ]
  }
}

⚡Performance Tips

Prefer filter for exact and date fields (cacheable).
Avoid leading wildcards (*malware* → slow).
Reduce size (1k–5k) and use scroll or search_after.
Adjust refresh_interval for static indices.
Monitor heap with _nodes/stats/jvm.
Disable track_total_hits for non-analytic searches.

🧮 Monitoring and Management

Check progress

GET /_plugins/_asynchronous_search/F3B7E5A6-24C3-11EF-AEA3-12AB34CD56EF

Expected Output:

{
  "id": "F3B7E5A6-24C3-11EF-AEA3-12AB34CD56EF",
  "is_running": false,
  "is_partial": false,
  "response": {
    "took": 3210,
    "hits": { "total": 2381, "hits": [...] }
  }
}

Global statistics

GET /_plugins/_asynchronous_search/stats

Expected Output:

{
  "total": {
    "submitted": 102,
    "completed": 95,
    "running": 7,
    "failed": 0
  }
}

Cancel or delete old searches

DELETE /_plugins/_asynchronous_search/F3B7E5A6-24C3-11EF-AEA3-12AB34CD56EF

🔒 Security and Access Control

Required permission: cluster:admin/opensearch/asynchronous_search/*
Results stored in internal indices (.opendistro-asynchronous-search*)
Always enable TLS and authentication (BasicAuth, JWT, or SAML).
Use DLS/FLS to restrict sensitive data.
Perform periodic cleanup of old searches.

📚 References

📬🔐Sending Emails in Microsoft 365 using OAuth 2.0 (and SMTP Relay)

João Victor — Tue, 28 Oct 2025 19:21:32 +0000

📌 Change Summary

Since September 25, 2025, Microsoft has permanently disabled Basic Authentication (username/password) in Exchange Online (Microsoft 365).
Only OAuth 2.0 (Modern Authentication) — using temporary access tokens — is now supported for all apps, services, and devices. For more insights and to explore my other repositories or access this post in Portuguese, be sure to visit my GitHub profile at my GitHub.

Common error after the change:

550 5.7.30 Basic authentication is not supported for Client Submission

🔄 What Changed

❌ Basic Authentication (user/password) is no longer supported
❌ App Passwords have been discontinued
✅ OAuth 2.0 (Modern Auth) is now mandatory
- Tokens valid for about 1 hour
- Issued by Microsoft Entra ID (Azure AD)
- Supports MFA and Conditional Access

⚙️ Configuration — Microsoft Graph (OAuth 2.0 + Token)

1️⃣ Prerequisites

Access to Entra ID: https://entra.microsoft.com/
Valid mailbox (e.g., sender@yourdomain.com)
Verified domain in your tenant
Tools: cURL/Postman or Go

2️⃣ Register the App

Go to App registrations → New registration

Name: Email Relay OAuth
Supported account types: Single tenant
Redirect URI: not required
Click Register

Copy:

**Directory (tenant) ID** → `TENANT_ID`
**Application (client) ID** → `CLIENT_ID`

Go to Certificates & secrets → New client secret

Define an expiration and copy the *Value* (will not be shown again)

API permissions → Add a permission → Microsoft Graph → Application permissions

Select Mail.Send → Click Grant admin consent

3️⃣ Generate OAuth 2.0 Token

Client Credentials Flow:

curl -X POST https://login.microsoftonline.com/<TENANT_ID>/oauth2/v2.0/token \
 -H "Content-Type: application/x-www-form-urlencoded" \
 -d "client_id=<CLIENT_ID>" \
 -d "client_secret=<CLIENT_SECRET>" \
 -d "scope=https://graph.microsoft.com/.default" \
 -d "grant_type=client_credentials"

Expected Response:

{
  "token_type": "Bearer",
  "expires_in": 3599,
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGci..."
}

Use access_token in your header: Authorization: Bearer <token>.

#️⃣ Send Email Example (Go)

package main

import (
    "bytes"
    "encoding/json"
    "fmt"
    "io"
    "net/http"
    "net/url"
)

type tokenResp struct{ AccessToken string `json:"access_token"` }

func getToken(tenantID, clientID, clientSecret string) (string, error) {
    endpoint := fmt.Sprintf("https://login.microsoftonline.com/%s/oauth2/v2.0/token", tenantID)
    form := url.Values{
        "client_id":     {clientID},
        "client_secret": {clientSecret},
        "scope":         {"https://graph.microsoft.com/.default"},
        "grant_type":    {"client_credentials"},
    }
    req, _ := http.NewRequest("POST", endpoint, bytes.NewBufferString(form.Encode()))
    req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
    resp, err := http.DefaultClient.Do(req)
    if err != nil { return "", err }
    defer resp.Body.Close()
    b, _ := io.ReadAll(resp.Body)
    if resp.StatusCode != http.StatusOK { return "", fmt.Errorf("token fail: %s - %s", resp.Status, string(b)) }
    var tr tokenResp
    json.Unmarshal(b, &tr)
    return tr.AccessToken, nil
}

func sendMail(sender, token string) error {
    body := map[string]any{
        "message": map[string]any{
            "subject": "Test – Microsoft Graph API",
            "body": map[string]string{"contentType": "Text", "content": "Automatic email sent via OAuth 2.0 (Go)."},
            "toRecipients": []map[string]any{
                {"emailAddress": map[string]string{"address": "recipient@example.com"}},
            },
        },
        "saveToSentItems": false,
    }
    b, _ := json.Marshal(body)
    req, _ := http.NewRequest("POST", fmt.Sprintf("https://graph.microsoft.com/v1.0/users/%s/sendMail", url.PathEscape(sender)), bytes.NewReader(b))
    req.Header.Set("Authorization", "Bearer "+token)
    req.Header.Set("Content-Type", "application/json")
    resp, err := http.DefaultClient.Do(req)
    if err != nil { return err }
    defer resp.Body.Close()
    if resp.StatusCode != http.StatusAccepted { rb, _ := io.ReadAll(resp.Body); return fmt.Errorf("sendMail fail: %s - %s", resp.Status, string(rb)) }
    return nil
}

✅ Successful response: HTTP 202 Accepted

📨 SMTP Relay (Exchange Online)

1️⃣ Prerequisites

Fixed public IP (e.g., 191.209.58.228)
Verified domain in Microsoft 365
TCP Port 25 open (outbound/inbound)
PTR/rDNS configured to point to your domain hostname

2️⃣ Create Connector

Access: https://admin.cloud.microsoft/exchange?#/connectors

From: Your organization’s email server
To: Microsoft 365
Name: SMTP Relay – On‑prem
Identify by IP → add your public IP

⚠️ Mail must originate from the authorized IP; otherwise, relay will fail.

3️⃣ Configure SPF Record

Add/edit TXT (only one SPF per domain):

v=spf1 ip4:191.209.58.228 include:spf.protection.outlook.com -all

Merge if needed; multiple SPF records will cause failure.

4️⃣ Find Smart Host (MX)

nslookup -type=mx yourdomain.com

Use the result as the smart host (port 25), e.g.:

yourdomain-com.mail.protection.outlook.com

#️⃣ Send Email Example (Go)

package main

import (
    "fmt"
    "log"
    "net/smtp"
    "os"
)

// Relay configuration
const (
    smtpHost = "yourdomain-com.mail.protection.outlook.com" // Smart host for your domain (MX)
    smtpPort = "25"                                         // Default relay port
)

func main() {
    // Sender address (must belong to the verified domain/tenant)
    from := "sender@yourdomain.com"
    to := []string{"recipient@example.com"}

    // Message body
    msg := []byte("To: recipient@example.com\r\n" +
        "Subject: SMTP Relay Test (Go)\r\n" +
        "Content-Type: text/plain; charset=UTF-8\r\n\r\n" +
        "Hello!\nThis is a test message sent through SMTP Relay (IP-authenticated) in Microsoft 365.\n" +
        "Sent using Go and net/smtp.\r\n")

    // Server address
    addr := fmt.Sprintf("%s:%s", smtpHost, smtpPort)

    log.Printf("🔄 Connecting to %s to send email...", addr)

    // Send message without authentication (relay authorized by IP)
    err := smtp.SendMail(addr, nil, from, to, msg)
    if err != nil {
        log.Fatalf("❌ Failed to send email: %v", err)
    }

    fmt.Println("✅ Email successfully sent via SMTP Relay.")
}

📄🤖 Tesseract - submission for Google AI Studio

João Victor — Tue, 12 Aug 2025 03:13:02 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

The project was driven by two main goals:

Expanding the pool of possible extraction items, leveraging the platform’s flexibility to process and generate more diverse results.
Rebranding the project, aligning its visual identity and communication style with the new product vision.

To achieve this, I explored custom prompts and integrations that refined the extraction logic while keeping it adaptable for different scenarios and formats.

Demo

My Experience

My experience with Google AI Studio was overall very positive. I see it as a platform with huge potential to revolutionize many aspects of development, especially in terms of speeding up prototyping and enriching applications with intelligent features.

That said, I believe there’s still room for improvement, particularly in handling more technical and constrained scenarios. At times, the platform can “get lost” when a key parameter is missing, follow a very different path than intended, or even ignore explicit instructions.

For example, I once requested a color palette generation, providing the exact primary color as a parameter. Yet, in the light theme, it still set the primary color to blue — something completely outside of what was specified.

Despite these points, I still believe in the platform’s potential and I’m excited to see how it evolves, especially if it strengthens consistency and adherence to instructions in more complex technical contexts.

⚙️🚀Complete CI/CD Guide with YAML Pipelines (Azure DevOps, Jenkins, GitHub Actions)

João Victor — Thu, 31 Jul 2025 21:51:17 +0000

This guide will set you on the path to mastering Continuous Integration and Continuous Delivery/Deployment (CI/CD), covering key concepts, best practices, and real-world examples using popular tools such as Azure DevOps, Jenkins, and GitHub Actions. For more insights and to explore my other repositories or access this post in Portuguese, be sure to visit my GitHub profile at my GitHub.

What is CI/CD?

CI/CD (Continuous Integration / Continuous Delivery or Deployment) is a set of practices that automates software delivery, ensuring every code change is built, tested, and delivered quickly and reliably.

Analogy: Think of a car factory **production line or an automated pizzeria:

CI: Assembly + quality inspection (build and tests).
CD: Delivering the product to the customer (deployment to staging or production).

Common Structure of a YAML Pipeline File

A pipeline.yml file describes, as code, the steps to build, test, and deploy your application. Key components shared by Azure DevOps, Jenkins (Declarative Pipeline), and GitHub Actions:

1. Trigger / Events

Define when the pipeline runs.

Azure DevOps

trigger:
- main

GitHub Actions

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - develop

Jenkins usually relies on webhooks in the SCM or cron jobs in the Jenkinsfile.

2. Agents / Runners / Nodes

Specify where the jobs run (VM, container, physical agent).

Azure DevOps

pool:
  vmImage: 'ubuntu-latest'

GitHub Actions

runs-on: ubuntu-latest

Jenkins

agent any

3. Stages / Jobs / Workflows

Split the pipeline into logical phases.

Azure DevOps: stages → jobs → steps
GitHub Actions jobs → steps
Jenkins: stages → steps

Azure example

stages:
- stage: Build
  jobs:
  - job: Compile
    steps:
      - script: npm install && npm run build

Jenkins example

pipeline {
  stages {
    stage('Build') {
      steps {
        sh 'npm install && npm run build'
      }
    }
  }
}

GitHub Actions example

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && npm run build

4. Steps / Tasks / Actions

Actual commands or tasks.

Scripts (script, run) or predefined tasks (build, deploy, lint).
Azure DevOps: tasks like UseNode@1, PublishPipelineArtifact@1.
GitHub Actions: reusable actions (actions/checkout@v3, actions/setup-node@v3).
Jenkins: steps with sh, bat, or plugins (Maven, Docker, etc.).

GitHub Actions example

steps:
  - uses: actions/checkout@v3
  - uses: actions/setup-node@v3
    with:
      node-version: '18'
  - run: npm install && npm test

5. Environment Variables / Secrets

Configure env vars and credentials.

Azure DevOps: inline under variables: or via Variable Groups / Key Vault.
GitHub Actions: env: or repository secrets (secrets.MY_TOKEN).
Jenkins: environment {} or Jenkins Credentials.

Azure example:

variables:
  NODE_ENV: production

6. Artifacts & Caching

Store build outputs or dependencies between stages.

Azure DevOps: PublishPipelineArtifact@1, Cache@2.
GitHub Actions: actions/cache@v3.
Jenkins: stash/unstash or cache plugins.

7. Deployments & Approvals

Handle continuous delivery with optional approvals.

Azure DevOps: deployment jobs with environment: and approvals.
GitHub Actions: environments: with protection rules and reviewers.
Jenkins: manual stages or integration with release tools.

Azure example:

- stage: Deploy
  dependsOn: Build
  jobs:
  - deployment: DeployToProd
    environment: Production
    strategy:
      runOnce:
        deploy:
          steps:
            - script: ./deploy.sh

General YAML Pipeline Best Practices

Version the pipeline file in your repo.
Fail fast (run tests early).
Keep pipelines short (ideally < 10–15 minutes).
Use dependency caching.
Protect secrets and credentials.
Add gates/approvals for production.
Reuse templates to avoid duplication.
Monitor failures and execution times.

Simple Example (Node.js)

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseNode@1
  inputs:
    version: '18.x'
  displayName: 'Install Node.js'

- script: npm install
  displayName: 'Install dependencies'

- script: npm run build
  displayName: 'Build application'

- script: npm test
  displayName: 'Run tests'

- task: PublishPipelineArtifact@1
  inputs:
    artifactName: 'node-app'
    targetPath: '$(Build.ArtifactStagingDirectory)'
  displayName: 'Publish artifact'

Simple Example (Python)

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UsePythonVersion@0
  inputs:
    versionSpec: '3.10'
  displayName: 'Use Python 3.10'

- script: |
    python -m pip install --upgrade pip
    pip install -r requirements.txt
  displayName: 'Install dependencies'

- script: pytest
  displayName: 'Run tests'

- task: PublishPipelineArtifact@1
  inputs:
    artifactName: 'python-app'
    targetPath: '$(Build.ArtifactStagingDirectory)'
  displayName: 'Publish artifact'

Multi-Stage Pipeline (Build → Test → Deploy)

stages:
- stage: Build
  jobs:
  - job: BuildAndTest
    pool: ubuntu-latest
    steps:
    - script: npm install && npm run build && npm test
    - task: PublishPipelineArtifact@1
      inputs:
        artifactName: 'app-build'
        targetPath: '$(Build.ArtifactStagingDirectory)'

- stage: Staging
  dependsOn: Build
  jobs:
  - deployment: DeployToStaging
    environment: Staging
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
          - script: echo "Deploying to Staging..."

- stage: Production
  dependsOn: Staging
  jobs:
  - deployment: DeployToProd
    environment: Production
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
          - script: echo "Deploying to Production..."

(Configure manual or automatic approvals on the environments before deploying to Production.)

Conclusion

CI/CD underpins fast, reliable software delivery. Using YAML pipelines in Azure DevOps (or Jenkins / GitHub Actions) automates the entire development lifecycle, reduces manual errors, and speeds up value delivery.

“A well-tuned pipeline is like a refined production line: fast, safe, and always ready to deliver value to the user.”

Note: This documentation brings together my personal notes and study materials used in my daily work, organized into a single document to share concepts and make them easier to understand for anyone interested.

I hope you find it helpful and valuable for your learning or projects!

🔍📊 Sonar Exporter: Solving SonarQube's Report Export Problem with Next.js

João Victor — Wed, 09 Jul 2025 12:09:55 +0000

The Problem Every Developer Faces with SonarQube

If you've worked with SonarQube, you know the frustration: it's an excellent tool for code quality analysis, but when it comes to exporting issue reports? Not so much.

You're stuck with manual processes, limited export options, and security concerns when using third-party tools. As a technical leader, I've seen teams spend hours manually generating reports that should take minutes.

Enter Sonar Exporter 🚀

I built Sonar Exporter to solve this exact problem. It's a Next.js application that leverages SonarQube's official APIs to provide seamless, secure report exports.

Why Another SonarQube Tool?

Security First: Zero data storage - everything runs client-side
Direct Integration: Uses official SonarQube APIs
Developer-Friendly: Clean, intuitive interface
Multi-Project Support: Handle multiple SonarQube instances
Open Source: Full transparency and community-driven

Technical Architecture

// Core structure
sonar-exporter/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── api/             # Next.js API routes
│   │   │   ├── sonar-issues/     # SonarQube issues endpoints
│   │   │   └── sonar-projects/   # SonarQube projects endpoints
│   │   └── components/      # Page-specific components
│   ├── context/             # React contexts for global state
│   ├── services/            # API services and external integrations
│   └── types/               # TypeScript type definitions

The architecture prioritizes security and performance:

Security by Design

// No server-side storage - everything happens client-side
const fetchSonarData = async (token: string, project: string) => {
  // Direct API call to SonarQube instance
  const response = await fetch(`${sonarUrl}/api/issues/search`, {
    headers: {
      'Authorization': `Bearer ${token}` // Token never stored
    }
  });

  return response.json();
};

Key Features in Action

1. Seamless API Integration

// TypeScript interfaces for type safety
interface SonarIssue {
  key: string;
  rule: string;
  severity: 'BLOCKER' | 'CRITICAL' | 'MAJOR' | 'MINOR' | 'INFO';
  component: string;
  line?: number;
  message: string;
  // ... more fields
}

2. React Context for State Management

const SonarContext = createContext<{
  projects: SonarProject[];
  issues: SonarIssue[];
  loading: boolean;
  exportReport: (format: 'csv' | 'json') => void;
}>({} as any);

3. Client-Side Export Processing

const exportToCSV = (issues: SonarIssue[]) => {
  const csv = issues.map(issue => ({
    Key: issue.key,
    Rule: issue.rule,
    Severity: issue.severity,
    Component: issue.component,
    Line: issue.line || 'N/A',
    Message: issue.message
  }));

  // Generate and download CSV
  const blob = new Blob([Papa.unparse(csv)], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  // ... download logic
};

Getting Started

Setting up Sonar Exporter is straightforward:

# Clone and install
git clone https://github.com/your-org/sonar-exporter.git
cd sonar-exporter
npm install

# Start development server
npm run dev

Navigate to http://localhost:3000, configure your SonarQube connection, and start exporting!

Why This Approach Works

1. Privacy-First Architecture

No server-side data storage
All processing happens in the browser
Direct API communication

2. Developer Experience

TypeScript for type safety
Modern React patterns
Responsive, intuitive UI

3. Enterprise-Ready

Built with Next.js for scalability
Proper error handling
Comprehensive logging

Real-World Impact

Since implementing Sonar Exporter in our workflow:

90% reduction in report generation time
Zero security incidents related to data exposure
Increased adoption of code quality metrics across teams
Standardized reporting across multiple projects

What's Next?

Our roadmap includes:

Advanced filtering capabilities
Report scheduling functionality

Community and Contributions

Sonar Exporter is open source under Apache 2.0 license. We welcome contributions from the community:

🐛 Bug reports and feature requests
📖 Documentation improvements
🌐 Translations (starting with complete English support)

Try It Yourself

Ready to streamline your SonarQube reporting? Check out the GitHub repository and give it a try!

# Quick start
npx create-next-app@latest sonar-exporter-demo
cd sonar-exporter-demo
# Follow the setup instructions

Final Thoughts

Building developer tools is about solving real problems with elegant solutions. Sonar Exporter demonstrates that with the right architecture and focus on security, we can create tools that enhance productivity without compromising safety.

The combination of Next.js, TypeScript, and a privacy-first approach creates a robust foundation for enterprise-grade developer tools.

What SonarQube pain points are you facing in your projects? Let's discuss in the comments!

Follow me for more insights on building developer tools and technical leadership.

🚀📈 Streamline Your Frontend Development with node-morph-api

João Victor — Tue, 04 Mar 2025 15:18:20 +0000

Frontend developers often struggle with setting up a full backend just to test UI interactions. If you're looking for a lightweight, dynamic backend solution that lets you focus on frontend development without wasting time on database and API setups, then node-morph-api is for you! 🚀

🔥 Why Use `node-morph-api`?

When building real-world frontend applications, you usually need to connect to a database, fetch, manipulate, and test data. However, setting up a backend from scratch—including database configurations, API endpoints, and security measures—takes significant time and effort.

node-morph-api solves this problem by providing:

✅ Quick Database Connection – No need to define schemas manually. Just plug in your database credentials and start consuming data.
✅ Dynamic API Endpoints – Access and manipulate database tables with RESTful calls.
✅ Perfect for UI Testing – Skip backend development and focus purely on frontend workflows.
✅ CRUD Operations Ready – GET, POST, PUT, and DELETE are fully supported.
✅ Secure & Efficient – Built-in protections against SQL injection and other vulnerabilities.

🏗️ Setting Up Your Database

If you don’t have a database ready, you can quickly create one using the postgres-uuid-v7 Docker setup from this repo. It provides a ready-to-use PostgreSQL database container.

1️⃣ Run a PostgreSQL Database using the provided Docker setup.

2️⃣ Deploy node-morph-api and configure the database connection.

3️⃣ Start consuming your database via simple REST API calls.

🌎 Get Started Now

🚀 node-morph-api is available on GitHub.

🚀👨‍💻 Let me help you level up from junior!

João Victor — Mon, 24 Feb 2025 20:14:56 +0000

Hey dev! 👨‍💻👩‍💻

If you want to grow in your career and move beyond junior, mid-level, and keep climbing all the way to tech leadership (TL), I’ve created something that can help: Learning Flow!

💡 Learning Flow is a collection of topics from various notes and resources I’ve studied throughout my career. These are key concepts, techniques, and best practices that truly helped me level up as a developer.

I usually share synthesized content from my notes here (In Dev.to), but this time, I decided to put together all the topics at once—since I was already planning to share them with my team and fellow dev friends.

And don’t worry—the site is just a basic React Flow for now, meant to simply share the topics. But I’ll be improving it over time and adding new points as I continue learning and revisiting concepts!

🎯 The goal? To give you a structured way to improve your skills, gain confidence, and accelerate your career growth!

If you’re feeling stuck and want to start growing for real, stay tuned—I’ll be sharing the knowledge that made a difference in my journey!

🔗 Access Learning Flow here

Let’s grow together! 🚀🔥

🚀🛠Boost Your Regex Game with Regex Vault: A Library for Developers

João Victor — Wed, 29 Jan 2025 15:47:38 +0000

Tired of constantly searching for the perfect regex pattern? Meet Regex Vault, an open-source library designed to centralize, standardize, and simplify the use of regular expressions in JavaScript and TypeScript projects. No more reinventing the wheel—just plug and play!

🔥 Why Regex Vault?

Regex can be tricky, and writing them from scratch every time is inefficient. Regex Vault solves this by providing:

✅ Pre-built regex patterns for validation, security, and data handling.
✅ Security-focused patterns to filter malicious inputs and protect applications.
✅ Time-saving utilities that prevent regex duplication across projects.
✅ Simple integration with both JavaScript and TypeScript.

📦 Installation

Get started with a simple npm install:

npm install regex-vault

💻 Quick Usage

Import and use regex patterns directly:

import { emailRegex, ipv4Regex } from 'regex-vault';

// Validate an email
const email = "example@domain.com";
if (!emailRegex.test(email)) {
  console.log("Invalid email");
}

// Validate an IPv4 address
const ip = "192.168.1.1";
if (ipv4Regex.test(ip)) {
  console.log("Valid IPv4 address");
}

🛠️ Featured Regex Patterns

🔤 Input Validation: Validate alphanumeric, ASCII, and special characters.
💳 Credit Cards: Support for Visa, MasterCard, and Amex formats.
📅 Date Formats: Match Brazilian, American, and general date patterns.
📬 Postal Codes: Validate ZIP codes from multiple countries.
🔗 URLs: Validate general and secure HTTPS URLs.
🛡 Security: Filter potential XSS attacks and dangerous commands.
🏷️ And more

✅ Tested & Secure

Regex Vault is quality-assured with unit tests and security checks. Run tests using:

npm test

🤝 Contribute to Regex Vault

Got a regex pattern to share? Contributions are welcome!

Fork the repo.
Create a feature branch (git checkout -b feature/new-regex).
Commit and push (git push origin feature/new-regex).
Open a pull request.

🌎 Get Started Now!

🚀 Regex Vault is available on GitHub and npm. Give it a ⭐ and start optimizing your regex workflow today!

💬 What regex patterns would you like to see added next? Drop a comment below! 👇

🚨 The Dangers of Developers Relying Exclusively on AI Without Understanding Fundamental Concepts

João Victor — Wed, 15 Jan 2025 12:22:10 +0000

Artificial intelligence (AI) has transformed our lives in extraordinary ways. Think about healthcare, agriculture, education, entertainment, and, of course, software development. AI is present in all these sectors, streamlining tasks, optimizing processes, and opening doors to innovations that seemed impossible just a short time ago.

However, like any powerful tool, AI comes with risks. And I’m not here to discourage you from using it—quite the opposite! My aim is to raise awareness: using AI without understanding fundamental concepts can be a dangerous trap. 🛑

🧠 The Source of Data: The Heart (or Achilles' Heel) of AI

The great secret behind the success or failure of AI lies in the data used to train it. Data is the foundation of all its knowledge. But what if that data is inaccurate, biased, or even prejudiced? The result will reflect those flaws.

Imagine receiving medical advice based on incorrect or outdated information. That risk, though extreme, is a real possibility when blindly trusting AI-generated responses.

🤔 Interpretation: The Crux of the Matter

Have you ever thought about how crucial interpretation is in our daily interactions? How many times have you been misunderstood by family or friends? Now, imagine trying to explain a complex idea to AI—with all the nuances of context, tone, and intention.

The way you phrase your request can make all the difference in what the AI delivers. A poorly chosen word or an unclear context can result in irrelevant or, worse, completely wrong responses.

If interpretation is already a challenge among humans, imagine dealing with a machine that depends on specific parameters and patterns to understand your needs.

🚀 How Does This Impact a Developer’s Growth and Learning?

Learning to develop goes far beyond writing code, structuring decisions, using loops, or mastering object-oriented programming. It also involves practices like testing and, most importantly, security.

Does AI help with code generation? Absolutely! But beware: the code it generates often contains security flaws. When I say this, I’m referring to various vulnerabilities, especially those cataloged by organizations like OWASP and MITRE.

Can a better prompt reduce errors? Possibly, but it’s not a definitive solution.

Remember: where does AI learn to write code? From forums, portals, and online databases. However, as with any other topic on the internet, these sources are filled with false positives, outdated information, and practices that have become insecure as security standards evolve.

This is where your expertise comes in: knowing how to analyze, evaluate, and adjust AI-generated code to ensure your work is secure and reliable.

So, don’t just ask AI to generate something for you. Understand the technical reasoning behind what you’re requesting. Use AI as a tool to assist your daily work, but never as your sole source of knowledge. Continuously seek to learn from reliable sources like courses, books, and specialized communities.

Remember: all knowledge is valid and important, whether related to your field or not.

💡 A Practical Example

Take this text as an example. In its initial draft, it was 121 lines long. With AI assistance and a focus on making it more dynamic, I adjusted and significantly reduced the line count without losing the essential information I wanted to convey.

✅ Conclusion

Using AI is like driving a high-performance car: it can take you to incredible places, but it requires skill, care, and attention at the wheel. AI is not a substitute for knowledge but a tool to enhance it.

So, keep exploring, experimenting, and learning. But above all, maintain a critical eye and remember: nothing replaces a solid understanding of the fundamentals. 💪

If you'd like to read more texts, not just like this but on other topics, check out my profile or visit my GitHub. There, you’ll find content in pt_BR and on dev.to in English. 🌍

Final Observation: To complement the content discussed, I recommend checking out this post, which explores useful tags to enhance the quality of responses.

🚀🎉 Welcome to the Basic Guide: Converting HTML Files in PHP to React

João Victor — Mon, 13 Jan 2025 22:01:38 +0000

This guide provides a structured set of steps and best practices to transform HTML-PHP files into modern React components, promoting organization, reusability, and efficiency in interface development. For more insights and to explore my other repositories or access this post in Portuguese, be sure to visit my GitHub profile at my GitHub.

Basic Guide: Converting HTML Files in PHP to React

Steps for Conversion

Identify the Functionality or Complete Screen 🔍
- Analyze the existing HTML-PHP file to understand its structure, elements, styles, logic, and interactions.
- Identify dependencies and the context in which the code will be used.
Convert the File to JSX 🔄
- Transform the embedded HTML in PHP into JSX, the syntax used by React.
- Create a new React component to represent the identified functionality.
Utilize Componentization 🧩
- Separate different elements and sections of the screen into isolated React components.
- Ensure components are reusable and follow good organizational practices.
Refactor the Code 🛠️
- Improve the organization, reusability, and clarity of the code during the conversion.
- Apply React component design principles and best practices, such as props and lifting state.
Migrate Component by Component ⚙️
- Replace parts of the HTML-PHP code with the corresponding JSX React code.
- Test each component individually to ensure it functions correctly.
Complete the Migration of Each Screen or Functionality ✅
- Continue converting components until the desired screen or functionality is complete.
- Test continuously to ensure each part of the interface behaves as expected.
Conduct Complete Testing 🧪
- After completing the migration of a screen or functionality, validate the integration of all components.
- Ensure smooth and problem-free interaction between components.
Repeat for Other Functionalities 🔁
- Apply the same process to other screens or functionalities until the necessary conversion is complete.

Important Notes

Multilingual Translations 🌐:
- Ensure all elements migrate correctly to the three supported system languages: Portuguese, Spanish, and English.
Auxiliary Libraries 📚:
- Explore available libraries, such as Ant Design (antd), to facilitate migration and enhance component creation. These tools offer resources like pre-built components, simplified state management, and reusable styles.
Smart Componentization 🧠:
- Prefer using pre-built components whenever possible, creating new ones only when specific requirements demand it.
Support and Questions 🙋‍♂️:
- If you encounter difficulties, don’t hesitate to seek help from the Technical Leads (TLs).

Benefits of the Approach

Better code organization and maintenance.
Greater reuse and standardization of components.
More modern and responsive interfaces.
Reduction of redundancies and performance optimization.

With these guidelines, converting HTML in PHP to React will be more efficient and ensure greater success. Follow the steps, apply best practices, and use modern tools to achieve the best possible outcome. 🚀

Forem: João Victor

🧠✨ Extending OpenSearch Dashboards: A Complete Plugin Guide

Table of Contents

Introduction

What is an OpenSearch Dashboards Plugin?

Why Create a Plugin?

About This Guide

Prerequisites

Required Software

Required Knowledge

Verify Your Setup

Understanding the Architecture

Plugin Structure Overview

Key Concepts

1. Plugin Lifecycle

2. Client-Server Architecture

3. Core Services

Step-by-Step Plugin Creation

Step 1: Set Up Your Development Environment

1.1 Clone OpenSearch Dashboards Repository

1.2 Install Dependencies

Step 2: Generate Your Plugin

2.1 Use the Plugin Generator

2.2 Navigate to Your Plugin

Step 3: Configure Plugin Metadata

3.1 Understanding opensearch_dashboards.json

3.2 Configure package.json

Step 4: Build the Client-Side (Frontend)

4.1 Create the Plugin Class (public/plugin.ts)

4.2 Create the Entry Point (public/index.ts)

4.3 Create the React Application (public/application.tsx)

4.4 Create the Main Component (public/components/app.tsx)

Step 5: Build the Server-Side (Backend)

5.1 Create the Server Plugin (server/plugin.ts)

5.2 Add Request Validation (server/plugin.ts - enhanced)

5.3 Create Server Entry Point (server/index.ts)

Step 6: Connect Frontend to Backend

6.1 Create an API Service (public/services/api.ts)

6.2 Use the API in Your Component

Step 7: Build and Test Your Plugin

7.1 Development Mode

7.2 Build for Production

Advanced Features

Working with OpenSearch Data

Query OpenSearch from Backend

Adding Plugin Configuration

Define Configuration Schema (server/index.ts)

Use Configuration in Plugin

User Configuration File

Creating Custom Visualizations

Saved Objects

Define Saved Object Type

Use Saved Objects

Testing and Debugging

Unit Testing

Install Testing Dependencies

Example Component Test

Run Tests

Debugging Tips

Enable Debug Logging

Browser DevTools

Server-Side Debugging

Deployment

Installing Your Plugin

Method 1: Install from ZIP

Method 2: Install from URL

Method 3: Manual Installation

Removing Your Plugin

Updating Your Plugin

Troubleshooting

Common Issues and Solutions

Issue: Plugin Won't Load

Issue: Build Fails

Issue: API Calls Fail

Issue: Hot Reload Not Working

Performance Optimization

Lazy Loading

Minimize Bundle Size

Best Practices Checklist

Development

3.1 Understanding `opensearch_dashboards.json`

3.2 Configure `package.json`

4.1 Create the Plugin Class (`public/plugin.ts`)

4.2 Create the Entry Point (`public/index.ts`)

4.3 Create the React Application (`public/application.tsx`)

4.4 Create the Main Component (`public/components/app.tsx`)

5.1 Create the Server Plugin (`server/plugin.ts`)

5.2 Add Request Validation (`server/plugin.ts` - enhanced)

5.3 Create Server Entry Point (`server/index.ts`)

6.1 Create an API Service (`public/services/api.ts`)

Define Configuration Schema (`server/index.ts`)