DEV Community: Scott Lepper

Build MCP Servers that don't suck...tokens.

Scott Lepper — Tue, 19 May 2026 00:27:45 +0000

First-generation MCP servers were great. They gave AI agents access to a ton of external apps and data — Jira, Confluence, GitHub, Linear, you name it. But most of them just wrapped REST APIs. And that causes a ton of context bloat, hallucinations, and token burning.

Combining a few strategies from the ultra-mcp-toolkit, you can reduce that bloat dramatically — and save money.

Generating a cost-efficient MCP server is easy. Just install the skill and off you go.

Here's what "dramatically" looks like

Real benchmark, live Jira instance, reproducible:

Per-call response size

scenario	naive	with toolkit	savings
fetch 1 simple ticket	20.3KB	1.2KB	17.5×
investigate rich ticket	270.7KB	15.5KB	17.5×
JQL search ~10 tickets	20.5KB	3.5KB	5.8×

That rich-ticket row is the one that hurts. 270 KB → 15.5 KB. ~67k tokens down to ~3.9k tokens. Same content; the full payload still lands on disk and the agent can fetch it via a ref: path only if it actually needs the detail.

Tool-list cost (paid every conversation)

approach	bytes	~tokens	savings
naive (one tool per op)	38.9KB	9,947	1×
consolidated tools	25.1KB	6,427	1.5×
consolidated + filtered	~6 KB	~1,600	5×
code-api mode	401B	100	99×

You read that right. Tool listings drop from ~10k tokens to ~100 tokens. On every. single. conversation.

Why MCP servers leak tokens

Four anti-patterns show up almost everywhere:

Returning raw API JSON. A Jira issue carries iconUrls, nested self URLs, schema metadata, expand hints, three different shapes of the same status field. The agent needs none of it.
One MCP tool per endpoint. A typical CRM has ~80 endpoints → 80 tool descriptions in the listing → ~10k tokens before the user types anything.
Asking the LLM to filter or paginate. The model can't reliably page through huge structures, and the chunking logic itself costs tokens. Filtering belongs server-side.
No discipline on what gets kept. Denylist trimming (delete result.iconUrl) silently breaks the day the API adds a new noisy field. Allowlists keep the contract stable.

The fix, in three strategies

1. Allowlist-style trim projections

import { pick } from "ultra-mcp-toolkit/trim";

const issueSummary = (raw) => {
  const r = raw as { key: string; fields: Record<string, unknown> };
  return {
    key: r.key,
    ...pick(r.fields, ["summary", "status", "priority", "assignee"]),
  };
};

Register the trim once. Every response routes through it. New API fields default to dropped. The model sees what it needs; the full response lives on disk as a ref: the agent can dereference on demand.

2. Consolidated tools (action-discriminated)

Instead of 80 tools, expose ~15 — each taking an action arg:

{ action: "get", issueIdOrKey: "PROJ-1" }
{ action: "create", projectKey: "PROJ", summary: "..." }
{ action: "transition", issueIdOrKey: "PROJ-1", transition: "Done" }

Same operations, 1/5th the tool-list cost. The toolkit's dispatcher handles per-action Zod validation, manifest routing, and a full: true escape hatch when the model genuinely needs the raw response.

3. Code-api mode (the 99× lever)

Expose a single MCP tool that hands the agent a path to a bundled CLI plus a socket address:

node <cli-path> issue.get --issueIdOrKey=PROJ-1
# stdout: trimmed summary as JSON
# final line: `ref: /path/to/full-response.json`

The agent drives the whole API from its shell. Tool list stays at one tool forever, no matter how many operations exist. For shell-capable agents (Claude Code, Cursor, anything with bash), it's pure win.

Quick start

npm install ultra-mcp-toolkit

The toolkit ships a Claude Code skill that auto-loads when you work on an MCP server. Install it:

npm run install-skill

That's it. The skill walks the agent through manifest design, trim projections, dispatcher wiring, and server boot — the patterns that produce the numbers above.

Working from a non-Claude agent (Codex CLI, Cursor, Aider, Continue, Zed)? Point it at the skill markdown directly — AGENTS.md shows you how.

