Forem: Rakshit Raj

New Way to Handle 2 Million Search Queries Without a Search Server

Rakshit Raj — Sun, 05 Apr 2026 15:55:14 +0000

Imgine this: You are in the middle of your fourth-round interview. Having a great chat about your recent projects (not most optimized), and then the interviewer throws out the ultimate stress-test question:

"If this project suddenly blew up and you got hit with 2 million search queries, how would you handle the traffic?"

TL;DR: The VS Code team recently open-sourced docfind, a search engine built with Rust and WebAssembly. Instead of sending user searches to a database (which gets crazy expensive at 2 million users), docfind packs the entire search engine and your website's index into a tiny ~2.7MB file. The user downloads it once, and all the searching happens instantly right inside their browser. Zero servers, zero API costs, and lightning-fast results.To see the implementation and how to implement it, Start Building

Introduction: The Interview
- 🤔 Why Not Just Use Algolia or Elasticsearch?
- 🛠️ Let’s Build It: Adding WebAssembly Search to Your Site
- 🪄 How docfind Works (The 30-Second Version)
- ⚖️ The Trade-Offs: Is docfind Right for You?
- 🏆 Credit Where It’s Due & Resources

Introduction: The Interview

Normally, this is where you will recite the common developer script. You talk about subscribing to bigger servers, setting up complex Elasticsearch clusters, caching things with Redis, or just throwing your wallet at an expensive managed service like Algolia.

Instead, I took the risk by expressing them my current most favorite tech obsession right now.

DRUMROLLS

"What if," I said, "we handled those 2 million searches without a single database hit? What if our servers handled exactly zero search traffic?"

The interviewer leaned in, okay I'm all ears. That’s when I introduced them to the my utter obsession with WebAssembly, and specifically, an incredible new tool I discovered called docfind.

Recently, the engineering team behind VS Code wanted to make their documentation search faster. But instead of buying a massive server to handle all the thousands of developers searching their site every day, they did something brilliantly out-of-the-box. They wrote a tiny, super-fast search engine in a language called Rust, and compiled it into WebAssembly (Wasm).

If you're new to WebAssembly, think of it as a way to run heavy-duty code directly inside a user's web browser at near-native speed, side-by-side with JavaScript.

With docfind, when a user visits your site, they silently download a single, tiny file (about 2.7MB). That file contains everything: the search algorithm and all the searchable text on your website. When they type in the search bar, the search happens entirely on their own laptop or phone.

🤔 Why Not Just Use Algolia or Elasticsearch?

If you've ever built search for a website, your mind probably jumps to one of two standard solutions: setting up a backend search server (like Elasticsearch or Typesense) or paying for a slick, managed API service (like Algolia).

These tools are incredibly powerful, but when you hit serious scale—like our hypothetical 2 million searches—they introduce massive trade-offs:

The Server-Side Tax: With traditional backend search, every single time a user types a keystroke ("W"... "A"... "S"...), their browser fires off a network request to a server. The server crunches the data, formats a response, and sends it back across the internet. At 2 million queries, you are looking at serious server stress, complex caching layers, and (if you are using a paid service) a very painful monthly bill. Plus, you are at the mercy of network latency. It will never feel truly, perfectly "instant."

The JavaScript Bloat: To avoid those server costs, developers sometimes use pure client-side JavaScript libraries (like Lunr.js). This moves the search into the user's browser, which is great! But it introduces a new problem: massive file sizes. The VS Code team actually tested this exact approach. When they fed their documentation into a JS search library, the generated index file swelled to over 10MB. Forcing users to download a 10MB dictionary file on a mobile connection just to use your search bar is a terrible user experience.

The WebAssembly "Goldilocks" Solution

This is exactly why docfind and WebAssembly are such a breakthrough for static sites.

By writing the search engine in Rust and compiling it directly to WebAssembly, the VS Code team hit the perfect sweet spot:

Zero Server Traffic: The search happens 100% locally on the user's device. No network latency, no API limits, and absolutely zero server costs.
Incredibly Small Footprint: Unlike bloated JavaScript indexes, WebAssembly uses a highly compact binary format. By combining Rust's memory efficiency with an advanced string compression algorithm (FSST), the entire VS Code docs index was squished down to just ~2.7MB.
Near-Native Speed: WebAssembly runs alongside JavaScript but executes at near-native hardware speeds. It can parse that binary data and return search results in roughly 0.4 milliseconds.

You get the raw power of a backend server, the cost-efficiency of a static HTML file, and performance speeds that pure JavaScript simply can't touch.

🛠️ Let’s Build It: Adding WebAssembly Search to Your Site

The coolest part about docfind isn't just the underlying tech; it’s how easy the VS Code team made it for the rest of us to use. You don't need to know how to write Rust, and you don't need to understand memory management.

You just need a JSON file and some basic JavaScript. Here is how you can implement it for your own documentation or product pages.

Step 1: Install the CLI

First, we need the docfind tool. This is a simple Command Line Interface (CLI) that takes your website's content and magically compiles it into that tiny WebAssembly file.

Open your terminal and run:

(Mac/Linux)

curl -fsSL https://microsoft.github.io/docfind/install.sh | sh

(Windows PowerShell)

