DEV Community: Matthias

Reduce the size of your NodeJS docker images by a multiple

Matthias — Tue, 03 Aug 2021 17:42:10 +0000

Docker is a great tool to quickly generate and deploy containers for your NodeJS application to different platforms. But if you have checked the size of your final container image, you may have noticed that the image can get pretty heavy. Several hundred MB up to over one GB are not uncommon.

This memory size can lead to different problems. First of all, your docker images will consume a lot of disk space on your machine. The second problem is that downloading the image from a registry like docker hub can take quite some time, depending on your network connection. This problem gets even worse for uploading your image since your upload bandwidth is usually multiple times smaller than your upload bandwidth.
As you can see, there are many reasons to keep your docker images as small as possible. In this article, I will show you how to reduce the size of your docker images using different techniques.

Prerequisites

For this tutorial, you will need to have the following programs installed on your machine:

Getting started

We will use a basic AdonisJS app for this article and package it inside a docker image.
First of all, we create the AdonisJS app running the following command and answering the prompts. As for the project structure, we will select the web project structure.

npm init adonis-ts-app@latest hello-docker-world

Next, we can go to the hello-docker-world directory and test our new app by running

node ace serve --watch

After that, you can open localhost:3333 in your favorite browser and should see your new test application.

Now we can start packaging our application into a docker image. Therefore, we first create a new file called Dockerfile inside our project directory and paste the following snippet into the file.

FROM node:14
WORKDIR /myapp
COPY . .
RUN npm install && node ace build --production
CMD node build/server.js

This will pull the node base image from the docker registry, change the working directory to /myapp, and copies the content of your local project directory to the image working directory. After that, it will run npm insall to install the project dependencies and build the app for production. When the container image gets executed, the CMD command will be executed inside the container, starting our webserver.

Now that we know what the Dockerfile does, it's time to build our image. Therefore we execute the following command inside our project directory.

docker build -t adonisjs:full .

This will look up the instructions from the dockerfile in the project directory, build the image based on the instructions, and tag the resulting image as adonisjs:full.

After that, you can list your images by executing

docker image ls

and you will see your newly created image with its size. In my case, it was 1.13 GB which is quite heavy.

REPOSITORY    TAG           IMAGE ID       CREATED         SIZE
adonisjs      full          8c35e9442e40   2 minutes ago   1.13GB

This is because the node:14 is based on Debian stretch whit a lot of packages, resulting in the given image size.

One approach in reducing the size of our docker image is instead of using the node:14 stretch image using the node:14-alpine base image. This image is based on Alpine Linux, a minimal Linux and much smaller than other base images.

To use the new base image, we update our Dockerfile with the following snippet.

FROM node:14-alpine
WORKDIR /myapp
COPY . .
RUN npm install && node ace build --production
CMD node build/server.js

After that, we run

docker build -t adonisjs:alpine .

which will again build an image from our project but this time based on the Alpine base image and tag it adonisjs:alpine.

When you now list your docker images using docker image ls, you will see your new image, which is much smaller than the first image. In my case, the new image has only 303MB, which is less than a third of the previous image.

REPOSITORY    TAG           IMAGE ID       CREATED         SIZE
adonisjs      full          8c35e9442e40   2 minutes ago   1.13GB
adonisjs      alpine        43e7a8874973   4 minutes ago   303MB

But we can get the image even smaller and save more space with the following approach.

Multi-stage builds

At the moment, the entire content of your project folder is copied inside the image, and the project dependencies are installed. After that, your image contains all project related files, but not all of them are needed for production. For example, you won't need your source files, and also your dev-dependencies don't have to be included in your production image.

To solve this problem, you can use multi-stage builds. First, we will again update our Dockerfile using the following snippet.

FROM node:14-alpine AS build
WORKDIR /myapp
COPY . .
RUN npm install && node ace build --production

FROM node:14-alpine
COPY --from=build /myapp/build /build
CMD node build/server.js

Again, this will use the node:14-alpine image as base image but name it as build. As in the previous steps, we will copy and build our application but won't finish after these steps. As you can see, after building the application, we use a fresh base image and copy only the generated build directory from our previous build image to the new image, which will become our new production image.

Using this approach, we can have a full build environment with all necessary dependencies. Still, when it comes to shipping the production image, we can use a minimal base image and only the generated files we need for executing our application.

Now you can again build and tag your image using the following command

docker build -t adonisjs:multistage .

and list all your images by executing docker image ls.
You can see, the size of the resulting image decreased again, in my case, by almost a third to 117MB.

REPOSITORY    TAG           IMAGE ID       CREATED         SIZE
adonisjs      full          8c35e9442e40   2 minutes ago   1.13GB
adonisjs      alpine        43e7a8874973   4 minutes ago   303MB
adonisjs      multistage    6f91568fbe8f   6 minutes ago   117MB