What's in the box

Operation manifest — declare endpoints as pure data; powers MCP tools, CLI, and code-api bridge from one source of truth.
Trim registry — type-safe allowlist projections.
Content-addressed sandbox — full responses land on disk; the model sees a ref: only.
Page cache — versioned-id disk cache for stable keys (PR diffs by SHA, Confluence pages by version).
Pooled retry-aware HTTP transport — undici + 429-aware retry honoring Retry-After.
Atomic streaming downloads — sha256-verified, path-traversal-safe.
Consolidated tool dispatcher — Zod-validated, action-discriminated.
CLI scaffolding — bridge mode + direct mode, free with createCli.
Bundled Claude Code skill — installs in one command.

Production proof

Used in ultra-jira-mcp and ultra-bitbucket-mcp. The benchmark numbers above come from the Jira server running against a real Jira Cloud instance — every byte measured is one a production agent would actually receive.

If you're building an MCP server for any enterprise API — Jira, Confluence, GitHub, Linear, Notion, ServiceNow, Salesforce, whatever — and your token bill or context window is starting to bite, give it a try.

⭐ github.com/scottlepp/ultra-mcp-toolkit — issues, PRs, and benchmark contributions welcome.

What's the most token-bloated MCP server you've shipped or seen? Drop it in the comments — I'm collecting horror stories.

Uploading files with Deno

Scott Lepper — Sun, 11 Apr 2021 15:46:24 +0000

Here I will show a quick tutorial of how to upload files using Deno. Files will simply be stored to disk along with the ability to view them in a browser.

First of all, install Deno.

Now we will add a file to serve our app. Create a project folder to contain your app, then add a subfolder called server. We will also create a client to test it, having a server and client folder will help organize our project.

Add a server.ts file to your server folder. And add the code:

import { Application, send } from "https://deno.land/x/oak/mod.ts";
import { FormFile, multiParser } from 'https://deno.land/x/multiparser@v2.1.0/mod.ts'
import { oakCors } from "https://deno.land/x/cors/mod.ts";

const app = new Application();

app.use(
  oakCors({
    origin: true
  }),
);

app.use(async (ctx) => {
  const path = ctx.request.url.pathname;
  if (path === '/upload') {
    const form = await multiParser(ctx.request.serverRequest)
    if (form) {
      const image: FormFile = form.files.image as FormFile
      try {
        await Deno.writeFile(`images/${image.filename}`, image.content);
      } catch (e) {
        console.error(e)
      }
    }
    ctx.response.body = '{"status": "ok"}';
  }

  if (ctx.request.method === 'GET' && path.startsWith('/images')) {
    await send(ctx, ctx.request.url.pathname, {
      root: `${Deno.cwd()}`
   });
  }
});

app.listen({ port: 8082 });

What is happening here?

At the top we import our dependencies
Then we create an app, then app.use to register middleware.
oakCors will allow any client to call the server (ok for a demo)
In the second app.use block we define routes: /upload and /images. From the client we will post to /upload and we can use /images to view the images.
/upload gets a file from a posted form and writes it to a folder

Now let's run the app. We need to set permissions to allow-net for http calls, and allow-write/allow-read for writing and reading the images. Then we tell deno to run our server.ts file.

deno run \
--allow-net \
--allow-write=./images \
--allow-read=./,./images \
./server/server.ts

Now let's add the client. Add a client folder and create an index.html file with the following:

<html>
  <head>
    <script src="./index.js"></script>
  </head>
  <body>
    <input type="file" name="file" id="imgfile" onchange="loadImage()">
    <input type='button' id='btnLoad' value='Upload' onclick="upload()" />
    <canvas id="canvas"></canvas>
  </body>
</html>

Now add an index.js file with:

async function post(canvas, name) {
  const ts = new Date().getTime();
  canvas.toBlob(async function(blob) {
    const formData = new FormData();
    formData.append('image', blob, name);
    const res = await fetch('http://localhost:8082/upload', {
      mode: 'no-cors',
      method: 'POST',
      body: formData
    });
  });
}