irm https://microsoft.github.io/docfind/install.ps1 | iex

Step 2: Prepare Your Data

docfind needs to know what it is searching through. You need to create a file called documents.json. This file should contain an array of all the pages, products, or docs you want people to find.

Here is what it looks like: ( yep, just for testing you need to copy this into your document.json file ) Get the document.json, here

Pro-tip: If you use a static site generator like Astro, Hugo, or Next.js, you can easily write a quick script to generate this JSON file during your build process!

Step 3: Build the WebAssembly Index

Once you have your documents.json ready, run this single command:

docfind documents.json output

Boom. Magic happens here. The CLI analyzes your text, extracts the most important keywords, compresses everything, and injects it into a pre-built WebAssembly template.

Check your output folder. You will see two important files:

docfind_bg.wasm (The actual search engine and your compressed data)
docfind.js (A tiny JavaScript wrapper to help you talk to the WASM file)

Step 4: Add it to Your Frontend

Now, just move those two files into your website's public folder.

test-directory/                                                                                                              
  ├─ index.html
  ├── documents.json
  └── public/
      └── search/
          ├── docfind.js
          └── docfind_bg.wasm

Here is how you actually trigger a search using normal JavaScript. You just import the function, initialize it, and pass it a user's search query, direct html implementation, copy and paste:

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" id="search-input" placeholder="Type to search..." />
    <ul id="results"></ul>

    <script type="module">
        // Import the search function. 
        // Ensure docfind_bg.wasm is in the same folder as docfind.js
        import search from './public/search/docfind.js';

        const input = document.getElementById('search-input');
        const list = document.getElementById('results');

        input.addEventListener('input', async (e) => {
            const query = e.target.value;

            // This is where the magic happens. 
            // The first time this runs, it downloads the WASM file.
            // Subsequent searches are instant (0.4ms).
            const results = await search(query);

            // Render results
            list.innerHTML = results
                .map(doc => `
                    <li>
                        <a href="${doc.href}">
                            <strong>${doc.title}</strong>
                            <small>${doc.category}</small>
                        </a>
                    </li>`
                )
                .join('');
        });
    </script>
</body>
</html>

And that’s it! The results variable will return an array of the objects you defined in your documents.json, ranked by relevance.

You’ve just built a serverless, incredibly fast search engine. If 2 million people visit your site tomorrow and start searching, your server won't even notice.

🪄 How `docfind` Works (The 30-Second Version)

Think of docfind as a super-smart, lightning-fast librarian that lives directly in your users' browsers. To make the search so fast and the file so small, it relies on a "magic trio" of tools:

1. RAKE (The Highlighter): Before the search even begins, this tool scans all your website's text and pulls out only the most important keywords, ignoring filler words like "the" or "and."
2. FSST (The Shrink-Ray): Text takes up a lot of space. This tool squishes all your website's words down into a tiny, compressed format so the search file downloads instantly.
3. FST (The Speed Index): When a user starts typing in the search bar, this acts like the index at the back of a textbook. Instead of reading every page to find a match, it instantly points exactly to where the right answer lives.

All three of these are bundled into one tiny WebAssembly (WASM) file. That means the user downloads the entire search engine in a split second, and all the actual searching happens directly on their device—no servers required!

⚖️ The Trade-Offs: Is `docfind` Right for You?

Before you rip out your entire backend search architecture, it is important to remember that every engineering decision comes with trade-offs. While WebAssembly is practically magic, docfind is specifically designed for a certain type of content.

The Pros:

Zero Backend Costs: You completely eliminate database queries and API fees.
Infinite Scalability: Whether you get 10 visitors or 2 million, the "server load" remains exactly zero.
Instantaneous Speed: Searches resolve in milliseconds (~0.4ms) because there is no network latency.
Privacy: The user's search queries never leave their device.

The Cons (The Reality Check):

The Caching Trap: Browsers heavily cache .wasm and .js files. If you update your website's documentation, returning users might still have the older index file cached in their browser. They will be searching an outdated version of your site unless you implement strict cache-busting strategies (like appending a hash to the filename on every build).
Not for Dynamic Data: Because the index is compiled into a static file, docfind is strictly for content that changes at build-time (like documentation, blogs, or static product catalogs). It is highly discouraged for frequently changing data—like live inventory, social media feeds, or anything that updates by the minute.

🏆 Credit Where It’s Due & Resources

A massive shoutout to the VS Code Engineering Team for building this and open-sourcing it. It’s incredibly inspiring to see big teams pushing the boundaries of what the browser can handle.

If you want to dive deeper, test it out, or yell at my code, here are all the links you need:

