{"_id":"@abrarabir235/jbrowse-web","_rev":"4-f0ab34f822a7547db7684d51fc6f4960","name":"@abrarabir235/jbrowse-web","dist-tags":{"latest":"4.1.14"},"versions":{"4.1.14":{"name":"@abrarabir235/jbrowse-web","version":"4.1.14","keywords":["genome","browser","jbrowse","bioinformatics","visualization","genomics","sequencing"],"license":"Apache-2.0","_id":"@abrarabir235/jbrowse-web@4.1.14","maintainers":[{"name":"abrarabir235","email":"abrarabir235@gmail.com"}],"homepage":"https://github.com/Abrar-Abir/jbrowse-web#readme","bugs":{"url":"https://github.com/Abrar-Abir/jbrowse-web/issues"},"dir":"src","dist":{"shasum":"037da26ea25695394bccff012e873872ce36d00b","tarball":"https://registry.npmjs.org/@abrarabir235/jbrowse-web/-/jbrowse-web-4.1.14.tgz","fileCount":865,"integrity":"sha512-6vTeywnDCQThjd9wapyJtede6YMmWB+dgmXD9bKzmyEMWlOJ6N9dsfQLlJnvjXYik6HSX1Y4rujVtaxOpq4jaw==","signatures":[{"sig":"MEYCIQD5tuWO8KOMdYw7mj9wPWcqSzD8Xj6Q+agljrw4eEMoswIhAM5/ia7dMfnCGzEBJmEs8MY6F5lUuxWGVuYGKEjmzbbG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27002318},"main":"build/index.html","type":"module","exports":{"./rootModel":"./src/rootModel/index.ts","./makeWorkerInstance":"./src/makeWorkerInstance.ts"},"gitHead":"fa23e29387e4c751195bb756d4238a25a9fbf39c","scripts":{"build":"NODE_ENV=production tsx scripts/build.ts","serve":"npx http-server build -c 3600 -p 4000 --gzip --brotli","start":"NODE_ENV=development tsx scripts/start.ts","prebuild":"rimraf build","prepublishOnly":"npm run build"},"_npmUser":{"name":"abrarabir235","email":"abrarabir235@gmail.com"},"repository":{"url":"git+https://github.com/Abrar-Abir/jbrowse-web.git","type":"git"},"_npmVersion":"11.12.1","description":"A standalone, customizable JBrowse 2 Web genome browser for building genomic web applications","directories":{},"_nodeVersion":"25.9.0","browserslist":{"production":["last 1 chrome version"],"development":["last 1 chrome version"]},"dependencies":{"idb":"^8.0.3","mobx":"^6.15.0","pngjs":"^7.0.0","react":"^19.2.4","date-fns":"^4.1.0","base64-js":"^1.5.1","pako-esm2":"^2.0.2","react-dom":"^19.2.4","mobx-react":"^9.2.1","pixelmatch":"^7.1.0","body-parser":"^2.2.2","@jbrowse/core":"^4.1.14","@mui/material":"^7.3.8","dockview-core":"^5.1.0","file-saver-es":"^2.0.5","@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@jbrowse/app-core":"^4.1.14","@jbrowse/web-core":"^4.1.14","copy-to-clipboard":"^3.3.3","@fontsource/roboto":"^5.2.10","@types/body-parser":"^1.19.6","@jbrowse/plugin-arc":"^4.1.14","@jbrowse/plugin-bed":"^4.1.14","@jbrowse/plugin-gtf":"^4.1.14","@jbrowse/plugin-hic":"^4.1.14","@jbrowse/plugin-rdf":"^4.1.14","@mui/icons-material":"^7.3.8","generic-filehandle2":"^2.0.18","@jbrowse/plugin-gff3":"^4.1.14","@jbrowse/plugin-trix":"^4.1.14","@types/file-saver-es":"^2.0.3","@jbrowse/plugin-menus":"^4.1.14","@jbrowse/product-core":"^4.1.14","@jbrowse/plugin-canvas":"^4.1.14","@jbrowse/plugin-config":"^4.1.14","@jbrowse/plugin-wiggle":"^4.1.14","@jbrowse/mobx-state-tree":"^5.5.0","@jbrowse/plugin-lollipop":"^4.1.14","@jbrowse/plugin-sequence":"^4.1.14","@jbrowse/plugin-variants":"^4.1.14","@jbrowse/plugin-gccontent":"^4.1.14","@node-oauth/oauth2-server":"^5.2.1","@jbrowse/plugin-alignments":"^4.1.14","@jbrowse/plugin-dotplot-view":"^4.1.14","@jbrowse/plugin-sv-inspector":"^4.1.14","@jbrowse/plugin-circular-view":"^4.1.14","@jbrowse/plugin-grid-bookmark":"^4.1.14","@jbrowse/plugin-authentication":"^4.1.14","@jbrowse/plugin-legacy-jbrowse":"^4.1.14","@jbrowse/plugin-data-management":"^4.1.14","@jbrowse/plugin-jobs-management":"^4.1.14","@jbrowse/plugin-spreadsheet-view":"^4.1.14","@jbrowse/plugin-linear-genome-view":"^4.1.14","@jbrowse/plugin-comparative-adapters":"^4.1.14","@jbrowse/plugin-breakpoint-split-view":"^4.1.14","@jbrowse/plugin-linear-comparative-view":"^4.1.14"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","chalk":"^5.6.2","rimraf":"^5.0.10","webpack":"^5.105.4","css-loader":"^7.1.4","typescript":"^5.9.3","@babel/core":"^7.29.0","@types/node":"^20.19.33","webpack-cli":"^5.1.4","@types/react":"^19.2.14","babel-loader":"^10.0.0","browserslist":"^4.28.1","style-loader":"^4.0.0","react-refresh":"^0.18.0","@types/react-dom":"^19.2.3","source-map-loader":"^5.0.0","webpack-dev-server":"^5.2.3","@babel/preset-react":"^7.28.5","html-webpack-plugin":"^5.6.6","mini-css-extract-plugin":"^2.10.0","@babel/preset-typescript":"^7.28.5","babel-plugin-react-compiler":"^1.0.0","@pmmmwh/react-refresh-webpack-plugin":"^0.6.2"},"_npmOperationalInternal":{"tmp":"tmp/jbrowse-web_4.1.14_1776482583547_0.19748391496456907","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to @gnomix/jbrowse-web. Please install @gnomix/jbrowse-web instead."}},"time":{"created":"2026-04-18T03:23:03.447Z","modified":"2026-05-02T18:25:22.583Z","4.1.14":"2026-04-18T03:23:04.150Z"},"bugs":{"url":"https://github.com/Abrar-Abir/jbrowse-web/issues"},"license":"Apache-2.0","homepage":"https://github.com/Abrar-Abir/jbrowse-web#readme","keywords":["genome","browser","jbrowse","bioinformatics","visualization","genomics","sequencing"],"repository":{"url":"git+https://github.com/Abrar-Abir/jbrowse-web.git","type":"git"},"description":"A standalone, customizable JBrowse 2 Web genome browser for building genomic web applications","maintainers":[{"name":"abrarabir","email":"abrarabir235@gmail.com"}],"readme":"# jbrowse-web\n\n[![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/jbrowse-v4.1.14-green.svg)](https://github.com/GMOD/jbrowse-components/releases/tag/v4.1.14)\n\nA standalone, self-contained npm project for building custom [JBrowse 2 Web](https://jbrowse.org) genome browser applications — no monorepo required.\n\n## Why this exists\n\nJBrowse Web lives inside a large pnpm monorepo ([jbrowse-components](https://github.com/GMOD/jbrowse-components)) with ~30 cross-referenced packages. Building a custom JBrowse-based application normally means cloning and managing that entire monorepo. There is no supported path to just run `jbrowse-web` on its own.\n\nThis repo extracts `products/jbrowse-web` at a pinned version (**v4.1.14**) and patches it into a self-contained npm project: workspace references replaced with published npm versions, build paths fixed, shared webpack config included locally, and all devDependencies declared explicitly. Clone it, `npm install`, and `npm run build` — no pnpm, no monorepo.\n\n## Prerequisites\n\n- Node.js 18+\n- npm\n\n## Quick start\n\n```bash\nnpm install\nnpm start        # dev server → http://localhost:3000\n```\n\n## Commands\n\n| Command | Description |\n|---|---|\n| `npm start` | Dev server with HMR on port 3000 (override with `PORT=`) |\n| `npm run build` | Production build → `build/` |\n| `npm run serve` | Serve production build on port 4000 |\n\n## Configuration\n\nPlace your `config.json` in `public/config.json`. JBrowse reads this on startup to load assemblies and tracks. See the [JBrowse config docs](https://jbrowse.org/jb2/docs/config_guides/assemblies/) for the full schema.\n\n## Custom modifications\n\nThe following files differ from upstream JBrowse v4.1.14:\n\n- **`src/components/JBrowse.tsx`** — Added a `postMessage` listener for `add-tracks` messages (inject tracks without reloading an iframe) and a `jbrowse-ready` signal to the parent window.\n\n## Upgrading\n\n```bash\nbash scripts/upgrade.sh v4.2.0\n```\n\nReview and re-apply any custom modifications afterward. See [Upgrading to a newer JBrowse version](#upgrading-to-a-newer-jbrowse-version) below for a manual walkthrough.\n\n---\n\n## How this was extracted from the monorepo\n\nFollow these steps to recreate or upgrade the standalone setup from scratch.\n\n### 1. Clone the monorepo at the target version\n\n```bash\ngit clone --depth 1 --branch v4.1.14 https://github.com/GMOD/jbrowse-components.git /tmp/jbrowse-src\n```\n\n### 2. Copy source files\n\n```bash\ncp -r /tmp/jbrowse-src/products/jbrowse-web/src .\ncp -r /tmp/jbrowse-src/products/jbrowse-web/scripts .\ncp -r /tmp/jbrowse-src/products/jbrowse-web/public .\ncp /tmp/jbrowse-src/products/jbrowse-web/package.json .\ncp /tmp/jbrowse-src/products/jbrowse-web/tsconfig.json .\n\n# Shared webpack config (used by build scripts)\ncp -r /tmp/jbrowse-src/webpack .\n```\n\n### 3. Remove monorepo-only files\n\n```bash\nrm -f public/test_data      # broken symlink to monorepo test data\nrm -f public/umd_plugin.js  # test-only file\nrm -rf src/tests src/__snapshots__ src/*.test.ts src/rootModel/__snapshots__ src/rootModel/*.test.ts\n```\n\n### 4. Add your config\n\n```bash\ncp build/config.json public/config.json\n```\n\n### 5. Patch package.json\n\n**Replace workspace dependencies:**\n\n```bash\nsed -i 's/\"workspace:\\^\"/\"^4.1.14\"/g' package.json\n```\n\n**Add missing peer dependencies** (MUI requires Emotion packages declared at monorepo root):\n\n```json\n\"@emotion/cache\": \"^11.14.0\",\n\"@emotion/react\": \"^11.14.0\",\n\"@emotion/styled\": \"^11.14.1\"\n```\n\n**Add devDependencies** (provided by monorepo root, must be declared explicitly here):\n\n```json\n\"devDependencies\": {\n  \"@babel/core\": \"^7.29.0\",\n  \"@babel/preset-react\": \"^7.28.5\",\n  \"@babel/preset-typescript\": \"^7.28.5\",\n  \"@pmmmwh/react-refresh-webpack-plugin\": \"^0.6.2\",\n  \"@types/node\": \"^20.19.33\",\n  \"@types/react\": \"^19.2.14\",\n  \"@types/react-dom\": \"^19.2.3\",\n  \"babel-loader\": \"^10.0.0\",\n  \"babel-plugin-react-compiler\": \"^1.0.0\",\n  \"browserslist\": \"^4.28.1\",\n  \"chalk\": \"^5.6.2\",\n  \"css-loader\": \"^7.1.4\",\n  \"html-webpack-plugin\": \"^5.6.6\",\n  \"mini-css-extract-plugin\": \"^2.10.0\",\n  \"react-refresh\": \"^0.18.0\",\n  \"rimraf\": \"^5.0.10\",\n  \"source-map-loader\": \"^5.0.0\",\n  \"style-loader\": \"^4.0.0\",\n  \"tsx\": \"^4.21.0\",\n  \"typescript\": \"^5.9.3\",\n  \"webpack\": \"^5.105.4\",\n  \"webpack-cli\": \"^5.1.4\",\n  \"webpack-dev-server\": \"^5.2.3\"\n}\n```\n\n**Update scripts** (the monorepo runs `.ts` files via custom Node loaders; standalone uses `tsx`):\n\n```json\n\"scripts\": {\n  \"start\": \"NODE_ENV=development tsx scripts/start.ts\",\n  \"build\": \"NODE_ENV=production tsx scripts/build.ts\",\n  \"prebuild\": \"rimraf build\",\n  \"serve\": \"npx http-server build -c 3600 -p 4000 --gzip --brotli\"\n}\n```\n\n### 6. Fix monorepo-relative imports in build scripts\n\n`scripts/build.ts` and `scripts/start.ts` reference webpack config three levels up. Change to the local path:\n\n```typescript\n// Before\nimport configFactory from '../../../webpack/config/webpack.config.ts'\nimport build from '../../../webpack/scripts/build.ts'\n\n// After\nimport configFactory from '../webpack/config/webpack.config.ts'\nimport build from '../webpack/scripts/build.ts'\n```\n\n### 7. Patch webpack config\n\nIn `webpack/config/webpack.config.ts`, replace the `getWorkspaces()` function that calls `pnpm recursive list` with a static path:\n\n```typescript\n// Before\nimport { execSync } from 'child_process'\nfunction getWorkspaces() {\n  const workspacesStr = execSync('pnpm recursive list --json --depth=-1', {\n    cwd: process.cwd(),\n  }).toString()\n  return Object.values(\n    JSON.parse(workspacesStr) as Record<string, { path: string }>,\n  ).map(e => e.path)\n}\n\n// After\nimport path from 'path'\nfunction getWorkspaces() {\n  return [path.resolve(process.cwd(), 'node_modules/@jbrowse')]\n}\n```\n\nThis tells webpack's babel-loader to transpile `@jbrowse/*` packages from node_modules (they ship TypeScript source).\n\n### 8. Install and build\n\n```bash\nnpm install\nnpm run build\nnpm run serve   # http://localhost:4000\n```\n\n## Upgrading to a newer JBrowse version\n\n1. Clone the new tag: `git clone --depth 1 --branch v<NEW> https://github.com/GMOD/jbrowse-components.git /tmp/jbrowse-src`\n2. Diff `products/jbrowse-web/` against current `src/` to identify upstream changes\n3. Copy updated files and re-apply the patches above\n4. Replace `workspace:^` with `^<NEW>` in package.json\n5. Check if `webpack/` config changed upstream and merge\n6. Run `npm install && npm run build` to verify\n7. Re-apply any custom modifications\n\n## Upstream\n\nBased on [GMOD/jbrowse-components](https://github.com/GMOD/jbrowse-components) v4.1.14.\n","readmeFilename":"README.md"}