function loadImage() {
  let img;

  const input = document.getElementById('imgfile');
  if (!input.files[0]) {
      write("Please select a file before clicking 'Load'");
      return;
  }

  const file = input.files[0];
  const fr = new FileReader();
  fr.onload = createImage;
  fr.readAsDataURL(file);

  function createImage() {
      img = new Image();
      img.onload = imageLoaded;
      img.src = fr.result;
  }

  function imageLoaded() {
      const canvas = document.getElementById("canvas")
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img,0,0);
  }

}

async function upload() {
  const canvas = document.getElementById("canvas")
  const input = document.getElementById('imgfile');
  await post(canvas, input.files[0].name);
  write('File uploaded')
}

function write(msg) {
  const p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}

Now open the index.html file, select your image, and upload it! We could serve this page with Deno, but we don't really need to for this demo.

To view your uploaded image, you can go to: localhost:8082/images/[yourimagename]

Here is the full GitHub Project

As you can see, Deno is super easy, fun and fast! Happy coding!

Say Goodbye to Status Meetings

Scott Lepper — Sat, 27 Feb 2021 21:29:03 +0000

...and hello to Grafana

As a lead developer, I have often played the role of Scrum master on projects, managing tasks and spending lots of time in Jira. Other roles such as Product Owner and Project Manager also spend a lot of time using Jira, trying to keep track of velocity, progress, status, blockers, estimates and well...if the project is going off the rails. And of course we developers use it to create stories, track of our tasks, update progress, etc.

So following an agile process we end up having lots of status meetings where the project manager, product owner, and other stakeholders swoop in and want updates. Some times even "mid-sprint" updates. What? What the heck is that? So we stop all development, all progress and all get together say where we are at. This is not productive. There has to be a better way.

Enter Grafana. Wait what? Grafana? Isn't that an open source observability platform?

Yes...Exactly. You can monitor anything in Grafana, and now you can monitor Jira projects too.

The new Jira Enterprise Plugin for Grafana allows us to connect to Jira and get all of the observability features we love from Grafana, so we always know exactly what is happening in Jira at any time.

Ok, so tell me how this helps eliminate status meetings?

Well, in Grafana you can set up dashboards that will tell the story of where the project is, show velocity over time, show completion status of epics, show burndown charts, etc, etc. You can also set up alerts to send notifications if a project is heading in the wrong direction, velocity is dropping, story points are overloaded...whatever those managers want to know they can get from a dashboard. Heck, they don't even have to go look at the dashboard, if the alerts are setup they can just sit back, relax, and know if something goes wrong they will be the first to know.

Is your team kicking ass? Great! Set up alerts and send it to those PMs and Product Owners. Even integrate those alerts into performance management systems! Yeah, alerts support webhooks and other integrations. Let Grafana toot your horn for you.

If you are familiar with Jira then you undoubtedly used JQL to search for issues at some point. Ever wish you could get SQL like features with JQL? Like Grouping, Joins,and Aggregating. Well with Grafana transformations, now you can get SQL like capabilities, allowing you to tell stories that was previously not possible (without a bunch of custom coding anyway).

Ok, enough talk, show me a dashboard already!

Woah! This team is killing it in Sprint 2!

How we doing over time?

If you are familiar with Grafana, you know you have a lot of flexibility to tell whatever story you want. Now go check out the Jira plugin for Grafana and try it for yourself.

Firebase bulk updates with FireDrill

Scott Lepper — Fri, 27 Nov 2020 15:06:40 +0000

Ever want to update a bunch of documents in your Firebase collection(s)? Usually you have to write a custom script to do a mass update, but with a new feature in FireDrill you can now do batch updates without writing any code. Let's take a look.

First, run your query to get the documents you want to update. We've also added text filtering so you can perform compound filters! Here we are querying the track collection and applying some filters.

Now that we have our documents we want to update, lets update them.

Open the hamburger menu on the right and select Update Results.

Now we see a dialog. Here we can add a new field/value or update an existing field. Click the Add Field button. Enter a new field/value or enter an existing field name and value you want to update.

Now click Save. Boom! All documents (within this filter and limit) have been updated!

If you like the new bulk updating and text filtering, please let me know by adding a star to the Github repo. Thanks!