📖 The Inspiration: Read the fantastic original engineering blog by the VS Code team: Building docfind: Fast Client-Side Search with Rust and WebAssembly.
🐙 The Official Source: Check out the inner workings in the microsoft/docfind GitHub Repo.
🎮 The Live Demo: Try their Interactive Live Demo. (Pro-tip: Open your browser's Network tab before you search. Watching a search return results without a single network request firing is incredibly satisfying).
💻 Try My Code: I’ve put together a clean, ready-to-use repository containing the JavaScript setup we walked through. Clone it, run a local server, and test it yourself: github.com/404rakshit/docfind-blog.

Have you tried playing around with WebAssembly yet? Let me know your thoughts in the comments below!

Happy coding! 🚀

Create VS Code Extension with React, TypeScript, Tailwind

Rakshit Raj — Mon, 26 Feb 2024 23:43:56 +0000

TL;DR

This article also deals with basics of Making of VS Code Extension other than react, typescript, tailwindcss. For just get to the point directly, click here, or else we can dive into it.

Introduction
Understanding Extension Creation
Webview API for UI
Styling UI
Scripting
Implementing React, TypeScript, Tailwind
Bonus: VS Code UI Toolkit (React)

Introduction

This article is dedicated for those people who prefer a code editor called VS Code, which is quite underrated and under used all along.

Inside the code editor there is a section for extensions which enables additional helping hand while coding like snippets (auto complete), debugging, theme and more such more useful extensions.

For example, The Postman VS Code extension enables you to develop and test your APIs in Postman directly from Visual Studio Code.

In the above extension, the shown UI is inside VS Code which is possible due the help of extension by Postman. As it seems an integral part of code editor too, but for sure this was made using html , css and javascript only, and any one can make it easily.

To make sure yourself just press, Ctrl + Shift + P and select Developer: Toggle Developer Tools to reveal the dev tools inside VS Code.

As mentioned in the above gif, one can inspect any extension easily as they inspect any web page. Now coming to the important part, how to make such extension.

Let's begin with it...

Understanding Extension Creation

For creating an extension VS Code uses a cli tool called Yeoman and Code-Generator.

Before getting started, you need npm installed and basic knowledge of node.

Installing package globally

npm install --global yo generator-code

Initiating the extension installation

yo code

After which you will be introduced with this Yeomen menu of extensions


     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript) 
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)

Selection for different kind of extension, but in our case we are going with certain options

? What type of extension do you want to create? New Extension (TypeScript)
? Whats the name of your extension? HelloWorld
? Whats the identifier of your extension? helloworld
? Whats the description of your extension? LEAVE BLANK
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

? Do you want to open the new folder with Visual Studio Code? Open with `code`

Inside the editor, open src/extension.ts and press F5. This will compile and run the extension in a new Extension Development Host window.

Run the Hello World command from the Command Palette Ctrl + Shift + P in the new window

Output will result in a VS Code Information Message (default): Hello World

You can play around by changing stuffs inside src/extension.ts:

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "helloworld" is now active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
        // The code you place here will be executed every time your command is executed
        // Display a message box to the user
        vscode.window.showInformationMessage('Hello World from Helloworld!');
    });

    context.subscriptions.push(disposable);
}

// This method is called when your extension is deactivated
export function deactivate() {}

This file is the base of your extension. It contains 2 important methods: activate and deactivate . Imported vscode.command module registers command and context argument collectively subscribe to them.

Within the `package.json`

{
...,
  "activationEvents": [],
  "contributes": {
    "commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]
  },
}

Contributes.command : Helps in displaying the command with a title in the command palate also consists of views and more.

Activation Events : Automates the triggering of a registered command on a certain condition

For more clarity you can visit Your First Extension by VS Code

But, this article is not just about any normal extension. For, UI part we will use WebViews by VS Code.

Webview API for UI

The Webview allows extensions to create fully customizable views within Visual Studio Code. For quick implementation follow these steps:
Overwrite the src/extension.ts file with the code below:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    console.log('Congratulations, your extension "Webview" is up and running now');

    let webview = vscode.commands.registerCommand('helloworld.webview', () => {

        let panel = vscode.window.createWebviewPanel("webview", "Web View", {
            viewColumn: vscode.ViewColumn.One,
        })

        // will set the html here
                 panel.webview.html = `<h1>This is Heading 1</h1>
    <h2>This is Heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>This is Heading 4</h4>
    <h5>This is Heading 5</h5>`

    });

    });

    context.subscriptions.push(webview);
}

export function deactivate() { }

Key Points to be noticed:

For creating a Webview Panel with the help of a command helloworld.webview, we need to register it with it's callback. panel is used for setting html into the webview.
With in the callback, vscode.window.createWebviewPanel method is called which takes 4 arguments, viewType , title (title of the webview panel), showOption (which column and to focus), options (important, as it deals with security like scripting and accessibility of resources to the panel) and it returns vscode.WebviewPanel
Important Step: If you ever register a new command, always remember to add it to package.json under contributes.commands

{
...,
"contributes": {
    "commands": [
      {
        "command": "helloworld.webview",
        "title": "Web View"
      }
    ]
  },
}

and, run the extension with F5, which eventually leads to opening another vscode window Extension Development. Then press Ctrl + Shift + P, enter on Web View (or command title you mentioned inside package.json) in the command palate.

The appearing window must look like this

Styling UI

Styling is same as the web using css as usual but here is a catch, if you are writing css externally, you need to first allow that resource.

By default, all the local resources within the extension location and workspace are accessible. To control them just alter the code for createWebviewPanel by providing it with 4th argument localResourceRoots.

// while creating panel allow the path you want to add
// in my case adding media as rootDir to localResources
let panel = vscode.window.createWebviewPanel("webview", "Web View", {  
       viewColumn: vscode.ViewColumn.One
},{    localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")]
     })

