Bun and HTMX are 2 of the most fascinating things occurring in software today. Bun is an extremely quickly, all-in-one server-side JavaScript platform, and HTMX is an HTML extension used to produce basic, powerful interfaces. In this article, we’ll use these 2 terrific tools together to develop a full-stack application that utilizes MongoDB for data storage and Elysia as its HTTP server.The tech stack Our focus in this post is how the 4 primary elements of our tech stack interact. The components are Bun, HTMX, Elysia, and MongoDB. This stack provides you a fast-moving setup that is simple to set up and agile to alter. Bun is a JavaScript runtime, bundler, plan manager,
- and test runner. Elysia is a high-performance HTTP server that is similar to Express however developed for Bun. HTMX uses an unique approach to including fine-grained interactivity
- to HTML. MongoDB is the flagship NoSQL document-oriented datastore.
- Note that this short article has 2 parts. In the 2nd half, we will include Pug, the HTMX templating engine, which we’ll utilize to establish a couple of elegant front-end interactions.Installation and established You’ll need
to install Bun.js, which is simple to do. We’re likewise going to run MongoDB as a service along with Bun on our advancement device. You can check out installing and setting up MongoDB here.
Once you have actually these packages installed, both the bun -v and mongod-version commands must work from the command line.Next, let’s start a new project:$bun develop elysia iw-beh This tells bun to create a brand-new project using the Elysia template. A design template in Bun is a hassle-free way to jumpstart projects using the produce command. Bun can work like Node, with no setup, however the config is good to have.(Discover More about Bun design templates here.) Now, move into the new directory:$cd iw-beh. And run the task as it is:$bun run src/index. js. This last command informs bun to run the src/index. js
file. The src/index. js file is the code to start an easy Elysia server: import Elysia from”elysia “; const app=new Elysia(). get (“/ “, ()=>”Hi Elysia”). listen( 3000 ); console.log(‘Elysia is running at$: $ <'); In this file, we import Elysia
and use it to instantiate a brand-new server that listens on port 3000 and has a single GET endpoint at the root. This endpoint returns a text string:”Hello Elysia. “How all this works is comparable in spirit to Express.If you go to localhost:3000 you’ll get a basic greeting: IDG Now that we have Elysia running, let’s add the static plugin. Elysia has several plugins for managing common circumstances. In this case, we want to serve some HTML from disk. The static plugin is simply what we require:$ bun include @elysiajs/ static Now the Elysia server running the static plugin ought to serve everything in the iw-beh/public directory site. If we drop a basic HTML file therein and visit localhost:3000/ public, we’ll see its contents.The magic of HTMX Next, let’s include an HTMX page to index.html. Here’s a basic one from the HTMX homepage: Click Me! This page displays a button. When clicked, the button phones to the server for the/ clicked endpoint, and the button is replaced with whatever remains in the action. There’s absolutely nothing there yet, so it presently doesn’t do anything.But notice that all this is still HTML. We are making an API call and performing a fine-grained DOM modification with no JavaScript. (The work is being done by the JavaScript in the htmx.org library we simply imported, however the point is we don’t have to worry about it .)HTMX offers an HTML syntax that does these things using simply 3 component attributes:
an endpoint in Elysia that will compose something to MongoDB. First, we’ll include the MongoDB chauffeur for Bun: bun add mongodb Next, customize src.index.ts like this: import Elysia from “elysia “; import staticPlugin from’ @elysiajs/ fixed’; const =require(‘mongodb ‘); const app =new Elysia(). get(“/”,
- ()=>”Hi Elysia” ). get (“/ db “, async()=> <). usage(staticPlugin()). listen (3000 ); console.log('Elysia is performing at$:$app.server?. port'); In this code, we have actually included a/ db endpoint that speaks with MongoDB. Right now, it simply composes a quote to the quote database, inside the quotes collection. You can check this directly by going to localhost:3000/ db. Then, you can validate the information remains in MongoDB: $ mongosh test > use quote switched to db quote > db.quotes.find () [_ id: ObjectId(“65ba936fd59e9c265cc8c092 “), quote:’Thought is the grandchild of lack of knowledge.’, author: ‘Swami Venkatesananda’] Develop an HTMX table Now that we are linking to the database from the front end, let’s develop a table to output the existing quotes. As a fast test, we’ll add an endpoint to the server:. get(“/ quotes”, async ()=> ) And then use it in our index.html: Load Information Now, when you pack
/ public/index. html and click the button, the list sent from the server is displayed. Notice that releasing HTML from the endpoint is various from the common JSON pattern. That is by style. We are conforming to Relaxing principles here. HTMX has plugins for working with JSON endpoints, however this is more idiomatic.In our endpoint, we are simply by hand producing the HTML. In a real application, we ‘d most likely utilize some type of JavaScript-HTML templating structure to make things more manageable.Now, we can obtain the information from the database:. get( “/ quotes “, async()= > const url =”mongodb:)In this endpoint, we retrieve all the existing quotes in the database and return them as a simple HTML table.(Note that in a genuine application, we ‘d extract the database connection work to a main place. )You’ll see something like this: IDG This screenshot reveals the one row we placed when we struck the/ db endpoint earlier.Now, let’s include the capability to create a new quote. Here’s the back-end code(src/index.
ts ): app.post (“/ add-quote “, async(req )= > 127.0.0.1:27017) And here is the front end (public/index. html): Add Quote When you enter an author and quote, and hit Include Estimate it’ll be added to the database. If you click Load Information, you will see your upgrade in the list. It needs to look something like this: IDG If you take a look at both the server and customer for the application up until now, you can see that we’re doing a bare minimum of work. The most significant thing HTMX has structured here is submitting the kind. The hx-post quality changes all the work of taking the information off the form, marshaling it into JSON, and submitting it with bring ()or something similar.Conclusion As things become more intricate, you begin having
table, can be finished with HTMX switching. HTMX lets you do a lot with its easy syntax and after that fall back to JavaScript when necessary. The most significant mental modification remains in producing HTMX from the server. You have your option of numerous high-end HTML or JavaScript templating engines to make this much easier. When you are used to dealing with HTMX, it’s a breeze