Generating beautiful HTML forms with FireDrill

Scott Lepper — Thu, 15 Nov 2018 15:40:14 +0000

In a previous Post I showed you how to use FireDrill to easily find data in your Firebase database. Now I'll show you how you can easily generate beautiful material design based html forms from your data.

Let's do this! Head over to FireDrill.

See here for how to Connect.

Once you're connected, click Forms. Enter your collection that you want to generate a form from, then click Generate Form. You will see the form generated below. Notice it will detect the datatypes based on your data and generate the appropriate input.

So we see it's generated the appropriate inputs based on the data: checkboxes, text inputs and date pickers are generated. Now we want to move our fields around. Hover over a field to see it's drag indicator.

So I've dragged available down to the bottom, and also moved created down a bit.

Great, this is the form I want. Now let's Copy it so we can add it to an app we are developing.

That's it! Now the HTML form is copied to your clipboard! Let's paste it into our favorite HTML editor (VS Code for me) and see what it looks like.

Awesome! In a matter of seconds we've generated a complete HTML form. NOTE The form elements use components from Angular Material, so you'll need that included in your project.

If you like FireDrill show some love and give me a star on GitHub. Thanks for reading!

Firebase - Tables & Reports

Scott Lepper — Wed, 17 Oct 2018 14:03:30 +0000

Using FireDrill for tabular view and reporting of Firebase data.

In FireDrill we can switch from the default Card view to Table view.

Now we see a tabular view of our data with sorting and filtering. Nice!

We can also adjust the columns we see and show a Totals footer.

After unchecking Category and checking Totals above we no longer see the Category column and we now see a sum of the Price field.

A nice report of our total shoe inventory! Lets print this so we can share it as a PDF document.

I see the preview on the right of my report to be printed. I’m using the CutePDF driver which allows printing to PDF, or if you want a hard copy just select your printer.

And here is our pdf report!

How do you FIND , EDIT , and REPORT data from Firebase? Drill baby drill…with FireDrill.

As always, if you have any issues please report them here. Happy drilling!

Super easy Firebase data editing with FireDrill

Scott Lepper — Mon, 01 Oct 2018 14:22:28 +0000

In my last Post I showed you how to use FireDrill to easily find data in your Firebase database. Now I'll show you how you can easily manage your data.

With FireDrill we can quickly find our Firebase data and once we find it we can easily edit it. It's also easy to Export your data to CSV (Spreadsheet, Excel) if you want to use Spreadsheets to further visualize or manipulate the data. And finally, you can Import bulk data from a CSV format.

Let's take a look.

Again I'll work with my "shoes" collection (which is no where near the size of my wife's shoe collection). Here I've drilled into "shoes".

Great, I found my shoes. I'm having a sale so I want to change the Price of the Converse "Chuck Taylor" shoe. So I'll click "Edit" on the search result. The card will go into Edit mode.

Here I can update any field now, including dates with a nice date picker. I'll update my price and click "Save". That's it! Easy! My price is now updated.

Now I want to add a new shoe. If I were using the Firebase console, I would add a new item to my collection, then enter each field name and value again, a bit cumbersome. In Firedrill, I can just clone an existing shoe and update the values.

On any search result item, click "Clone" and a new item will be added to the results in Edit mode:

Now update the value(s) and click "Save". Boom! New shoe. Much easier.

Awesome, I can add and edit stuff with ease. Now I want to Delete some items. No problem! Just click on the Cards to select them, once selected, you'll see a Delete link.

Now click the "Delete" link you see above. Poof! Gone! (Yeah, be careful).

So now I'd like to Export my shoes into CSV (Spreadsheet) format so I can run some spreadsheet functions or just have it in a format that is common to other tools, like Tableau or something to visualize the data. Or I could just Export to have an easy starting point for Importing bulk data. Easy! Just click the "Export" link.

Boom! Exported. Now I want to Import lots of shoes from some other data source. I can mass copy or export that other datasource into CSV. Once I have a CSV to import, just click "Import"

So here is my spreadsheet data. Let's import this.

Click the "Import" link and browse to your csv file and select it. Boom! Imported!