Next step is to create a folder named media in the root directory inside the extension folder.

Inside the folder you can put all your styling files such as images, svg, css files, etc.

Craete a file vscode.css (you can name anything) inside media folder. Add the content below

:root {
  --container-paddding: 20px;
  --input-padding-vertical: 6px;
  --input-padding-horizontal: 4px;
  --input-margin-vertical: 4px;
  --input-margin-horizontal: 0;
}

html {
  box-sizing: border-box;
  font-size: 13px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  padding: 0 var(--container-paddding);
  color: var(--vscode-foreground);
  font-size: var(--vscode-font-size);
  font-weight: var(--vscode-font-weight);
  font-family: var(--vscode-font-family);
  background-color: var(--vscode-editor-background);
}

ol,
ul {
  padding-left: var(--container-paddding);
}

body > *,
form > * {
  margin-block-start: var(--input-margin-vertical);
  margin-block-end: var(--input-margin-vertical);
}

*:focus {
  outline-color: var(--vscode-focusBorder) !important;
}

a {
  color: var(--vscode-textLink-foreground);
}

a:hover,
a:active {
  color: var(--vscode-textLink-activeForeground);
}

code {
  font-size: var(--vscode-editor-font-size);
  font-family: var(--vscode-editor-font-family);
}

button {
  border: none;
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  width: 100%;
  text-align: center;
  outline: 1px solid transparent;
  outline-offset: 2px !important;
  color: var(--vscode-button-foreground);
  background: var(--vscode-button-background);
}

button:hover {
  cursor: pointer;
  background: var(--vscode-button-hoverBackground);
}

button:focus {
  outline-color: var(--vscode-focusBorder);
}

button.secondary {
  color: var(--vscode-button-secondaryForeground);
  background: var(--vscode-button-secondaryBackground);
}

button.secondary:hover {
  background: var(--vscode-button-secondaryHoverBackground);
}

input:not([type="checkbox"]),
textarea {
  display: block;
  width: 100%;
  border: none;
  font-family: var(--vscode-font-family);
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  color: var(--vscode-input-foreground);
  outline-color: var(--vscode-input-border);
  background-color: var(--vscode-input-background);
}

input::placeholder,
textarea::placeholder {
  color: var(--vscode-input-placeholderForeground);
}

.container {
  display: flex;
}

.form {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px;
  gap: 10px;
}

Styling above will help you the reset the default styling property of the element of html to once looks like native styling of vscode. Variables mentioned above is directly provided by vscode.

You can also add any image of your choice, just place image file inside media folder.

For applying the css stylesheet and image, just add this lines and apply to html

const cssStyle = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "media", "vscode.css"))

const imgSrc = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "media", "vim.svg"))

panel.webview.html = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="${cssStyle}" />
    </head>
    <body>
    <div class="container">
        <img src="${imgSrc}" width="200" />
        <div class="form">
            <code>Title</code>
            <input />
            <code>Code</code>
            <textarea></textarea>
            <button>Submit</button>
        </div>
    </div>
    </body>
    </html>`

Quick Tip: To see the changes in html you need to reload the entire extension, Ctrl + R to quick reload, no need to restart every time with Ctrl + F5

Expected Output:

Scripting

You can also update DOM inside your extension using javascript. But it needs to be enabled before.

let panel = vscode.window.createWebviewPanel("webview", "Web View", {
            viewColumn: vscode.ViewColumn.One
        },{
        enableScripts: true
    })

const scriptPath= panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "media", "script.js"))

panel.webview.html = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="${scripts}"></script>
    </head>
    <body>
    <h1>Count:</h1>
        <p id="count">0</p>
    <button onclick="changeHeading()">Add</button>
    </body>
    </html>`

Now, create file script.js inside media folder, and add following lines.

//script.js
function changeHeading() {
    document.getElementById("count").textContent = +document.getElementById("count").textContent + 1
}

Expected Output after running extension

Fun Fact: You don't need to reload to see the changes for the scripting part, just close and reopen the web view.

Implementing React, TypeScript, Tailwind

After learning much about the extension and webviews, it's time to get along with frameworks, for obvious reasons that they make things easier while using different libraries.

Starting with react, you can choose any framework of your choice.

Step 1 Initializing extension with yo code

yo code

? What type of extension do you want to create? New Extension (TypeScript)
? Whats the name of your extension? react-ext
? Whats the identifier of your extension? react-ext
? Whats the description of your extension? LEAVE BLANK
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

? Do you want to open the new folder with Visual Studio Code? Open with `code`

Step 2 Inside root directory creating a react app with typescript.

npx create-react-app web --template typescript
cd web

Step 3 Inside react app directory web, Setting up tailwindcss

npm i -D tailwindcss postcss
npx tailwindcss init

Editing tailwind.config.js

//tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Editing web/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply p-0;
}

Step 4 Inside React directory, creating file named .postcssrc

//.postcssrc
{
  plugins: {
    tailwindcss: { },
  },
}

Step 5 Editing react app web/src/App.tsx

function App() {
  return (
    <div className="bg-gradient-to-r from-blue-600 to-purple-500 p-10">
      <p className="text-white/80 text-xl font-semibold">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, explicabo
        doloremque deserunt, voluptates, fugiat dolorem consectetur odio autem
        quas ipsa veniam ducimus necessitatibus exercitationem numquam assumenda
        natus beatae sed velit!
      </p>
    </div>
  );
}

