Difference between revisions of "Bun"

Latest revision as of 11:33, 23 March 2026

to install go to : https://bun.sh/

to start a project run

bun init

select blank

Project structure

Bun has built-in workspaces.

So we create packages folder in the root and server and client folders in it.

• packages
  • client
  • server

and update packages.json to add these lines to the end.

,
  "workspaces": [
    "packages/*"
  ]

run it in the server folder by

bun run index.ts

Server

in the command prompt go to packages/server and run

bun init

select blank

adding express.js

bun add express
bun add -d @types/express

Creating express server

/packages/server/index.ts

import express from 'express'
import type { Request, Response } from 'express'

const app = express()
const port = process.env.PORT || 3000
app.get('/', (req: Request, res: Response) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`)
})

Environment Variables

bun add dotenv 

in the root of server folder create a file like .env

write env variables in it like

OPENAI_API_KEY=abcd

and in the index.ts

...
import dotenv from 'dotenv'

dotenv.config()
...
res.send(process.env.OPENAI_API_KEY )

Using shared project from others

In the root package.json file workspaces must be defined like this

  "workspaces": [
    "packages/*"
  ],
....

In the project's package.json use dependency of a shared project like below

  "dependencies": {
    "shared": "workspace:*",

run bun install in the project root

bun install

and you can reference it like this :

import shared from "shared";

Client

Using Vite in client is like : under /packages/client run

bun create vite .

Micro Front End Setup

Add vite-plugin-federation for both front ends which will serve and use the application

bun add -d @originjs/vite-plugin-federation

Serve

name, path in exposes and port are important here

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "app_state",
      filename: "remoteEntry.js",
      exposes: {
        "./store": "./src/federation-exposes"
      }
    })
  ],
  build: {
    target: "esnext",
    minify: false,
    modulePreload: false
  },
  server: {
    port: 4173
  }
});

Client

we use the name and port we defined in serve in remotes.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "app_host",
      remotes: {
        app_state: "http://localhost:4173/assets/remoteEntry.js"
      },
      shared: {
        react: { singleton: true, eager: true },
        "react-dom": { singleton: true, eager: true },
        "react-redux": { singleton: true, eager: true }
      }
    })
  ],
  server: {
    port: 4174
  },
  build: {
    target: "esnext",
    modulePreload: false
  }
});