DEV Community: Derek Gavey

Zip your own Netlify functions for better dependency control

Derek Gavey — Sun, 25 Oct 2020 22:53:53 +0000

When I was working on my side project Dedolist, which is mostly hosted on Netlify I started using Netlify functions. They are a really easy way to create small AWS Lambda functions.

In their simplest form you just created a file in your "functions" folder and they get deployed as a lambda function. Unfortunately I required a bit more control over the functions than the simplest case.

I needed:

To access a file locally that is deployed with the function.
Maintain the functions own dependencies that were not part of the main project.

It took a few hours and reading a lot of forum posts and sample projects, but I finally was able to figure it out. I'm hoping to save you some time by showing you the exact steps you need to take to accomplish this.

Netlify's build tools does try and smartly build your functions, however there are some scenarios where it may fail to find all the dependencies. There is also a limit to the size of the function that AWS lambda accepts (50MB) and this technique gives you more control over what is included in your final functions.

I have all the code for this demo in this repository. I'll point out some of the specific changes I made to deploy my bundled functions.

First off, in general the way to bundle your functions is you need to compress each function and all of it's dependencies in a single zip file. Just like the simplest form of Netlify functions, you can put each zip file in your functions folder and it will get deployed.

In order to be able to test your functions locally using netlify dev you need to be able to specify a separate folder for your "development" and "production" functions. It's easy to do that by changing your netlify.toml and adding environment specific configurations below.

#netlify.toml in root of project

[build]
  functions = "functions"

[dev]
  functions = "functions-dev"

As you can see above, new now specify two different folders for function in "build" and "dev". So now when you run netlify dev the functions can be modified in the functions-dev folder and you can test them there.

Now lets look at what a function in the "functions-dev" folder looks like. Take a look at the structure below for a function called "hello-dev".

functions-dev
  hello-dev
    node_modules
    package.json
    hello-dev.js
    .gitignore

Everything in the folder hello-dev will be zipped and become one lambda function. You can have multiple functions and even mix your single file functions with folder based ones.

For this example the package.json has a dependency for lambda-api. No other function will have this dependency only this one.

The magic is in the top level package.json file and the build commands. Let's look at each part of the build system.

"scripts": {
      "build": "NODE_ENV=production npm-run-all build:*",
      "build:static": "eleventy",
      "build:functions-install-dependencies": "cd functions-dev; for i in */; do cd ${i%/}; yarn; cd ..; done;",
      "build:zip-functions": "cd functions-dev; for i in */; do zip -r \"../functions/${i%/}.zip\" \"$i\"; done;",
      "build:copy-single-functions": "cp ./functions-dev/*.js ./functions",
      "dev": "eleventy --serve --quiet"
}

So "build" simply runs all the build steps and signifies the node production environment. This is the command that Netlify calls when building the production application.

"build:static" Is just the normal Eleventy build command, not part of the functions build step.

"build:functions-install-dependencies" does what is says. It enters into each folder and install the dependencies for each function.

"build:zip-functions" zips each folder into the production functions folder so Netlify knows to create it.

Finally "build:copy-single-functions" copies any single file lambda functions you might have.

You can see a working example from the repository on https://dgavey-netlify-functions-demo.netlify.app/.

There was a couple of strange issues I ran into with the Netlify CLI that should be noted.

It won't serve functions on a purely static site, so I included an extremely basic eleventy generator.
It won't allow access to functions in folders unless there is a build command in dev environment.

Hopefully this can help you get more control over the building of your functions with Netlify.

Cover photo by Tony Pham

Simple Drag and Drop in Ember Octane

Derek Gavey — Thu, 09 Apr 2020 02:05:35 +0000

This tutorial will show you how to implement a drag and drop interface in Ember Octane without the use of any addons. It does assume you have at least a basic understanding of Ember Octane.

I have had a lot of experience with the Javascript drag and drop API in the past. In fact, I even maintain the ember-drag-drop addon. Though I must admit that it is not very up to date anymore and to some extent with Ember Octane is not really needed as much as it was before.

First we are going to implement a very basic drag and drop. One of the big changes in Ember Octane that makes implementing a drag event easier is modifiers. In simple terms modifiers allow us to access native DOM elements and events in our templates.

First lets setup the template elements.

{{! simple-drag.hbs }}
<div class="dropZone">
    Drop Zone
</div>

<div class="dragMe" draggable="true">   
    Drag Me