export default App;

Step 6 Setup Parcel, most lightweight bundler (honestly after trying webpack and babel and rollup, i felt wastage of time)

Installing Parcel as Dev Dependency inside React Root Directory web

npm i -D parcel

Inside React app, Editing package.json

//web/package.json
{
...,
"source": "src/index.tsx",
"scripts": {
    "start": "parcel", //overwrite 
    "build": "parcel build", //overwrite
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

Running Parcel (Parcelling)

npm start

#> web@0.1.0 start
#> parcel

#Server running at http://localhost:1234

Every time you change something inside src or related to src/index.tsx like index.css, it will rerun the quick build and store it in dist folder inside react app directory, as index.js and index.css.

Step 7 Now coming to the extension integration part, editing src/extension.ts

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    let webview = vscode.commands.registerCommand('react-ext.namasteworld', () => {

        let panel = vscode.window.createWebviewPanel("webview", "React", vscode.ViewColumn.One, {
            enableScripts: true
        })

        // web is for my react root directory, rename for yours

        let scriptSrc = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "web", "dist", "index.js"))

        let cssSrc = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, "web", "dist", "index.css"))

        panel.webview.html = `<!DOCTYPE html>
        <html lang="en">
          <head>
            <link rel="stylesheet" href="${cssSrc}" />
          </head>
          <body>
            <noscript>You need to enable JavaScript to run this app.</noscript>
            <div id="root"></div>
            <script src="${scriptSrc}"></script>
          </body>
        </html>
        `
    });

    context.subscriptions.push(webview);
}

export function deactivate() { }

MOST IMPORTANT PROCESS!
Don't forget manually write all you registered command inside package.json, this will lead to absence of UI Options in the command palate Ctrl+Shift+P

To do so, go to your extension's root directory's package.json

{
...,
"contributes": {
    "commands": [
      {
        "command": "react-ext.namasteworld",
        "title": "React Web View"
      }
    ]
  },
}

Final Step Now, for the moment of truth

Just press Ctrl F5, another Extension Development will open.
On another test vscode editor Extension Development, open command palate by press Ctrl+Shift+P
Search for your registered command, your given the name in package.json, in my case React Web View

And similar window must pop-up as shown below

Expected Steps:

Fun Fact: You don't need to rerun after making changes inside your react app or App.tsx, reopen the window as shown below

Bonus: VS Code UI Toolkit (React)

Advantages of using frameworks instead of raw html, you can use UI libraries like shadcn ui, framer motion, and many more

One such useful example is there own developed Webview UI Toolkit

It is an amazing ui library which makes your made extension feels like their native once.

To implement you just need to install vscode/webview-ui-toolkit inside your react app

npm install --save @vscode/webview-ui-toolkit

Editing App.tsx

import {
  VSCodeButton,
  VSCodeDataGrid,
  VSCodeDataGridRow,
  VSCodeDataGridCell,
  VSCodeTextField,
  VSCodeProgressRing,
} from "@vscode/webview-ui-toolkit/react";

function App() {
  const rowData = [
    {
      cell1: "Cell Data",
      cell2: "Cell Data",
      cell3: "Cell Data",
      cell4: "Cell Data",
    },
    {
      cell1: "Cell Data",
      cell2: "Cell Data",
      cell3: "Cell Data",
      cell4: "Cell Data",
    },
    {
      cell1: "Cell Data",
      cell2: "Cell Data",
      cell3: "Cell Data",
      cell4: "Cell Data",
    },
  ];

  return (
    <div className="grid gap-3 p-2 place-items-start">
      <VSCodeDataGrid>
        <VSCodeDataGridRow row-type="header">
          <VSCodeDataGridCell cell-type="columnheader" grid-column="1">
            A Custom Header Title
          </VSCodeDataGridCell>
          <VSCodeDataGridCell cell-type="columnheader" grid-column="2">
            Another Custom Title
          </VSCodeDataGridCell>
          <VSCodeDataGridCell cell-type="columnheader" grid-column="3">
            Title Is Custom
          </VSCodeDataGridCell>
          <VSCodeDataGridCell cell-type="columnheader" grid-column="4">
            Custom Title
          </VSCodeDataGridCell>
        </VSCodeDataGridRow>
        {rowData.map((row) => (
          <VSCodeDataGridRow>
            <VSCodeDataGridCell grid-column="1">{row.cell1}</VSCodeDataGridCell>
            <VSCodeDataGridCell grid-column="2">{row.cell2}</VSCodeDataGridCell>
            <VSCodeDataGridCell grid-column="3">{row.cell3}</VSCodeDataGridCell>
            <VSCodeDataGridCell grid-column="4">{row.cell4}</VSCodeDataGridCell>
          </VSCodeDataGridRow>
        ))}
      </VSCodeDataGrid>

      <span className="flex gap-3">
        <VSCodeProgressRing />
        <VSCodeTextField />
        <VSCodeButton>Add</VSCodeButton>
        <VSCodeButton appearance="secondary">Remove</VSCodeButton>
      </span>
    </div>
  );
}

export default App;