So I've showed you how easy it is to manage your Firebase data with FireDrill. Give it a shot. If you encounter any issues, please log them here FireDrill Issues.

If you have more ideas, or you would like to become a contributor, let me know!

Introducing FireDrill - Power tools for Firebase

Scott Lepper — Thu, 27 Sep 2018 15:32:05 +0000

Firebase rocks! We devs can create apps faster than ever, not having to worry about setting up and maintaining back end infrastructure.

The challenge I found with Firebase was using the Firebase console to find data. Also adding/modifying data in the console is a bit cumbersome.

To overcome these challenges, I've created FireDrill

Let's check it out!

First we need to connect to our database. The easiest way is to open your Firebase project, then click the Gear and "Project Settings":

Now scroll down and select "Add Firebase to your Web App":

Highlight the section you see below and Ctrl-C (don't use the Copy button)

You will also need to add firedrill-74829.web.app as an Authorized domain. On the left under Develop click Authentication. Then choose "Sign-in Method", then scroll down to "Authorized domains" and click "Add Domain". Enter "firedrill-74829.web.app" as your domain.

Now open FireDrill. On the Connect page click the JSON tab and paste your connection info. The default database type is "Firestore" but you can change this to "Realtime" depending on your database type. When ready click the Connect button.

You are connected! Now you need to sign in. You can use your email or sign in with Google (if you have enabled Google authentication in Firebase). You can skip this step if you haven't secured your data.

OK! We are ready to start drilling!

On the Drill screen you see a "Path" input. Here you can enter a Collection name.

I have a Collection called "shoes". I'll type "shoes" and click "Drill".

Great I found my shoes. Notice the limit at the right of the Drill button is 10. You can adjust the limit to your liking. You may also notice all the values are links. This allows quick filtering. I'll click the Brand "Jordan" on the first result.

So I was able to quickly filter down to only "Jordan" shoes. This is nice for quick filtering, but I want more advanced filtering, like date range or price range. No problem.

Let's open the filters drawer. I'm going to click the "Show Filters" link you see above the results. Now the drawer opens and I can choose a field to filter on.

I'm going the select the "price" field and the "Between" type, then add 100 as the Start and 150 as the End price and click "Apply". Now I see only items within that price range. This also works for date fields.

We can also use "Greater Than", "Less Than" or "Equals" as the Type.

Now I want to see the highest prices first. No problem. On the right click the "Sort" link and click the "price" field. It sorts in ascending order first (notice the icon next to the field). Just click "Sort" again and click the "price" field again. It will now be in descending order. Notice the icon changed pointing downward.

And we can see our results are now sorted by highest price first:

So I've shown how you can use FireDrill to quickly find your data in Firebase. I've also shown how you can use range filters and how you can sort your data. In the next article, I'll show you how you can quickly edit and manage your Firebase data. Stay tuned!

In the meantime, try FireDrill out for yourself. If you encounter any issues, please feel free to report them here: FireDrill Issues. Thanks and happy drilling!

Creating a Search app with Vue.js + Parcel + TypeScript: Part 3 of 3

Scott Lepper — Sun, 24 Jun 2018 17:43:38 +0000

In Part 2 we added bootstrap-vue and set up a basic layout for a search app. Now we will create components and fetch/display our search results.

In Part 2 we put all our html in our app component. This provided a quick prototype to view our layout, but a real working app will have separate components. Some advantages of separate components are to encapsulate the complexity of each component and in some cases provide reuse of components.

Here is the original template from our app component:

<template>
  <div id="app">
    <b-navbar toggleable="md" type="light" variant="light">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand href="#">Zerch</b-navbar-brand>
    </b-navbar>
    <div class="container-fluid">
      <div class="row mx-auto">
        <!-- Search input section -->
        <section class="col-sm-12 pt-3 px-0">
          <b-form inline class="d-flex justify-content-center">
            <!-- Bug in bootstrap-vue - need div around input or button disappears -->
            <div class="col-md-6 col-8 pl-0">
              <b-input class="w-100 mr-sm-2" type="text" placeholder="Enter Search Term"/>
            </div>
            <b-button class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-form>
        </section>
        <!-- Results section -->
        <section class="results">
          <div class="card-columns">
            <div class="card">
              <img class="card-img-top" src="https://dummyimage.com/mediumrectangle/222222/eeeeee" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </section>
      </div>
     </div>
  </div>
</template>

Our new app component will now look like this:

<template>
  <div id="app">
    <b-navbar toggleable="md" type="light" variant="light">
      <!-- <b-navbar-toggle target="nav_collapse"></b-navbar-toggle> -->
      <b-navbar-brand href="#">Zerch</b-navbar-brand>
    </b-navbar>
    <div class="container-fluid">
      <div class="row mx-auto">
        <!-- Search input section -->
        <section class="col-sm-12 pt-3 px-0">
          <vs-input @search="onSearch"></vs-input>
        </section>
        <!-- Results section -->
        <section class="results">
          <vs-results :data="results"></vs-results>
        </section>
      </div>
     </div>
  </div>
</template>

Notice we now have vs-input and vs-results tags. Lets create these new components.

We'll create a file called vs-input.vue and add the following code:

<template>
  <b-form inline class="d-flex justify-content-center">
    <!-- Bug in bootstrap-vue - need div around input or button disappears -->
    <div class="col-md-6 col-8 pl-0">
      <b-input v-model="term" class="w-100 mr-sm-2" type="text" placeholder="Enter Search Term"/>
    </div>
    <b-button class="my-2 my-sm-0" @click="search()">Search</b-button>
  </b-form>
</template>

<script lang="ts">
  import { Component, Vue, Provide } from 'vue-property-decorator'
  @Component
  export default class VsInput extends Vue {
    @Provide()
    term = '';
    search() {
      this.$emit('search', this.term);
    }
  }
</script>

So what is this component doing? Capturing input for our search and providing an event to the app component to indicate the user wants to search.

b-input element contains the v-model directive. This will bind the input to the "term" variable
b-button element has the @click directive to fire the "search" function on click of the button.
In our script tag we have our typescript code to declare the term variable and the search function. The search function just emits an event with the term, so the app knows when to perform the search.

Now let's create a results component to show our results. Add a new file called vs-results.vue with the following code:

<template>
  <div class="card-columns" >
    <div class="card" v-for="item in results" :key="item.id">
      <img v-if="item.thumb" class="card-img-top" :src="item.thumb" :alt="item.title" @error="error(item)">
      <div class="card-body">
        <h5 class="card-title">{{item.name}}</h5>
        <p class="card-text" v-html="truncate(item.description || item.abstract, 50)"></p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from 'vue-property-decorator'

@Component
export default class VsResults extends Vue {

  @Prop()
  data;

  get results() {
    return this.data;
  }

  truncate(text, limit) {
    text = text === undefined ? '' : text;    
    const content = text.split(' ').slice(0, limit);
    return content.join(' ');
  }

  error(item) {
    delete item.thumb;
    this.$forceUpdate();
  }
}
</script>

Let's first focus on the html above:

v-for will iterate over our results array, which is passed in from the app component, as we will see later.
The img tag uses the v-if directive to conditionally display a thumbnail, which is bound to the item.thumb property of our search result item.
The card title is bound to item.title
The card body is bound to item.description or item.abstract. Note here we use the v-html directive since this content may be html and we want to render it as html not just text. We also call a truncate method to keep the text limited.

Now let's look closely at the typescript code:

We have a property called data. The app component will pass this in.
We have a computed function called results. This is what we reference in our template v-for to iterate over the results.
The truncate function will keep our description limited to 50 words.
The error function will handle result images that fail to download. This is reference on our img element with the @error directive.

The app.vue component needs to be changed now to handle the event from the vs-input component, perform the search, then pass the results to the vs-results component:

<template>
  <div id="app">
    <b-navbar toggleable="md" type="light" variant="light">
      <!-- <b-navbar-toggle target="nav_collapse"></b-navbar-toggle> -->
      <b-navbar-brand href="#">Zerch</b-navbar-brand>
    </b-navbar>
    <div class="container-fluid">
      <div class="row mx-auto">
        <!-- Search input section -->
        <section class="col-sm-12 pt-3 px-0">
          <vs-input @search="onSearch"></vs-input>
        </section>
        <!-- Results section -->
        <section class="results">
          <vs-results :data="results"></vs-results>
        </section>
      </div>
     </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from 'vue-property-decorator'
import VsResults from './search-results/vs-results.vue';
import VsInput from './search-input/vs-input.vue';
import voyagerApi from './search-results/search-api';

@Component({
  components: {
    VsResults,
    VsInput
  }
})
export default class App extends Vue {

  @Provide() 
  results = [];

  async onSearch(term) {
    this.results = await voyagerApi.search(term);
  }
}
</script>

Notice in the template above the vs-input uses the @search directive to bind the onSearch function. This will fire our onSearch function above when vs-input emits the event.
The onSearch function will call an api to fetch results. We'll look at this next.
Also notice in the template the vs-results :data attribute. This is where the app component will pass the results variable to the vs-results component.

Almost done. Notice above we import voyagerApi. We need to create that. Add a file called search-api.ts with the following which will fetch search results from a solr index.

export default {
  search: async function(term: string): Promise<Array<any>> {
    // solr endpoint
    const host = 'http://voyagerdemo.com/';
    const path = 'daily/solr/v0/select';
    const fields = 'id,name:[name],thumb:[thumbURL],abstract,description'; // fields we want returned
    const api = `${host}${path}?q=${term}&fl=${fields}&wt=json&rows=20`;
    const call = await fetch(api);
    const json = await call.json();
    return json.response.docs;
  }
}

The code above defines an "api" which is the url to a solr index. The fields define which fields we would like returned. The q param passes the "term" the user input and wants to filter the results on. We use the built in "fetch" function to make an ajax call to the api and "await" the results which is a Promise.

You may also notice the search function is an async function. This allows us to use await to make the code appear more synchronous, rather than using Promise.then() syntax.

That's it! Now if you check the browser you should be able to enter a search term and click "Search" an see something like:

If something went wrong you can grab the full working version from here: https://github.com/scottlepp/search-vue-parcel-typescript/tree/final

Creating a Search app with Vue.js + Parcel + TypeScript: Part 2 of 3

Scott Lepper — Fri, 22 Jun 2018 12:54:12 +0000

In Part 1 we setup basic tooling (vue, parcel and typescript) to develop the app. Here we will add one more tool, bootstrap, to layout our app and make it look more professional and responsive.

Step 1. Add bootstrap-vue to our project - from your terminal:

npm install bootstrap-vue --save

Step 2. Import bootstrap vue components and css

open main.ts and add the following after line 2:

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);