</div>

As you can see we now have two simple div's. One for the drop area and one for the draggable element. The only thing here to notice is we have added the draggable attribute to the "drag me" element. This just notifies the browser that this div element is now draggable. You can only pass true or false to it.

Before the draggable element is active though, you are required to have a dragstart event attached to the element. Lets add that now.

{{! simple-drag.hbs }}
<div class="dropZone">
    Drop Zone
</div>

<div {{on "dragstart" this.dragHasStarted}} class="dragMe" draggable="true">   
    Drag Me
</div>

We are using the on modifier to attach to the dragstart javascript event. Here is the class for that component.

//simple-drag.js
export default class SimpleDrag extends Component {

    @action dragHasStarted() {
        console.log("Drag has started")
    }

 }

You can see that the dragHasStarted is an "action". You must decorate your function with action when using it with a modifier. The main reason for this is that it takes care of binding your event handler so you can access this and it will reference your component class.

Now if you drag your element it will have the default dragging behaviour in your browser.

To set up the drop events add to the component template and class the two required drag events drop and dragover.

{{! simple-drag.hbs }}
<div 
  {{on "drop" this.dropItem}} 
  {{on "dragover" this.dragOver}}
  class="dropZone">
    Drop Zone
</div>

<div {{on "dragstart" this.dragHasStarted}} class="dragMe" draggable="true">   
    Drag Me
</div>

//simple-drag.js
export default class SimpleDrag extends Component {

    @action dropItem(dragEvent) {
        dragEvent.preventDefault();
        console.log('Item dropped');
    }

    @action dragOver(dragEvent) {
        dragEvent.dataTransfer.dropEffect = "move";
    }

    @action dragHasStarted() {
        console.log("Drag has started")
    }

 }

In order for the drop event to fire it must also have a dragover event, so make sure you have one even if it does nothing. Two other things to note with this code.

The first is that we are accessing the native "event" in the dropItem function. We use it to preventDefault(). This is also important as after you drop an item it can trigger events on the drop target that you may want to avoid.

The second is in the dragOver function we are setting the dropEffect to "move". This tells the browser what kind of action we intend to take when the item is dropped. For more information see the MDN docs. Also, be careful with the dragover event as it fires multiple times per second so you don't want to do too much here.

Ok, this should now allow you to get console logs on start of drag and drop. Using those two event functions you should be able to implement most of the logic that you want the drag and drop action to perform.

There are a number of other drag events though. Lets take a look at the final full code that implements a few more events that give the user a more interesting interface and you more control over it.

{{! simple-drag.hbs }}
<div 
    {{on "drop" this.dropItem}} 
    {{on "dragover" this.dragOver}}
    {{on "dragleave" this.dropLeave}}
    {{on "dragenter" this.dropEnter}}
    class="dropZone {{if this.overDropZone "dropZone-over"}}"
    role="button"
>
    Drop Zone
</div>

<div 
    {{on "dragstart" this.dragHasStarted}}
    class="dragMe" 
    draggable="true"
    role="button"
>   
    Drag Me
</div>

<p>Drag Status: "{{this.statusText}}"</p>

//simple-drag.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class SimpleDrag extends Component {

    @tracked statusText = "";
    @tracked overDropZone = false;

    @action dragHasStarted() {
        this.statusText = "Drag has started";
    }

    @action dropItem(dragEvent) {
        dragEvent.preventDefault();
        this.statusText = "Drop Has Completed";
        this.overDropZone = false;
    }

    @action dragOver(dragEvent) {
        dragEvent.preventDefault();
        dragEvent.dataTransfer.dropEffect = "move";
    }

    @action dropLeave() {
        this.statusText = "Drag has left drop zone";
        this.overDropZone = false;
    }

    @action dropEnter() {
        this.statusText = "Drag is entered Drop Zone";
        this.overDropZone = true;
    }

 }

So we have added a few more events like dragenter and dragleave. These allow us to let the user know when they are over the drop zone by adding a class. We have also added a status text so you can see what events are firing and when.

You can try this final code out for yourself on this Ember Twiddle.
You can find the full project on github as well.

I haven't covered accessibility support in this tutorial, but that must be considered to make the drag and drop inclusive for all users. You will at a minimum want to add some keyboard event support.

In my next post we will take what we learned here and implement a sortable list. Follow along for more drag and drop and other Ember tutorials.

For more drag and drop event information visit the MDN docs.