DEV Community: Scott Lepper

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!

Extending Traditional Software with Serverless Microservices

Scott Lepper — Sun, 10 Jun 2018 15:10:39 +0000

So we have “traditional” software running on an AWS ec2 instance. It’s awesome, but now we want new features added. Here’s some traditional approaches:

If we purchased the software (or open source), we have to request these features and hope they make the next release, then we have to wait for the next release.
If we developed the software using a traditional approach, we have to add the features and go through a rigorous release process, regression testing, etc.

Luckily we now have another option: Microservices. Great, but now I have to deal with deploying those: using containers, something like Kubernetes for orchestration, auto scaling, cost of more ec2 instances, etc. Eh...it seems like a hassle.

Luckily we new have yet another option: Serverless Microservices. We can do it quickly and without any hassle, and only get charged when we use them. Let’s dig in to a real scenario.

Scenario: We’re running enterprise search software on ec2. We can index data from pretty much any datasource with this software, so all of our enterprise content is easily searchable, including our S3 buckets where we put much of our content. This is great, but when something is added to S3 we want it to show up in our search results right away. The software doesn’t support “watching” S3 for changes. What do we do?

Thankfully the software has lots of REST apis, including an api to perform a “scan” on a repository and pick up the changes. Perfect! This makes it super easy! In a matter of minutes, we can add a Lambda Function that calls our REST api on our ec2 instance. S3 allows us to trigger our new Lambda Function when anything is added to our Bucket. Voila! We have our new S3 “watch” feature...and it’s a self contained Microservice. No traditional full release process/regression testing needed!

Let’s do this! This will only take a few minutes!

Let’s assume we’re already using AWS, our “traditional” software is already running on ec2, and it’s connected to an S3 bucket we already created. We’re just going to add our new “watch” feature using an AWS Lambda Function.

Step 1: Add a Lambda Function

Select - Services > Compute > Lambda

Click Create Function

Create your Function. We’re going to use Node.js because I love the idea of one language for the full stack, no language context switching, increased productivity, etc (but that is another story).

Before Create see the next screenshot to choose your Role.

Choose your Role and click “Create function”

Add a Trigger to your Lambda Function

Add your Javascript code to call the REST api.

This is performing a simple HTTP PUT to our ec2 instance running our “traditional” software which will Scan our S3 Repository for changes and Index only the changes so the new content is searchable.

Here we’ve hardcoded the http options for simplicity sake, but we could also easily make these environment variables.

See full code here (it’s only 20ish lines of code without the AWS handler wrapper function): https://gist.github.com/scottlepp/0a12873095336c9cc1f0fa296c3581ef

Save it. That’s it!

Now let’s test it.

Step 1. Configure a new test event

Step 2. Choose event template and Create

Step 3. Run it! It works! Optional: Click the “logs” link to confirm/see what was logged.

Now let’s really test it by manually adding something to our S3 Bucket and check the results.

Choose Services > S3 and choose your bucket (assuming you know this part since you have a bucket).

Confirm

I’ve uploaded the files above and more. Let’s hit our ec2 instance and see if we get them in our search results. Note: You’ll need to install the enterprise search software on your ec2 instance to do this step. You can get an eval here: http://www.voyagersearch.com/download-trial

Yes! The documents are now searchable!

We’ve successfully added a new feature without touching the software source code! Serverless functions are a game changer allowing us to build software with a completely new architecture, or as we’ve seen here, a hybrid approach to add new features to software built using a traditional approach. If you can’t just scrap all the hard work put in to your software and start over (which most can’t), this is a nice alternative to start migrating toward a microservices architecture.