Step 3. Add a simple Navbar

Open our app.vue file. Under div id="app" paste the following:

    <b-navbar toggleable="md" type="light" variant="light">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand href="#">Zerch</b-navbar-brand>
    </b-navbar>

Here we've used the b-navbar component from bootstrap-vue. See navbar for more details.

Step 3. Add our search input and results.

Here we're going to add a section with an input with a search button, then a section for the results. This is temporary just to check our layout. Later we will convert these sections into components. Add the following below our navbar:


    <div class="container-fluid">
      <div class="row mx-auto">
        <!-- Search input section -->
        <section class="col-sm-12 pt-3 px-0">
          <b-form inline class="d-flex justify-content-center">
            <!-- Bug in bootstrap-vue - need div around input or button disappears -->
            <div class="col-md-6 col-8 pl-0">
              <b-input class="w-100 mr-sm-2" type="text" placeholder="Enter Search Term"/>
            </div>
            <b-button class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-form>
        </section>
        <!-- Results section -->
        <section class="results">
          <div class="card-columns">
            <div class="card">
              <img class="card-img-top" src="https://dummyimage.com/mediumrectangle/222222/eeeeee" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </section>
      </div>
     </div>

Now in your browser you should see:

If something went wrong, you can get the full working version here: https://github.com/scottlepp/search-vue-parcel-typescript/tree/part-2

