paint-brush
ExpressWebJs adds support for Bunjsby@futurecode
1,222 reads
1,222 reads

ExpressWebJs adds support for Bunjs

by Chukwuemeka_IgbokweSeptember 21st, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

ExpressWebJs 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.
featured image - ExpressWebJs adds support for Bunjs
Chukwuemeka_Igbokwe HackerNoon profile picture

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