DEV Community: Andrea Giammarchi

Using LiteFS with Bun on Fly.io

Andrea Giammarchi — Fri, 24 Feb 2023 06:57:30 +0000

Update
There is a repository to fork and try that simplifies this whole post, specially after latest development with Fly and Bun.

As neither Bun nor LiteFS are recommended for production yet, I’ve decided it was obviously a good idea to deploy “their synergy” on fly.io 😇

“… but why?” … well, this is why!

What’s Bun very good at:

it’s very fast at bootstrapping, making it ideal for lambdas cold and hot starts, together with docker based containers 🌟
it’s very fast at serving, making it an ideal runtime for anything cloud related (plus it’s TS/JSX compatible without extra tooling needed!) 🌈
it’s the fastest JS/TS runtime out there when it comes to SQLite 🦄 … as a matter of fact, bun has SQLite directly built and bound in its core so that it easily competes with any other typed PL with SQLite bindings 🚀

What’s LiteFS on Fly.io very good at:

it provides for free a whole GB of mounted filesystem that could host 1 to many SQLite databases (1GB is a lot of text!!!) 🤩
it can replicate and sync databases across the globe when/if needed (pay as you go or proper plan needed but we can start for free) 🥳
fly.io allows any Docker image, so that we can test both locally and deploy in production with ease 🤠

On top of that, the landscape around SQLite as hosted solution is nowhere nearly as simple and well done as it is for fly.io setup, which we’re going to check in details now!

The Project Tree

the litefs folder is used instead of the real mounted litefs path whenever we’re testing locally and/or not in production. Let’s just type mkdir litefs in the directory we’d like to use to test this setup via bun run start (or bun start or even npm start if node is present and bun available)
the .dockerignore file contains all possible stuff we shouldn’t push to docker
the Dockerfile contains the bun’s official alpine based docker image (it’s ~100MB in total 😍) plus a few commands to bootstrap the server
the fly.toml contains a mix of what scaffolding Nodejs and LiteFS prepared examples would look like
the litefs.js file handles the database connection as unique module entry point, plus some template literal based utilities
the package.json is used to provide a start command and optional dependencies
the serve.js file simply starts a server demo that show some welcome and all the rows in the dummy/example SQLite database

All files are going to be shown with their content too.

Before we start

The easiest way to scaffold a fly.io project is to use fly apps create, which will generate a unique YOUR_FLY_APP_NAME (see fly.toml later on) and it will give you indications of regions you can use to deploy your app, then you need to create your LiteFS volume, using your closest free allowed location.

