Application with Bun + Elysia

Photo by Max Duzij on Unsplash

For Backend Developers who have experience building applications using JavaScript/TypeScript, NodeJS is likely a familiar tool. It is commonly used to create applications with frameworks such as ExpressJS, NestJS, and Koa, and may even find use in Frontend Development.

In my own experience, I often utilize NodeJS in Frontend Development while working with VueJS or ReactJS. Essentially, it serves as a JavaScript runtime for running applications. Additionally, there’s another JavaScript runtime called Deno, which I haven’t had the chance to explore yet ✌🏻. Deno is a newer runtime that boasts enhanced capabilities compared to its predecessor.

This tool can function as a JavaScript runtime, similar to NodeJS or Deno, a package manager like npm, yarn, or pnpm, a bundler, and even a test runner, supporting options like Vitest or jest with SWC, ts-jest, or babel.

Around early September 2023, Bun 1.0 was launched. This tool can function as a JavaScript runtime, similar to NodeJS or Deno, a package manager like npm, yarn, or pnpm. Furthermore, it can be utilized as a bundler (similar to Webpack, Rollup, esbuild, rspack, and parcel2), and even a test runner, supporting options like Vitest or jest with SWC, ts-jest, or babel.

Bun is a fast JavaScript all-in-one toolkit

Photo by Cesar Carlevarino Aragon on Unsplash

Not this bun obviously haha.

OK, let’s start with Bun installation (if you haven’t installed it). You can also refer to the official documentation

# MacOS, Linux, and WSL (Windows Subsystem for Linux).
# It will install latest version
curl -fsSL https://bun.sh/install | bash

# MacOS, Linux, and WSL. For specific version 
curl -fsSL https://bun.sh/install | bash -s "bun-v1.0.0"

I’ll create a simple backend application using Bun + ElysiaJS. ElysiaJS is a fast and friendly bun web framework.

1. Create the application with Bun + ElysiaJS

# bunjs is used as a folder name for the 
bun create elysia bunjs

After creating the application, you might see the structure like this

.
├─ tsconfig.json
├─ package.json
├─ README.md
├─ .gitignore
└─ src
   └─ index.ts

2. For package installation or to add a new package, you could use

# Install all packages from package.json
bun install

# add new package
bun add <package_name>

After the installation, you could see the lockfile with name bun.lockb (similar with package-lock.json, yarn.lock, or pnpm-lock).

3. You can run your application by running this command (by default it runs on port 3000)

bun run dev

Default response from ElysiaJS

4. ElysiaJS heavily encourages the use of method chaining. For complex implementation, it could improve the performance.

import { Elysia } from 'elysia'

// Method Chaining
const app = new Elysia()
  .state('name', 'John')
  // have access the "name"
  .get('/', ({store: { name }) => `Hello Elysia and ${name}`)
  .listen(3000)

// Not Method Chaining (You might familiar this pattern if you ever use ExpressJS)
const app = new Elysia()
app.state('name', 'John')

// Don't have access to the "name"
app.get('/', ({store: { name }) => `Hello Elysia and ${name}`)

app.listen(3000)

5. For Routes (one of the crucial things), you can implement generate new prefixes and include them into groups. For example, I create routes for users in one file. You can refer to the official documentation.

import { Elysia } from 'elysia'

const users = new Elysia({ prefix: '/users' })
  .get('/', getAllUsers)
  .post('/', createUser)
  .put('/', updateUser)
  .delete('/', deleteUser)

const app = new Elysia()
  // Root path "/" with return text 'Hello Elysia'
  .get('/', () => 'Hello Elysia')
  // group the path under <domain>/v1/*
  .group('/v1', app => app
    // path /v1/users/*
    .use(users)
  )
  .listen(3000)

For advanced implementation, you might need to combine it with JWT (if needed), Logging (MUST for production), and other packages as well

That’s it! You can start building a REST API application or if you prefer to use GraphQL, you also do it here. For further documentation, I’ll add it to my personal GitHub page as part of my learning.

• Personal Website: https://www.alibaihaqi.com
• JavaScript Documentation: https://alibaihaqi.github.io/javascript-docs/

Thank you for reading!