instapack

instapack is a zero-configuration command-line build tool that compiles TypeScript and Sass into optimized web application bundles, distributed as the npm package instapack.

What is instapack?

instapack is an all-in-one TypeScript and Sass compiler for web applications, powered by webpack and maintained by ryanelian on GitHub. It accepts a fixed client/js/index.ts entry point and a client/css/index.scss stylesheet, and produces ipack.js, ipack.dll.js, and ipack.css in a configurable output folder (default wwwroot). It runs on Node.js 12 or 14 LTS and can be installed globally or per project.

Key Features

• Zero-configuration defaults — With a default client input folder and wwwroot output, ipack builds the project without any config file; all settings live in the instapack key of package.json.
• Project scaffolding — ipack new generates ready-to-run projects for empty, react (React + Bootstrap 5), vue (Vue 3 + Bootstrap 5), vue2, blazor (ASP.NET Core Blazor), and angularjs (ES5, Bootstrap 3) templates; react is the default.
• Framework compilers built in — Supports Vue 2/Vue 3 Single-File Components, React (including JSX), AngularJS templates, and TypeScript JSX; Vue SFC <script lang="ts"> is linted automatically.
• Rich build flags — -w watch, -d dev mode without minification, -s serve with Hot Reload, -R React Fast Refresh, --https with mkcert, --stats for webpack-bundle-analyzer, and --no-sourcemaps.
• TypeScript module ecosystem — Imports ES modules, CommonJS require, dynamic import() for code splitting, JSON modules, and HTML templates (with shim declarations); TypeScript paths and baseUrl are translated into webpack aliases automatically.
• Sass module system — Uses @use, @forward, and @import, resolves node_modules packages, partial files, and index files, and applies Autoprefixer automatically; plain CSS imports ending in .css are left as external imports.
• Babel and ESLint integration — .babelrc transformations run after TypeScript compilation; ESLint 7 runs in memory during type-check, with example configs for Vue and React.
• Environment variables — Reads a .env file in the root and accepts --env.KEY=value flags, merged with flag values taking priority.

Who is it for?

• ASP.NET Core developers who want to build client-side TypeScript and Sass into wwwroot and call TypeScript functions from C# via Blazor JS Interop using the namespace configuration.
• Front-end developers who dislike configuring webpack who want a project that "just works" with a standard entry point and automatic bundling, minification, tree-shaking, and sourcemaps.
• Teams needing consistent builds who want to standardize the same build tool across multiple projects and CI pipelines, including Docker and GitLab CI examples.
• Developers maintaining multiple front-end projects who can "eject" client folders into separate projects with different package.json and tsconfig.json settings and redirect outputs into a shared backend assets folder.

What can you do with instapack?

• Blazor developers: scaffold a project with ipack new blazor, export TypeScript functions through a namespace, and invoke instapack.foo() from C# with JsRuntime.InvokeAsync.
• Vue 3 developers: run ipack new vue for a Vue 3 + Bootstrap 5 project; edit .vue Single-File Components with Hot Reload out of the box in -s mode.
• React developers: use -R to enable Fast Refresh, or configure react-hot-loader manually; ipack new react includes Bootstrap 5.
• Legacy AngularJS teams: use the angularjs template to target ES5 browsers (IE10+) with Bootstrap 3 and jquery-validation-unobtrusive for ASP.NET MVC client-side validation.

How does instapack work?

After installing the npm package globally or locally, create a project with ipack new empty or another template, then run ipack to compile. The build reads client/js/index.ts and client/css/index.scss, resolves imports from node_modules, splits vendor code into ipack.dll.js, and writes final assets into wwwroot; run ipack -s for a Hot Reload dev server.

FAQ

Can I use any JavaScript framework with instapack?

Yes — anything that works with plain JS and webpack will work with instapack. Frameworks not included in templates, such as Angular 2+, Preact, Inferno.js, and Mithril.js, are known to work; custom file formats like .vue are supported if they also support TypeScript.

Is it safe to target ES2015?

The README targets ES2015, which is supported by all major browsers except Internet Explorer; iOS 10.3 and above supports it. Microsoft no longer supports IE11, and the Chromium-based Edge provides IE Mode for legacy sites.

Can I change the entry point or build multiple entry points?

No. The entry points are fixed at client/js/index.ts and client/css/index.scss, and only one entry point per project is supported. For multiple front-ends, eject separate projects and redirect the output folder into the backend.

How do I debug instapack builds in Visual Studio Code?

Install the Debugger for Chrome extension, create a .vscode/launch.json with a Chrome launch configuration pointing at your app URL, and press F5. Sourcemaps are generated by default; use --no-sourcemaps to disable them.