P.S. use the LiteFS example if you don’t know where or how to start, as it’s been updated recently and it really works out of the box as a started (but it uses GO, which “can go” (dehihi) right after 😉

Once you’ve done that, each file in the list is mandatory and this is what I have as each file content:

.dockerignore

.git
litefs
node_modules
.dockerignore
bun.lockb
Dockerfile
fly.toml

Dockerfile

### GLOBALS ###
ARG GLIBC_RELEASE=2.34-r0


### GET ###
FROM alpine:latest as get

# prepare environment
WORKDIR /tmp
RUN apk --no-cache add unzip

# get bun
ADD https://github.com/oven-sh/bun/releases/latest/download/bun-linux-x64.zip bun-linux-x64.zip
RUN unzip bun-linux-x64.zip

# get glibc
ARG GLIBC_RELEASE
RUN wget https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub && \
    wget https://github.com/sgerrand/alpine-pkg-glibc/releases/download/${GLIBC_RELEASE}/glibc-${GLIBC_RELEASE}.apk


### IMAGE ###
FROM alpine:latest

# install bun
COPY --from=get /tmp/bun-linux-x64/bun /usr/local/bin

# prepare glibc
ARG GLIBC_RELEASE
COPY --from=get /tmp/sgerrand.rsa.pub /etc/apk/keys
COPY --from=get /tmp/glibc-${GLIBC_RELEASE}.apk /tmp

# install glibc
RUN apk --no-cache --force-overwrite add /tmp/glibc-${GLIBC_RELEASE}.apk && \

# cleanup
    rm /etc/apk/keys/sgerrand.rsa.pub && \
    rm /tmp/glibc-${GLIBC_RELEASE}.apk && \

# smoke test
    bun --version

#######################################################################

RUN mkdir /app
WORKDIR /app

# NPM will not install any package listed in "devDependencies" when NODE_ENV is set to "production",
# to install all modules: "npm install --production=false".
# Ref: https://docs.npmjs.com/cli/v9/commands/npm-install#description

ENV NODE_ENV production

COPY . .

RUN bun install

LABEL fly_launch_runtime="bun"

WORKDIR /app
ENV NODE_ENV production
CMD [ "bun", "run", "start" ]

fly.toml

app = "YOUR_FLY_APP_NAME"
kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[env]
  PORT = "8080"

[experimental]
  auto_rollback = true
  enable_consul = true

[mounts]
  source = "litefs"
  destination = "/var/lib/litefs"

[[services]]
  http_checks = []
  internal_port = 8080
  processes = ["app"]
  protocol = "tcp"
  script_checks = []
  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"

  [[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"

litefs.js

import {existsSync} from 'node:fs';
import {join} from 'node:path';
import {Database} from 'bun:sqlite';
import createSQLiteTags from 'better-tags';

// use mounted point on production, use local folder otherwise
const litefs = join(
  process.env.NODE_ENV === 'production' ? '/var/lib' : '.',
  'litefs'
);

// if litefs folder doesn't exist get out!
if (!existsSync(litefs)) {
  console.error('Unable to reach', litefs);
  process.exit(1);
}

// shared db + template literals  based utilities
const {db, get, all, values, exec, run, entries, transaction} =
        createSQLiteTags(new Database(join(litefs, 'db')));

export {db, get, all, values, exec, run, entries, transaction};

///////////////////////////////////////////////////////////////
// FOR DEMO SAKE ONLY - EXECUTED ON EACH DEPLOY
///////////////////////////////////////////////////////////////

// some table schema
exec`
  CREATE TABLE IF NOT EXISTS persons (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    phone TEXT NOT NULL,
    company TEXT NOT NULL
  )
`;

// some table entry
exec`
  INSERT INTO persons
    (name, phone, company)
  VALUES
    (${
      crypto.randomUUID()
    }, ${
      ('+' + (Date.now() * Math.random())).replace(/[^+\d]/, ' ')
    }, 'fly.io')
`;

package.json

{
  "name": "flying-bun",
  "description": "A Bun & LiteFS love 💘 affair",
  "type": "module",
  "scripts": {
    "start": "bun serve.js"
  },
  "dependencies": {
    "better-tags": "^0.1.2"
  }
}

serve.js

import {serve} from 'bun';

// grab the db or some utility
import {all} from './litefs.js';

// grab the port and start the server
const port = process.env.PORT || 3000;

serve({
  fetch(request) {
    const greeting = "<h1>Hello From Bun on Fly!</h1>";
    const results = `<pre>${JSON.stringify(
      all`SELECT * FROM persons ORDER BY id DESC`, null, '\t')
    }</pre>`;
    return new Response(greeting + '<br>' + results, {
      headers: {'Content-Type': 'text/html; charset=utf-8'}
    });
  },
  error(error) {
    return new Response("Uh oh!!\n" + error.toString(), { status: 500 });
  },
  port
});

console.log(`Flying Bun app listening on port ${port}!`);

Deploy Bun on LiteFS

That’s pretty much it, once you have a unique app name, a LiteFS mounted directory you can reach, and the provided code, you can either bun run start locally, maybe after a bun install or an npm install, and finally fly deploy to see your “hello bun” running from the cloud 🌤

If everything went fine, you should be able to reach https://YOUR_FLY_APP_NAME.fly.dev and see at least one record shown in the page.

Some metrics

The basic alpine image with just bun and glibc on it, plus the project files, should consume no more than 40MB of RAM out of the 232 MB allowed, but the cool part of fly.io is that we can always opt in for a pay as you go plan to scale CPUs, RAM, replicated databases, or increase the mounted DB size too with ease, whenever we’ll manage to reach 1 GB of mounted LiteFS file size limit. A detailed guide on how to manage fly volumes can be found here.

And That’s All Folks 🥳

Congratulations! You’ve learned how to deploy your next bun project on the cloud and with a free database solution that will host up to a GB for free and not limited to a single DB, so that separating concerns per DB is also a possibility (1 for IP geo-location, 1 for blog text, 1 for users to admin, 1 for …)

The most under-estimated part of SQLite as database, beside being the coolest embedded database that exists on earth, is that no secret user and password would ever leak, and fly.io mounted filesystems are also encrypted so that a whole class of security concerns is automatically removed from all equations and responsibilities for people sharing code, like I’ve just done in here 👋

About bitwise operations

Andrea Giammarchi — Fri, 08 Oct 2021 15:07:07 +0000

In 20+ years of programming, I've never needed to invert a binary tree except for that one time a silly interviewer asked me to do that for a web-related role. I have, however, encountered bitwise operations in hundreds of real-world situations. Incredibly enough, after the initial learning curve, I've never doubted that it was the right solution for these situations.

This post hopes to explain why bitwise operations are one of the best ways to actually reduce complexity and why they are so special!

Think like "strings", not numbers!

If we try to do decimal math with ones and zeroes, we won't likely understand bitwise operators or go too far ... so let's start with the basics:

// left shift operator:
// how many `0` after `1`?
const A = 1 << 0; // 00001
const B = 1 << 1; // 00010
const C = 1 << 2; // 00100
const D = 1 << 3; // 01000
const E = 1 << 4; // 10000

The key take here is that we don't really need to care about what number those "binary strings" represent, but if you really want to know, you can console.log(A, B, C, D, E) and figure it out, right? 😊

Also, remember, num.toString(2) will always produce the binary string representation, which is handy while exploring this field ... let's start now!

The AND and the OR

The binary math with these two is pretty simple:

// & is like boolean &&
0 & 0 ✖
0 & 1 ✖
1 & 0 ✖
1 & 1 ✔

// | is like boolean ||
0 | 0 ✖
0 | 1 ✔
1 | 0 ✔
1 | 1 ✔

As simple as that looks, we can already do amazing things with just these two operators!

Let's see how grouping works, as an example:

(A | B)
A       00001 |
B       00010 =
        00011

(A | C)
A       00001 |
C       00100 =
        00101

(A | B | D)
A       00001 |
B       00010 |
D       01000 =
        01011

A great feature to consider is that we can put together any combination, without ever caring about the order, so that (A | B | D) is always identical to (B | D | A), and to (D | A | B).

On top of that, we can easily check if a specific char is part of the group, using the & operator, which is true only if there is a 1 at the same position of one of the positions the group covers:

(A | B) & A

00011 &
00001 =
00001 ✔


(A | C) & B

00101 &
00010 =
00000 ✖


(A | B | D) & D;

01011 &
01000 =
01000 ✔


(A | B | D) & C;

01011 &
00100 =
00000 ✖


// multiple groups inclusion
(A | B | D) & (A | C);

01011 &
00101 =
00001 ✔

Congratulations, you've just learned how most permissions related logic works 🥳

Moreover, if each permission has a mask, adding another permission to a user/group would be an |= operation away.

user.permission = GUEST;

if (user.groups.has(developer))
  user.permission |= DEVELOPER;

... and because 101 | 101 will produce again 101, it's always safe to add a permission, without needing to check it was already there.

But how to remove a value from a group?

The XOR

This operator flips to 0 "columns" with the same value, producing 1 in all other cases.

// ^ is like a != comparison
0 ^ 0 ✖
0 ^ 1 ✔
1 ^ 0 ✔
1 ^ 1 ✖

While its nature looks awesome to "rotate" 0 and 1 around, it also does a good job at dropping values from a group:

(A | B) ^ A

00011 ^
00001 =
00010 B


(A | B | D) ^ D;

01011 ^
01000 =
00011 (A | B)


(A | B | D) ^ B;

01011 ^
00010 =
01001 (A | D)


// multiple groups removal
(A | B | D) ^ (A | D);

01011 ^
01001 =
00010 B

⚠ WARNING

As previously mentioned, an OR | operator doesn't need checks upfront to be performed, but an XOR ^ operator requires mandatory checks before a value can be removed from a group because otherwise it adds the value to the group itself!

// C was not in the group before
(A | B | D) ^ C;

01011 ^
00100 =
01111 (A | B | C | D)

The rule of thumb with XOR in a nutshell:

was it there? it'll go away
wasn't it there? it'll be added

Thinking about boolean operations, a unique digit XOR does what a ref = !ref does to a mutable, boolean, reference, and indeed it could be used as "toggle operator":

let toggle = 0;

// 0 ^ 1 === 1
if ((toggle ^= 1))
  console.log('true');

// 1 ^ 1 === 0
if (!(toggle ^= 1))
  console.log('false');

// 0 ^ 1 === 1
if ((toggle ^= 1))
  console.log('true');

Ok, Ok, this is way too far already ... but I hope we got how powerful, or destructive, could be an XOR ^ in the wild, which is why the tilde NOT operator is usually a better solution, at least to reduce groups.

The all-in case

Back to the first example with the alphabet:

const A = 1 << 0; // 00001
const B = 1 << 1; // 00010
const C = 1 << 2; // 00100
const D = 1 << 3; // 01000
const E = 1 << 4; // 10000

... we'd like to have a special value that would return something different from 0 per each letter of the known alphabet, in this case A to E.

To do so, we need a value that would produce at least a pair of 1 with all those values.

At this point, we might think that the group (A | B | C | D | E) would cover that, and we'd be right!

However, we can also picture the fact we just need a 11111 there, which is exactly what that union of values would produce.

It's not as high as the const F = 1 << 5, but high enough to cover all values before F:

const AtoE = (1 << 5) - 1;
// 11111

AtoE & A;       // ✔
AtoE & B;       // ✔
AtoE & (A | C); // ✔


const F = 1 << 5;
// 100000

AtoE & F;       // ✖

... and the some-out case ...

Let's imagine we want to split the alphabet into two different A to E and F to J groups, so that instead of checking 5 times, per each group if there is a match, we can quickly branch between these two groups through one of those special grouping values.

Once again, there's nothing wrong with manually assigning (A | B | C | D | E) and (F | G | H | I | J) to obtain such values, but because this post is about understanding bitwise operations, let's try to picture what we are trying to do here:

AtoE 0000011111
FtoJ 1111100000

See that? We are splitting through segments of 1 and 0 our target sub-groups, but while the (1 << X) - 1 trick works to consider them all, this time we need to subtract one group to another ... and how can we do that?

// this one groups them all
const AtoJ = (1 << 10) - 1;
// 1111111111


// and this one subtract AtoE group
const FtoJ = AtoJ & ~AtoE;
// 1111100000

... wait what?

The tilde `~`

This operator, also known as NOT bitwise operator, has different applications:

it subtracts 1 to the negative version of the number and return
it subtracts known 1 from "binary strings" when combined with an AND &

The former point means that ~0 produces -1, and ~(-1) produces 0 too:

( 0 * -1) - 1;  // -1
(-1 * -1) - 1;  //  0

The latter point means that num & ~num is always 0, but biggerNum & ~smallerNum subtracts smallerNum from biggerNum.

// decimal basic example
11 & ~1;    // 10

// always works as expected with binary strings
(parseInt('1111', 2) & ~parseInt('11', 2)).toString(2);
// 1100

Safer subtracts

Different from XOR ^, the tilde ~ operator doesn't add a group if it wasn't already present.

// C was not in the group before
(A | B | D) & ~C;

// subtract C from (A | B | D) ?
01011 &
00100 =
00000 ✖


// B was in the group
(A | B | D) & ~B;

// subtract B from (A | B | D) ?
01011 &
00010 =
00010 ✔
      =
01001 (A | D)


// multiple subtractions
(A | B | D) & ~(A | D);

01011 &
01001 =
01001 ✔
      =
00010 B


// subtracts A only
(A | B | D) & ~(A | C);

01011 &
00101 =
00001 ✔
      =
01010 (B | D)

Got it? The & followed by NOT ~ returns the initial value minus the parts of both values that match, effectively removing any undesired 1 present on the right-hand side.

Destructuring a group

We have already seen how to group, how to check if a group, or a value, is part of a group, how to remove a specific value or subgroup, but we haven't seen how to destructure values from a group.

By "destructuring" here, I mean a way to retrieve all subvalues of a group:

(A | B | D) 01011

// find:
         A  00001
         B  00010
         D  01000

If we look closer, finding all 1 in that group is like looping from right to left all 1 and see if there is a match:

function* eachValue(group) {
  // loop through all multiple of 2 and match
  for (let pow = 0, i = 1; i <= group; i = 2 ** ++pow) {
    if (group & i)
      yield i;
  }
}

// given original A, B, C, D, E constants
for (const value of eachValue(A | B | D))
  console.log(value.toString(2).padStart(5, '0'));

// A  00001
// B  00010
// D  01000

Because the loop is linear, it doesn't matter how the group was created, the order of the returned values will be always from smaller to bigger.

I'll leave it as a reader's exercise to figure out how to extract bigger to smaller values, whenever it matters 👍

Destructuring a subgroup

Remember these two parts of the alphabet we wanted to group?

AtoE 0000011111
FtoJ 1111100000

Now, let's imagine we'd like to destructure only one of the two subgroups, ignoring values that don't belong to other groups.

To do so, the very first thing we should do is to remove all undesired 1 from the given input. Let's see an example:

function* eachValue(values, subgroup = -1) {
  // remove all undesired `1` from the list of values
  // ensure positive number up to (2 ** 32) - 1
  const group = (values & subgroup) >>> 0;
  // loop through all multiple of 2 and check if these match
  for (let pow = 0, i = 1; i <= group; i = 2 ** ++pow) {
    if (group & i)
      yield i;
  }
}

for (const value of eachValue((A | D | F), AtoE))
  console.log(value.toString(2).padStart(5, '0'));

// A  00001
// D  01000

Passing FtoJ as a subgroup instead would've logged only F with a value of 100000.

Why subgroup -1 as default?

The -1 number is the equivalent of the tilde ~0 (NOT zero).

Because ~0 in turn means any 1, we can use it as a default value, so that every 1 found would stay.

Accordingly, if you see a signature such as function* fn(some, dflt = ~0) it's likely a utility to deal with bitwise operations.

A note about possible optimizations

Because many consider bitwise operators a must use when performance matters, even if I hope it's clear by now these can be very convenient regardless, developers might invent any sort of indirection to basically obtain the same result, bypassing, for example, Math.pow(...) calls, when these are not necessary.

To be honest, if the code is not transpiled into API calls, operations such as 2 ** X should be pretty damn fast these days. However, because we never know who's gonna run our code, and how, we could also use a different approach to solve the previous problem, taking the opportunity to better introduce >>> too, which is the unsigned right shift operator, and it covers twice Int32, being Uint32.

function* eachValue(values, filter = ~0) {
  let mask = (values & filter) >>> 0, bit = 0;
  while (mask) {
    if (mask & 1)
      yield (1 << bit) >>> 0;
    mask >>>= 1;
    bit++;
  }
}

Let's break down the "smart loop" that doesn't pow all along:

the mask is granted to be a positive number up to Math.pow(2, 32) - 1
as long as mask is not 0, the loop keeps going
if the very first mask bit is truthy, or better, just 1, the value with the related power of 2 is returned, ensuring that if bit is exactly 31, its sign is dropped, so it's always positive.
the mask first right bit is then removed, and the bit value is incremented. Please note: as mask is granted to be positive, >>=1 would have likely worked equally well in this case.

To somehow better visualize what is the logic there:

// 0000101001
let mask = (A | D | F);

//     ↓ ↓  ↓
// 0000101001 &
// 0000000001 ✔  A
if (mask & 1);

// move all 1 one spot on the right ➡
mask >>>= 1;

//      ↓ ↓  
// 0000010100 &
// 0000000001 ✖
if (mask & 1);

mask >>>= 1;

//       ↓ ↓ 
// 0000001010 &
// 0000000001 ✖
if (mask & 1);

mask >>>= 1;

//        ↓ ↓
// 0000000101 &
// 0000000001 ✔  D
if (mask & 1);

mask >>>= 1;

//         ↓ 
// 0000000010 &
// 0000000001 ✖
if (mask & 1);

mask >>>= 1;

//          ↓
// 0000000001 &
// 0000000001 ✔  F
if (mask & 1);

mask >>>= 1;

// 0000000000
// end of the loop

To close this chapter, it is good to understand workarounds for transpiled code, but it's always a matter of tradeoffs: it is safe, and I believe reasonably equally fast, to use the power ** operator, or even Math.pow, but in every other case, it's possible to move everything to the right, until we reach 0.

Other benefits around bitwise operations

these are extremely fast to compute with every programming language
every C like programming language handles non-zero integers as truthy, so these are super handy in conditional flows
there is literally nothing smaller, simpler, or faster when it comes to grouping, and sub-grouping, domain specific values
it is very difficult to get these wrong, once these are fully grasped, including the XOR operator

About ES6 / ES2015 support

It is definitively worth mentioning that modern browsers understand 0b0001 like syntax, up to 0b10000000000000000000000000000000, the equivalent of (1 << 31) >>> 0, so that playing around the 32 bit boundaries should help, similarly as thinking "binary strings" helps too, except it's supported right away 👍

In depth: the left shift operator

The left shift operator, with a single 1 digit to move toward the left, is like Math.pow(2, X), where X is the number on the right, as in 1 << X.

Bear in mind that the resulting number will be positive up to 1 << 30, but 1 << 31 will reach the Int32 positive edge, becoming a negative value.

The explanation is that these operators were born in 32bit based systems, where a signed integer reserves the first bit to indicate if positive or negative.

(2 ** 32) - 1;
// 11111111111111111111111111111111
// as 32bit:  4294967295

(2 ** 31) - 1;
// 01111111111111111111111111111111
// ↑ as 16bit => 2147483647

(2 ** 31);
// 10000000000000000000000000000000
// ↑ as 16bit => -2147483648

To be even more precise, let's use typed values:

const i32 = new Int32Array(1);
i32[0] = (2 ** 31) - 1;
i32[0]; // 2147483647

// increment by 1, reaching 1 << 31
i32[0]++;

// now it's negative
i32[0]; // -2147483648

// that is the exact value of 1 << 31
i32[0] === 1 << 31;
// true

Because we want to be sure we can use all 32 positions, the unsigned right shift operator would "cast" (1 << 31) >>> 0 as Uint32, giving us the possibility to use all available positions.

for (let bit = 0; bit < 32; bit++)
  console.log(((1 << bit) >>> 0).toString(2).padStart(32, '0'));
  // 00000000000000000000000000000001
  // to
  // 10000000000000000000000000000000

Not so limited though ...

Even if Number.MAX_SAFE_INTEGER defines the top positive boundary where normal aritmetic operations shouldn't fail, we need to use BigInt if we'd like to have more than 32 possible values.

// Beyond 32 values: 128 possible values example
const big = 0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFn;

big & 0xFn; // truthy

Conclusions

I consider this topic as important as knowing Regular Expression, for the simple reason that in most cases, bitwise operations are the best tool for the job, when it comes to groups and values, and so are RegExp when it comes to non streamed strings parsing.

What I've also tried to emphasize and stress is that once we think in segments of a string composed by 0 and 1, instead of the represented decimal numbers, and we associate a specific meaning to the various operators, things should naturally become clearer for most developers, and less scary to read, implement, or deal with.

In few words, I hope you enjoyed this read and learned something new and useful 👋

Credits

A very special thanks goes to my awesome peers @goatonabicycle and @JWorthe for helping me out polishing, improving, clarifying, and fixing typos all over ♥

Geo Share

Andrea Giammarchi — Wed, 16 May 2018 14:36:24 +0000

What I built

Imagine you'd like to meet up with your friends, but you are in an open and maybe crowded space, so that beside sharing your own location, you'd love to also see where is everyone else, to eventually converge into a single place on a map without needing to install any native app.

This is Geo Share, a PWA where you can either be the host, or simply a guest of any other person that shared a unique URL with you.

Demo Link

You can become a host simply visiting geoshare.now.sh.

Once you've found yourself on the map, and clicked on top right 👥 icon, you'll have in your device clipboard a unique URL you can paste to your friends.

That's it, anyone using that link will see everyone else aware of such link and, as long as you are using the app, also see you as host of the group (dark icon).

Link to Code

https://github.com/WebReflection/geoshare

How I built it

Zeit now-cli for the easiest deployment ever!
Leaflet library for the map on top of OpenStreetmap tiles
Nominatim for reverse geocoding on longpress (to share a tooltip from the host)
Pusher Channels API for real-time updates and communications
NoSleep utility to (hopefully) prevent device from sleeping
hyperHTML for layout render and updates
lightdown to bring a fast, safe, and useful Markdown flavour to each message

Additional Resources/Info

The rest of the code is written by me and based on ES Modules, bundled through asbundle, sanitized via Babel, and minified via UglifyJS.

Common PWA techniques such ServiceWorker and a manifest.json are in place too.