The best part of this library this is, it accommodates with every available themes in vscode, using their css varibles (i guess), which is amazing.

Here is a sample

For more usage info look into their Repo

If you are here, i don't believe you actually reached here, btw thanks for reading.

Here is a github link to my react setup repo, you can easily clone and try for yourself too. Clone Repo

Caching & Revalidate: ServerSide vs ClientSide

Rakshit Raj — Wed, 29 Nov 2023 19:49:50 +0000

A major feature which is often missed out by many web application especially dealing with data sharing and database like ecommerce websites, is data revalidation.

Like this one, where data is not always fetch from data source (database) but cached on the server to access latest revalidated data faster, also revalidating server component with a live UI update on client side as well as revalidating cache on server side for all clients.

Data Revalidation

The process of reviewing, verifying, and ensuring the accuracy and completeness of data in a database or dataset. This is a crucial step in maintaining data quality and integrity. The revalidation process may involve checking for errors, inconsistencies, and outdated information.

Here outdated information is often referred to cached data on the servers. This is how things work under the hood though...

For more information checkout latest Caching in Nextjs

In short, Caching just boost your page performance while maintaining the SEO and with the help of revalidation client always gets fresh data.

Practice Project

Let's make a mini demonstration project using these features.

Requirement

Step 1: Create an account on mockapi.io

Step 2: Create project

Step 3: Create Schema with new resource and generate data using the slider

You will be left with a url like this, replace the endpoint with your schema name

https://XXXXXXXXXXXXXXXXXXXXX.mockapi.io/api/product/:endpoint

Create a .env.local file in the root directory

MOCKAPI = https://XXXXXXXXXXXXXXXXXXXXX.mockapi.io/api/product/:endpoint

Server Side (App Directory)

Step 1: Initialize a Nextjs App using terminal