As you can see, multi-stage builds helped us to decrease the size of our final docker image by almost ten times, which will save a lot of resources and time while storing or up-/ downloading the image.

If you want to read more about multistage-builds, see the official docker documentation here

I hope you enjoyed the article and happy coding 🧑‍💻

Create your own iOS widget with JavaScript

Matthias — Tue, 26 Jan 2021 15:58:28 +0000

What we will build

We will create our own iOS widget with pure JavaScript. To achieve this, we will use a great app called Scriptable. With Scriptable, you can create JavaScript scripts and run them on your iOS device. You can use these scripts to automate different things on your device and also display the script in an iOS home screen widget.
The main goal of this tutorial is to provide a starting guide for creating Scriptable widgets. Therefore we will build a simple widget to learn the basics and some useful tricks for building Scriptable widgets. The created widget will display the next scheduled launch date of SpaceX, as shown in the image below.

Prerequisites

Some basic knowledge of JavaScript will be helpful but is not necessary. As previously mentioned, we use the Scriptable app for creating our widget, so you have to install it on your device.
For easier development and testing on macOS, I recommend the Scriptable desktop app (beta).
An alternative is syncing your scripts using iCloud and edit the Scripts inside the iCloud folder on your desktop, which should also work on other operating systems. This allows you to edit the script in your favorite text editor and test it on your iOS device.

Creating the widget

Now we are all set up to start creating our widget.
First of all, create a new empty script and add the following snippet.



async function createWidget() {
  // Create new empty ListWidget instance
  let listwidget = new ListWidget();

  // Return the created widget
  return listwidget;
}

let widget = await createWidget();

// Check where the script is running
if (config.runsInWidget) {
  // Runs inside a widget so add it to the homescreen widget
  Script.setWidget(widget);
} else {
  // Show the medium widget inside the app
  widget.presentMedium();
}
Script.complete();

This snippet adds a new function for creating and returning a new widget instance. In the next step, the widget will be created and set if the script is executed inside a home screen widget. If the script runs inside the Scriptable app, it will display a preview of the widget.
The preview is handy because the widgets don't refresh immediately. In contrast, the preview is always up to date when you run the script.
If you run the script inside the app, you should now see an empty white square. 🎉🎉

Adding Content

Now that we can run a basic widget, let's add some content. The widget layout is based on stacks that hold the different displayed elements. The stacks can be nested into each other. By default, a ListWidget stacks its content vertically, which can be changed if you want it.

Tip #1
When you want to debug more complex layouts, add a colored border to your elements so you can easily detect its size and position.

First we will set the background color and after that we add some heading to our widget and give it some styling. Therefore paste the following snippet inside the createWidget() method after the new ListWidget();.



  // Set new background color
  listwidget.backgroundColor = new Color("#000000");

  // Add widget heading
  let heading = listwidget.addText("🚀Next🚀");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#ffffff");

  // Spacer between heading and launch date
  listwidget.addSpacer(15);

To set the background color, we set the backgroundColor property of the created list widget instance. We assign a new color with the hex value #000000, which will give us a black background.
After that, we add a new text to our widget and save it in the heading variable. Using the variable, we can now access the added text and give it some styling. In our case, we will align the text center, change the default font and give it a white text color. If you are interested in the different options for the text and the other supported fonts, please visit the WidgetText and the Font documentation of scriptable.
Lastly, we add some spacing between our created heading and the next element, which will be our launch date.

Getting the data

To display the next scheduled launch date, we have to fetch our data from the API. Therefore we will use the following API Documentation spacexdata.com API.

⚠️ Sidenote ⚠️
If you use an API that requires an API key or secret, never share your script with the key inside. Every other person could use the API with your access if the key gets public, e.g. on GitHub. Always store the key in a variable at the beginning of your script to easily find and remove it before sharing. Even better, don't hard code the key and instead pass it as an argument to your script.

To fetch the data from the api we will add the following two new functions to our script.



async function getNextLaunch() {
  // Query url
  const url = "https://api.spacexdata.com/v4/launches/next";

  // Initialize new request
  const request = new Request(url);

  // Execute the request and parse the response as json
  const response = await request.loadJSON();

  // Return the returned launch data
  return response;
}

function getLaunchDateTime(launchData) {
  // Parse launch date to new date object
  const launchDateTime = new Date(launchData.date_utc);
  return launchDateTime;
}

The first function sends a request to the specified URL and parses the response as JSON, which will then be returned. The second function is just a little helper that will extract the date string from the provided dataset and return it as a date object.
Now we can call the previously defined functions inside createWidtet() to fetch the data from the api and get the launch date. Therefore simply add the following lines inside the createWidtet() function after the listwidget.addSpacer()



  // Fetch next launch date
  let launch = await getNextLaunch();
  let launchDateTime = getLaunchDateTime(launch);