Our layout is set! In Part 3 we separate the sections into components and create a working app fetching results from a solr index.

Creating a Search app with Vue.js + Parcel + TypeScript: Part 1 of 3

Scott Lepper — Tue, 19 Jun 2018 21:41:54 +0000

In my previous article here I showed how to "watch" an AWS S3 bucket for changes and update our search index real-time. Now lets write an app to show our search results using: vue.js, parcel, typescript and sass

Part 1: App setup

In this part, I'll show how we can quickly get our app set up thanks mostly in part to parcel.js: https://parceljs.org/

Prerequisite: Install Node.js: https://nodejs.org/en/

What we'll install:

parcel - our "zero configuration" bundler
vue.js - our ui framework
typescript - our coding language we'll use here
sass - our styling language

Let's get ready to rock.

Step 1. Create a local directory to put your project (I'll assume you know how).

Step 2. Install Parcel

open a terminal/command prompt and cd to your new directory
paste or type the following: npm install -g parcel-bundler

Step 3. Setup dependencies. Create a package.json file in your new folder. This defines all of our dependencies. Parcel can attempt to do this for you (though it didn't quite work for me). Instead here is the file you need. Just copy the contents into your new package.json:

Step 4. Install dependencies. Run the command: npm install

Step 5. Add entry point.

5.1 Add index.html file as below
- div id="app" is the "main" element (top level component of the component hierarchy)
- script tag references our main.ts which sets up our Vue app as we will see

5.2 Add main.ts file (this will reference our div id="app" element). This initializes Vue.

5.3 Add App.vue file. ".vue" files are called "single file components" where we can put the html, javascript, and css all in one file. I prefer separating concerns so I'll show an alternative approach.

As we see above, we're importing our typescript from a separate file. This has some advantages on larger components:

If I need to change the javascript code, I don't have to scroll through the html
In regards to "clean code" this feels cleaner to me keeping html, javascript and styling in separate files.

For smaller components, doing it all inline seems perfectly acceptable. Again, it's really just a matter of preference.

5.4 Add our typescript file: app-class.ts (app.ts and App.vue seem to collide in the bundler so I name the ts files [component]-class.ts to avoid collision)

As you probably noticed, I'm using "vue-property-decorator" which allows annotation of our class properties. This will come in handy later.

Step 6. Run it! Run the command: parcel index.html

Done! Open your browser at: http://localhost:1234/

If it didn't work for some reason you can clone the full project here: https://github.com/scottlepp/search-vue-parcel-typescript

In Part 2 we'll layout our app and add a popular css framework: bootstrap. Bootstrap will make our app look professional and responsive.

Http Request with AWS Lambda, Node.js 8.10, and Standard http library

Scott Lepper — Sun, 10 Jun 2018 16:44:58 +0000

In my previous article I showed an approach to extend a "traditional" (monolithic architecture) app using AWS Lambda: https://dev.to/scottlepp/extending-traditional-software-with-serverless-microservices-442m

Let's take a closer look at the Lambda function and how to make an http request using Node.js 8.10 and the standard http library.

In previous versions of node.js, the handler function contained a callback argument like so:

exports.handler = function (event, context, callback) {

And when your http request finished you would execute the callback to indicate the function was finished:

const req = http.request(options, (res) => {
   callback('Success');
});

And yet even older version of node.js didn't have a callback function, instead you would use "context.succeed" like so:

const req = http.request(options, (res) => {
   context.succeed();
});

However, in node.js 8.10 this has changed. The callback argument is again not needed. Now you just wrap your function returning a Promise. Then instead of executing the callback function, you execute the Promise resolve function (or reject function if it fails) as so:

const http = require('http');

exports.handler = async (event, context) => {

    return new Promise((resolve, reject) => {
        const options = {
            host: 'ec2-18-191-89-162.us-east-2.compute.amazonaws.com',
            path: '/api/repos/r1639420d605/index?delta=true&clear=false',
            port: 8000,
            method: 'PUT'
        };

        const req = http.request(options, (res) => {
          resolve('Success');
        });

        req.on('error', (e) => {
          reject(e.message);
        });

        // send the request
        req.write('');
        req.end();
    });
};

That's it! These changes between versions of node.js tripped me up a bit so I wanted to share the latest method. Hope this helps someone!