Bun is a fast and lightweight JavaScript runtime that aims to be an alternative to Node.js. It supports features like hot reloading, file system APIs, and native modules. But what if you want to build a web application using Bun? Thatโs where Elysia comes in.
Elysia is a web framework for Bun that is designed to be performance-focused, simple, and flexible. It has an Express-like syntax, type inference, middleware, file uploads, and plugins for various functionalities like JWT authentication, tRPC, and more. It also claims to be one of the fastest Bun web frameworks, according to its documentation.
In this article, we will explore some of the major features of Elysia and see how to use it to create a simple web application.
Getting Started
To get started with Elysia, you need to have Bun installed on your system. You can install it using npm:
npm install -g bun
Then, you can use the bun create command to generate a new project using the Elysia template:
bun create elysia myapp
cd myapp
To run the web application in development mode, you can use the bun run dev command:
bun dev
Navigate to localhost:3000 should greet you with "Hello Elysia".
Features
- Performance - Static code analysis to generate optimized code
- Unified Type - Shared DTO runtime and compile time validation
- End-to-end Type Safety - Sync your data both client and server
- TypeScript - Extensive type system for full TypeScript experience
- JSX Template Engine - Familiar experience for frontend developer
- Ergonomic by design - Simple and familiar API for building server
Just Function
One of the core principles of Elysia is that everything is just a function. This means that you can use plain JavaScript functions to define routes, middleware, plugins, and even the Elysia instance itself. This makes Elysia very easy to use, test, and compose.
For example, to define a simple GET route that returns a text response, you can write:
import { Elysia } from 'elysia'
new Elysia()
.get('/', () => 'Hello World')
.get('/json', () => ({
hello: 'world'
}))
.listen(3000)
Type Safety
To take a step further, Elysia provide Elysia.t, a schema builder to validate type and value in both runtime and compile-time to create a single source of truth for your data-type.
import { Elysia, t } from 'elysia'
new Elysia()
.get('/id/:id', ({ params: { id } }) => id, {
params: t.Object({
id: t.Numeric()
})
})
.listen(3000)
Standards
Elysia adopts many standards by default, like OpenAPI, and WinterCG compliance, allowing you to integrate with most of the industry standard tools or at least easily integrate with tools you are familiar with.
For instance, as Elysia adopts OpenAPI by default, generating a documentation with Swagger is as easy as adding a one-liner:
import { Elysia, t } from 'elysia'
import { swagger } from '@elysiajs/swagger'
new Elysia()
.use(swagger())
.get('/id/:id', ({ params: { id } }) => id, {
params: t.Object({
id: t.Numeric()
})
})
.listen(3000)
Plugins
Elysia also supports plugins, which are functions that can extend the functionality of the Elysia instance, the request object, the reply object, or the route methods. For example JWT plugin adds support for using JWT in Elysia handler.
Install with:
bun add @elysiajs/jwt
Then use it:
import { Elysia } from 'elysia'
import { jwt } from '@elysiajs/jwt'
const app = new Elysia()
.use(
jwt({
name: 'jwt',
secret: 'Fischl von Luftschloss Narfidort'
})
)
.get('/sign/:name', async ({ jwt, cookie: { auth }, params }) => {
auth.set({
value: await jwt.sign(params),
httpOnly: true,
maxAge: 7 * 86400,
path: '/profile',
})
return `Sign in as ${auth.value}`
})
.get('/profile', async ({ jwt, set, cookie: { auth } }) => {
const profile = await jwt.verify(auth.value)
if (!profile) {
set.status = 401
return 'Unauthorized'
}
return `Hello ${profile.name}`
})
.listen(8080)
Conclusion
In this article, we have seen how to use Elysia, a Bun-first web framework, to create a simple web application. We have explored some of the major features of Elysia, such as defining routes, using middleware, and using plugins. Elysia is a fast, simple, and flexible web framework that takes full advantage of Bunโs features and APIs.
I hope this article was helpful for you. If you have any feedback or questions, please let me know. ๐
Top comments (15)
Ok, i'm all for playing around with these things and trying to improve them, but really, so personal pet projects, heck yea, go for it.
As an industry though, do we need "Another Node" ? and "Another React/Vue/Angular/Svelte/[insert another 20 framework wannabes]"?
Bun claims to be faster than Node and Deno...but the question is:
Do we care? Do we need anything that's faster if they can do sub 100ms responses like any server? Would any human ever notice, or is this just to gain developer bragging rights?
Elysia doesn't add anything new, except another "custom set of javascript syntax rules" to learn because someone felt like it.
I made one too, no one uses it because i frankly didn't go and present it to the dev community as a new standard or "best way" of anything, because i realize it was just "another one for the pile". It's fun and i love using mine, because i know it by heart it's super easy for me, but not for anyone else, and that's what this one feels like too.
At least mine's vanilla js and looks nothing like all the "react-wannabes", and yea i take a little pride in that bit, but that's just my opinion, doesn't matter.
Elysia here feels too much like one of those React-likes, so what will happen is someone in a year or two will run into projects done with Elysia, but because devs are terrible at documenting things, they won't know. They'll see the import calls and some of the methods and go "oh, must React" or "oh, must be Svelte" or whatever, and well, they'll spend a few hours or days going "what the hell? what is this?!" until they finally read the readme i guess or someone goes and points at this obscure thing [unless it magically gets super popular of course] and they will curse to high heaven as they begin inserting hacks to make changes.
Hurray longterm tech support, the one thing no one thinks about when they make these new toys.
Don't you think that if no "yet-another"s were ever created, the web would never have moved forward in the way that it has and we may have still had only jQuery for the front-end? Just curious :)
lol jQuery itself was one hell of an advancement for javascript back when browsers were highly inconsistent.
I fully support "new things" and "innovative things", not "same things that bring nothing new to the table"
I understand your point, but if all we had was C++ forever everything would have been written in C++. There is such a thing as good enough.
i agree... it's human intuition to keep advancing. We always try to find something better.
Looks like Bun are going to spend more time now on stability, which is great news: x.com/jarredsumner/status/17545324...
thats great ๐ฅ
excellently written! Thank you
thanks :>
You may take a look at aex :)
Okay now that looks interesting. I definitely gotta try it with my next pet project
Where's the link? Shouldn't that be right at the top of the article?
elysiajs.com/
its up too :>
this is interesting! Iโm a little jealous of your ability to write articles so beautifully