DEV Community

Cover image for Working directory and environment variables
JSLab
JSLab

Posted on

Working directory and environment variables

#showdev #javascript #bunjs #productivity

JSLab feature notes: one docs page, explained. Today: Working directory and Environment variables.

By default, a tab in JSLab, a JavaScript & TypeScript scratchpad for macOS, isn't tied to any folder. That's right for most snippets. It's wrong the moment you want to poke at a real project's files.

Give a tab a folder

Actions → Set Working Directory…, the working-directory button in the status bar, or Set Working Directory… in the command palette. Each tab has its own, and it's kept across relaunches.

With a working directory set, the tab runs as if it lived in that folder:

  • process.cwd(), __dirname and import.meta.dir are that folder.
  • Relative imports written as string literals resolve there.
  • <folder>/node_modules is searched before JSLab's own installed packages, so you get the project's versions.
  • A .env file in the folder is loaded into the run. 
import { readFile } from "node:fs/promises";
import config from "./config.json";

config; // read from the working directory
await readFile("./README.md", "utf8");
Enter fullscreen mode Exit fullscreen mode

Clear it with Actions → Clear Working Directory, or the × beside the folder's name in the status bar. If the folder is moved or deleted, the run says Working directory not found and offers Change….

Variables every tab sees

Tools → Environment Variables… (or the palette; there's no default shortcut) holds key and value pairs that every tab's run gets, on top of what your login shell exports.

  • Values are masked; Show reveals one.
  • Paste a whole .env file into the Key field and JSLab fills in the rows for you to check.
  • Changes apply from the next run.
  • They're saved in env.json in JSLab's data folder, readable only by your user account. 
process.env.API_URL ?? "API_URL isn't set yet";
process.env.JSLAB; // "1" in every JSLab run
Enter fullscreen mode Exit fullscreen mode

The order they apply in

For a Bun run, later layers win:

  1. Your login shell's environment.
  2. The Environment Variables sheet.
  3. The working directory's .env, if the tab has one.
  4. JSLAB=1, so your code can tell it's in JSLab.

So the sheet holds what's true everywhere, and a project's .env overrides it for the tabs pointed at that project.

Two details from the docs: JSLab reads the .env itself (up to 1 MiB) rather than leaving it to Bun, so every run gets the same result, and BUN_OPTIONS never reaches your code.

JSLab launches Nov 15. The full pages: https://js-lab.app/docs/working-directory

Top comments (0)