Displaying the fetched data

Now that we have fetched our API data, we need to display it inside our widget. To achieve this, we create two new functions that will add our text to the widget and apply some basic formatting to it.



function addDateText(stack, text) {
  let dateText = stack.addText(text);
  dateText.centerAlignText();
  dateText.font = Font.semiboldSystemFont(20);
  dateText.textColor = new Color("#ffffff");
}

function displayLaunchDateTime(stack, launchDateTime, precision) {
  // Check if next launch date is precise enough and display different details based on the precision
  if (precision == "hour") {

    // Add launch date
    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
    let datestring = launchDateTime.toLocaleDateString(undefined, dateOptions);
    addDateText(stack, datestring);

    // Add launch time
    const timeOptions = { hour: "numeric", minute: "numeric" };
    let timestring = launchDateTime.toLocaleTimeString(undefined, timeOptions);
    addDateText(stack, timestring);
  } else if (precision == "day") {

    // Add launch date
    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
    let datestring = launchDateTime.toLocaleDateString(undefined, dateOptions);
    addDateText(stack, datestring);
  } else {
    addDateText(stack, "No day for next launch given");
  }
}

The addDateText() function gets an instance to which the function should add the text and a string that holds the text which should be displayed. After that, the function adds the given text to the given stack and applies some styling to the element.

Tip #2
If you want to display some text with a variable length, you can add a minimumScaleFactor() between 0 and 1 to the text. This specifies the amount the text will scale down to fit inside the widget.

The displayLaunchDateTime() function is a bit more complex. It gets the instance to which the text should be added, the DateTime instance which should be displayed, and a precision parameter. The precision is sent with the API response of the next launch. It determines how precisely the launch time is known, which we will use to decide if we only display the day or also the time of the launch.
Inside the displayLaunchTime() function, we check the given precision. Based on that, we apply the correct format to our Date instance and add it to the stack by calling addDateText(). If the next launch date is not known precisely enough, we display a message that the next launch day isn't known yet.

Now inside our createWidget() function we can call the displayLaunchDateTime() function and pass our listwidget instance, the created date and the precision from the API response to display the data. The final createWidget function is shown below.



async function createWidget() {
  // Create new empty ListWidget instance
  let listwidget = new ListWidget();

  // Set new background color
  listwidget.backgroundColor = new Color("#000000");

  // Add widget heading
  let heading = listwidget.addText("🚀Next🚀");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#ffffff");

  // Spacer between heading and launch date
  listwidget.addSpacer(15);

  // Fetch next launch date
  let launch = await getNextLaunch();
  let launchDateTime = getLaunchDateTime(launch);

  // Add the launch time to the widget
  displayLaunchDateTime(listwidget, launchDateTime, launch.date_precision);

  // Return the created widget
  return listwidget;
}

Add it to your home screen

To display the widget on your home screen, you need to create the script inside the Scriptable app (you can find the final script in the Gist below). After that, add a new small Scriptable widget to your home screen, which should give you an empty widget. Now you can long-press the widget, edit the widget and select your created script in the widget configuration.
That's it you should now see your created widget on your screen. 🚀🚀

I hope you enjoyed this little tutorial. Feel free to write to me if you encounter any issues or want to suggest some additional topics about which I should make a tutorial.

Happy coding 👨🏼‍💻

Unofficial dev.to iOS widget

Matthias — Sun, 27 Dec 2020 18:49:46 +0000

Since version 14 iOS supports different home screen widgets which can display different useful information for your installed apps.
Wouldn't it be cool if you can create your own widgets to display some custom information? Good news, with the great Scriptable iOS app you can create your own scripts and widgets for iOS using pure javascript.

The widget 📱

Reading some dev.to articles are an integral part of my daily routine, so I thought wouldn't it be cool if I get a random article directly on my home screen.

So I made a little script which fetches a random article out of the top ten articles of the day on dev.to based on the tags I have subscribed to.
After that, the article details like title, author, profile image and tags are displayed in a medium-sized widget. You can see the final widget in the following image.

Get the widget 🚀

If you want the widget on your home screen you will need to download the Scriptable iOS on your device. After that, you can create a new script inside the app and copy and paste the code from the following gist into your created script.

To fetch the dev.to articles you need to generate an API key in your dev.to settings and paste it at the beginning of the created script.
Now you can preview the widget by starting the script inside the Scriptable app.

Finally, you can add the widget to your home screen by adding a medium-sized Scriptable widget, after that you can configure the widget by long-pressing the empty widget and then choose the newly created script in the widget configuration.

I hope you like my widget, feel free to write to me if you encounter any issues or want to suggest some improvements.