npx create-next-app server-demo
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
? Would you like to customize the default import alias (@/*)? » No

cd server-demo

Step 2 Inside src/app/page.tsx replace with this code below:

export default function Home() {
  return (
    <main className="grid max-w-3xl mx-auto p-4 gap-4">
      <h1 className="text-4xl font-extrabold max-lg:text-3xl">Homepage</h1>
      <div className="grid grid-cols-3 gap-3">
        <form
          action=""
          className="flex flex-col gap-2 p-1 rounded-lg bg-slate-400/10"
        >
          <input
            name="name"
            placeholder="Name"
            className="p-2 rounded-md outline-none"
            type="text"
          />
          <input
            name="image"
            placeholder="Image"
            className="p-2 rounded-md outline-none"
            type="text"
          />
          <button
            type="submit"
            className="bg-orange-600 font-extrabold uppercase text-white/70 p-2 rounded-md"
          >
            Submit
          </button>
        </form>
      </div>
    </main>
  );
}

Output

Step 3: Create a new file Card.tsx within src/app and paste this code below:

"use client";
import Image from "next/image";
import React from "react";

type Props = {
  props: {
    id: string;
    name: string;
    image: string;
    createdAt: string;
  };
};

const Card = ({ props }: Props) => {
  return (
    <div className="flex flex-col gap-1 p-1 rounded-lg bg-slate-400/10">
      <div className="relative overflow-hidden flex-1 rounded-md bg-slate-400/30">
        <Image
          src={props.image}
          alt={props.name}
          fill
          loader={() => props.image}
          className="object-cover"
        />
      </div>
      <span className="bg-zinc-800 font-extrabold uppercase text-white/70 p-2 rounded-md text-center">
        {props.name}
      </span>
    </div>
  );
};

export default Card;

Now import Card.tsx into the page.tsx just below </form>

//</form>
//Card Component
<Card props={{
      id: "1",
      name: "Bellgium",
      image: "https://loremflickr.com/640/480/nature",
      createdAt: "2023-11-29T05:14:05.972Z",
}} />
//</div>

Output

Step 4: Remember to make default function async in page.tsx

export default async function Home()

Fetching data on server component with the mockapi endpoint

//export default async function Home() {
  const res = await fetch(process.env.MOCKAPI!, {
    next: {
      tags: ["place"],
      revalidate: 60 * 60,
    },
  });
  const data = await res.json();
  //return (

Using fetched data below by wrapping Card component inside array map function

//</form>
{data.map((place: any) => (
<Card props={place} 
/>))}
//</div>

Output

Step 5 Important Now coming to the serverAction part, where our revalidation will take place after adding a new data.

Create an async function before return in page.tsx

async function serverAction(e: FormData) {
    "use server";
    let name = e.get("name")?.toString();
    let image = e.get("image")?.toString();

    if (!name && !image) return

    const newPlace = {
      name,
      image
    }

    await fetch(process.env.MOCKAPI!, {
      method: "post",
      body: JSON.stringify(newPlace),
      headers: { "Content-Type": "application/json" },
    });

    revalidateTag('place')
  }

Add the function's name to form action

<form action={serverAction} 
className="flex flex-col gap-2 p-1 rounded-lg bg-slate-400/10" >

Thats all, you will see such output

Client Side (TanStack React Query)

Using Tanstack React Query provides you awesome control over data fetching and manipulation on the Client Side UI.

Step 1: Initialize a Nextjs App using terminal

npx create-next-app client-demo
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
? Would you like to customize the default import alias (@/*)? » No

cd client-demo

Step 2: Replace this code from page.tsx

"use client";

const ClientPage = () => {
  return (
    <main className="grid max-w-3xl mx-auto p-4 gap-4">
      <h1 className="text-4xl font-extrabold max-lg:text-3xl">Client Page</h1>
      <div className="grid grid-cols-3 gap-3">
        <form className="flex flex-col gap-2 p-1 rounded-lg bg-slate-400/10">
          <input
            name="name"
            placeholder="Name"
            className="p-2 rounded-md outline-none"
            type="text"
          />
          <input
            name="image"
            placeholder="Image"
            className="p-2 rounded-md outline-none"
            type="text"
          />
          <button
            type="submit"
            className="bg-purple-600 hover:bg-purple-600/90 font-extrabold uppercase text-white/70 p-2 rounded-md"
          >
            Submit
          </button>
        </form>
      </div>
    </main>
  );
};

export default ClientPage;

Step 3: Steup Tanstack React Query

npm i @tanstack/react-query

Create a file outside app folder provider.tsx containing following:

"use client";

import React, { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const ReactQueryProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

export default ReactQueryProvider;

Inside /src/app edit layout.tsx wrap children with exported ReactQureyProvider:

<body className={inter.className}>
        <ReactQueryProvider>{children}</ReactQueryProvider>
</body>

Step 4: Using QueryClient fetching data on client side

//const ClientPage = () => {
const queryClient = useQueryClient();

  // Queries
  const { data, isLoading } = useQuery({
    queryKey: ["place"],
    queryFn: async () => {
      const res = await fetch(process.env.MOCKAPI!);
      const fetchedData = await res.json();
      return fetchedData;
    },
  });

//return (

Adding loading state to the page after form field

//</form>
        {isLoading ? (
          <div className="flex flex-col gap-1 p-1 rounded-lg bg-slate-400/10">
            <div className="relative overflow-hidden min-h-[90px] flex-1 rounded-md bg-slate-400/30"></div>
            <span className="bg-zinc-800 font-extrabold uppercase text-white/70 p-2 rounded-md text-center animate-pulse">
              Loading
            </span>
          </div>
        ) : (
          data.map((e: any) => <Card key={e.id} props={e} />)
        )}
//</div>

Step 5: Revalidating client side data after successfully fetching data

// Mutations
  const { mutate, isPending } = useMutation({
    mutationFn: async (newData) => {
      const res = await fetch(process.env.MOCKAPI!,
        {
          method: "post",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(newData),
        }
      );
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["place"] });
    },
  });

//return (

Adding form actions function for getting data and post it.

<form action={(e) => {
            const name = e.get("name")?.toString();
            const image = e.get("image")?.toString();

            if (!name && !image) return;

            mutate({ name, image });
          }}
          className="flex flex-col gap-2 p-1 rounded-lg bg-slate-400/10">

Output

No Reloads!

🚀 Five-Minute Backend Deployment Made Simple: Revolutionize Your Workflow

Rakshit Raj — Mon, 04 Sep 2023 00:11:43 +0000

In the ever-evolving landscape of web development, one challenge that many developers face is deploying a backend for their projects without breaking the bank. While there are numerous hosting options available, finding a cost-effective solution that doesn't compromise on performance and security can be a daunting task.

In this article, i will explain and share my experience with numerous hosting providers and why i choose this one. Also about the struggles developers encounter when trying to deploy a backend for free and provide insights into some viable options to overcome these hurdles.

Deploying Backend using Deta Space

Deta Space, which is a cloud-based platform provided by Deta, a company known for its serverless tools and services. Deta Space offers developers a space to build, deploy, and host web applications and APIs as Deployment or Stagging before pushing for Production using serverless architecture.

Without Wasting time initializing the process...

Installing the Space CLI

Windows

To install the Space CLI on Windows, open PowerShell and enter:

iwr https://deta.space/assets/space-cli.ps1 -useb | iex

MacOS

To install the Space CLI on MacOS, open a Terminal session and enter:

curl -fsSL https://get.deta.dev/space-cli.sh | sh

Linux

To install the Space CLI on Linux, open a Terminal and enter:

curl -fsSL https://deta.space/assets/space-cli.sh | sh

Create an account

Click here to create an account

Skipping to Post Sing Up part, After creating your account, go to your dashboard (Builder UI)

Search for "Settings" in the search box present at bottom of the page.

Click on Generate Access Token and copy the access token

Account Setup Complete moving to next step...Project Setup

Project Setup

You’ll need to log in to Deta Space. From a terminal type:

space login

This command will ask for an ‘access token’ which you generated above to authenticate your CLI.

? Enter access token >

Go to your project directory and Open an Terminal and type:

space new

This command is like git init you will be prompted to enter a name for your project. The CLI will display a generated configuration for the app and prompt you to confirm.

CLI will automatically detect the engine environment (i.e. nodejs16, next, python)

Know More about Runtime on Official Docs

Once confirmed, the project will be created along with a Spacefile. The Spacefile contains the configuration for your Micro and a .space directory that stores project information and links it to your project.

Inside Spacefile

If CLI detects your backend needs an engine (environment) as nodejs, **Spacefile **will consist of following after initializing by default, if not paste it manually.

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: nodejs-app
    src: .
    engine: nodejs16
    primary: true

NOTE: For now, the Spacefile with the generated configuration only works when there an index.js file at the root directory of the micro’s source code else you will have to explicitly define what command should be executed to start your app with the run command. Shown below

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: nodejs-app
    src: .
    engine: nodejs16
    primary: true
    run: node app.js

Deploying Locally

Add dev: commands inside Spacefile

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: nodejs-app
    src: .
    engine: nodejs16
    primary: true
    dev: nodemon index.js

Execute following command in common directory in terminal:

space dev

Restricting Uploads

Although .env files are not been uploaded by default, but to exclude certain files and directories from being uploaded during space push, use the .spaceignore file. It acts similar to a .gitignore file, where each line in the file specifies a pattern. All files and directories matching the patterns will be excluded from push.

For example, using space push with the following .spaceignore file will ignore the testand docspaths:

Inside .spaceignore

test
docs

Setting Environment Variables (.env)

Environment Variables can be created/managed via 2 ways:

After pushing the code manually creating or changing the env inside the project settings from the Dashboard.
While pushing your code from CLI, Spacefile can be edited in such manner:

micros:
  - name: nodejs-app
    src: .
    engine: nodejs16
    primary: true
    presets:
      env:
        - name: APIkey
          description: Secret API key only available to this Micro
          default: "0bd5f0808f412635548fd67472398aab2bcffdbf"
        - name: PORT
          description: Listening PORT for my backend
          default: "8080"

Common Error: People usually use PORT as 3000 which might be already reserved for frontend or some static micro services. Recommended Use PORT: 8080

Deployment Visibility

This service is capable of Authentication too, but you can use them as per your need. For example, if you need your project to be visible to all, edit and add public: true inside Spacefile.

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: nodejs-app
    src: .
    engine: nodejs16
    primary: true
    public: true

Or using Custom Authentication API Key via generating manually from dashboard or while push the code, fir while change as shown below to your Spacefile:

micros:
  - name: nodejs-app
    src: .
    engine: nodejs16
    primary: true
    presets:
      api_keys: true

Use the api_keys preset to enable the use of API keys to access a private routes of a Micro.

The user of your app will be able to generate API keys in the app settings and can use them in requests to a Micro using the X-Space-App-Key HTTP header.

NOTE: These are some basics about Sapcefile creation and project management while push. Spacefile is capable of numerous advanced concepts like event scheduling which can be set manually.

For More Information regarding Spacefile checkout it official docs.

Pushing n Serving Files

Finalizing the project with a proper Spacefile ready, open the terminal current directory and type:

space push

After executing the CLI command it will start its all the configuration within the Spacefile resulting in response mentioned as below:

NOTE: Everytime if there is some changes in the file just use the same command space push, this will rebuild the project files as per configuration.

For visualization of deployed project, open terminal and type:

space open

Will redirect to your dashboard where you can set the .env and check the live logs.

Conclusion

Congratulations! 🎉 You have successfully built, deployed and got your first Node.js app on Space. 🚀

This article is heavily inspired by Nodejs Quick Start Guide

Similarly, there are many more options such as fastapi, django, go, rust, svelte, sveltekit, nextjs, nuxtjs and many more, even you can deploy costume way. For trying each and every visit official quick start guide.

NOTE: Remember that this article is written on 4th September 2023, and till the date Deta Space has no pricing plans yet, thus resulting as a useful technology of personal cloud for completely free with crazy customization and serverless deployment.

I have personally used there service for more than 6 months straight without any deployment roadblocks or issue. It works fine.

Follow for more such technologies related to Servers, Cloud Computing, and FullStack Development.

Forem: Rakshit Raj

New Way to Handle 2 Million Search Queries Without a Search Server

Table of Contents

Introduction: The Interview

🤔 Why Not Just Use Algolia or Elasticsearch?

🛠️ Let’s Build It: Adding WebAssembly Search to Your Site

Step 1: Install the CLI

Step 2: Prepare Your Data

Step 3: Build the WebAssembly Index

Step 4: Add it to Your Frontend

🪄 How docfind Works (The 30-Second Version)

⚖️ The Trade-Offs: Is docfind Right for You?

🏆 Credit Where It’s Due & Resources

Create VS Code Extension with React, TypeScript, Tailwind

TL;DR

Table Of Contents

Introduction

Understanding Extension Creation

Within the package.json

Webview API for UI

Styling UI

Scripting

Implementing React, TypeScript, Tailwind

Expected Steps:

Bonus: VS Code UI Toolkit (React)

Caching & Revalidate: ServerSide vs ClientSide

Data Revalidation

Practice Project

Requirement

Server Side (App Directory)

Client Side (TanStack React Query)

🚀 Five-Minute Backend Deployment Made Simple: Revolutionize Your Workflow

Deploying Backend using Deta Space

Installing the Space CLI

Windows

MacOS

Linux

Create an account

Project Setup

Inside Spacefile

Pushing n Serving Files

Conclusion

🪄 How `docfind` Works (The 30-Second Version)

⚖️ The Trade-Offs: Is `docfind` Right for You?

Within the `package.json`