ExpressWebJs adds support for Bunjs

Written by futurecode | Published 2023/09/21
Tech Story Tags: web-development | typescript | expresswebjs | bunjs | expresswebjs-with-bunjs | bunjs-for-expresswebjs | bunjs-integration | using-bun-in-expresswebjs

TLDRExpressWebJs now provides support for BunJs, a fast all-in-one JavaScript runtime. Like npx, bunx runs an NPM package executable, but it automatically installs the package to a global shared cache. Let’s get started in using Bun in ExpressWebJs.via the TL;DR App

ExpressWebJs now provides support for BunJs, a fast all-in-one JavaScript runtime.

Bun is a new all-in-one toolkit for JavaScript and TypeScript applications that comes with a single executable file, called bun. Like npx, bunx runs an NPM package executable, but it automatically installs the package to a global shared cache if it is not already installed in the node_modules directory.

Let’s get started in using Bun in ExpressWebJs.

Using Bun in ExpressWebJs

Before we get started, I believe you already have bun installed on your system. If not kindly check out the bun installation guide on https://bun.sh/docs/installation

Once you have bun installed on your system, you can now download a fresh version 4.2 ExpressWebJs application with the code below:

 npx expresswebcli new myProjectName --ts

Replace myProjectName with the name of your project.

Next, you'll remove the existing package-lock file or yarn.lock file, if you're using npm,  or yarn .

Once that is done, you can run bun install .This will install all dependencies and also generate bun.lockb file. The bun.lockb file is equivalent to package-lock file or yarn.lock file.

Update tsconfig.json file

In this section, you will need to update the compileOption to the code below:

{
  "extends": "./node_modules/expresswebjs-preset-ts/tsconfig.json",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "noPropertyAccessFromIndexSignature": true,
    "strictNullChecks": true,
    "useUnknownInCatchVariables": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    //Bun config
    "lib": ["ESNext"],
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "bundler",
    "moduleDetection": "force",
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "composite": true,
    "strict": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "jsx": "preserve",
    "allowJs": true,
    "types": [
      "bun-types" // add Bun global
    ]
  }
}

Once that is done, you will need to install the Typescript definitions for Bun with the code below:

bun add -d bun-types

Update package.json script section

Finally, update the script section in the package.json file to this:

  "scripts": {
    "start": "bun --hot run app.ts",
    "maker": "bun maker.ts"
  }

That’s it, you can now start your application with:

bun start

One final note, make sure you have your .env file set up.

Star to support ExpressWebJs on GitHub

Also, follow on Twitter @ExpressWebJs


Written by futurecode | Software Engineer
Published by HackerNoon on 2023/09/21