> ## Documentation Index
> Fetch the complete documentation index at: https://site.aspect.build/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript — Aspect Build Blog

> 11 JavaScript posts from the Aspect Build engineering blog on Bazel and developer productivity.

export const BlogCard = ({title, description, date, authors, tags, image, href, children}) => {
  const tagList = tags ? tags.split(", ").filter(Boolean) : [];
  const tagSlug = t => t.toLowerCase().replace(/&/g, "").replace(/\+/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
  const formattedDate = date ? new Date(date + "T00:00:00").toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric"
  }) : "";
  const resolvedImage = typeof image === "string" && image.trim() === "" ? null : image;
  return <div data-tags={tagList.join(",")} className="blog-card flex flex-col rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 overflow-hidden hover:shadow-lg transition group">
      <a href={href} className="block">
        {resolvedImage ? typeof resolvedImage === "string" ? <img noZoom src={resolvedImage} alt={title} className="w-full" style={{
    height: "180px",
    objectFit: "cover"
  }} /> : <div className="blog-card-image">{resolvedImage}</div> : children ? <div className="blog-card-image">{children}</div> : null}
        <div className="px-5 pt-5">
          <h3 className="text-lg font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">
            {title}
          </h3>
          {description && <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2">
              {description}
            </p>}
          <div className="flex items-center gap-2 mt-3 text-xs text-zinc-500 dark:text-zinc-400">
            {authors && <span>{authors}</span>}
            {authors && formattedDate && <span>·</span>}
            {formattedDate && <span>{formattedDate}</span>}
          </div>
        </div>
      </a>
      {tagList.length > 0 && <div className="flex flex-wrap gap-1.5 px-5 pb-4 pt-3 mt-auto">
          {tagList.map(tag => <a key={tag} href={"/blog/tags/" + tagSlug(tag)} className="px-2 py-0.5 rounded-full text-xs bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-blue-100 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300 transition">
              {tag}
            </a>)}
        </div>}
    </div>;
};

export const MarketingPage = () => <div className="marketing-page-marker" style={{
  display: "none"
}} />;

export const Section = ({children, className = "", gray = false, dark = false, id}) => <section id={id} className={`w-full flex justify-center px-4 py-16 md:py-24 ${gray ? "bg-gray-50 dark:bg-zinc-900" : dark ? "bg-zinc-900 dark:bg-zinc-950" : ""} ${className}`}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {children}
    </div>
  </section>;

export const Hero = ({title, subtitle, badge, eyebrow, heroImageClassName = "", primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#", centered = true, children}) => <section className="w-full flex justify-center px-4 pt-16 pb-16 md:pt-24 md:pb-24" style={{
  background: "linear-gradient(180deg, var(--hero-gradient-start, #f8fafc) 0%, var(--hero-gradient-end, #ffffff) 100%)"
}}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {centered && !children ? <div className="flex flex-col items-center text-center">
          {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
              {badge}
            </div>}
          {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
              {eyebrow}
            </div>}
          <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight" style={{
  maxWidth: "820px"
}}>
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
          {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem",
  maxWidth: "600px"
}}>
              {subtitle}
            </div>}
          <div className="flex flex-wrap gap-3 mt-10 justify-center">
            {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                {primaryCta}
              </a>}
            {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                {secondaryCta}
              </a>}
          </div>
        </div> : <div className="flex flex-col md:flex-row items-center gap-10 md:gap-16">
          <div className="flex-1 min-w-0">
            {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
                {badge}
              </div>}
            {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
                {eyebrow}
              </div>}
            <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight">
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
            {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem"
}}>
                {subtitle}
              </div>}
            <div className="flex flex-wrap gap-3 mt-8">
              {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                  {primaryCta}
                </a>}
              {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                  {secondaryCta}
                </a>}
            </div>
          </div>
          {children && <div className={`flex-1 min-w-0 hero-image ${heroImageClassName}`}>
              {children}
            </div>}
        </div>}
    </div>
  </section>;

<MarketingPage />

<Hero title="Posts tagged JavaScript" subtitle="Engineering writing from the Aspect team on JavaScript." centered={true} />

<Section>
  <div className="mb-8">
    <a href="/blog" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">← All posts</a>
    <span className="mx-2 text-zinc-400">·</span>
    <a href="/blog/tags" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Browse all tags</a>
  </div>

  <div className="marketing-grid-3">
    <BlogCard title="rules_js 3.0 - out with the old (and default to the new)" description="What’s new in rules_js 3.0: default MODULE.bazel, removed old APIs and pnpm 8, and improved maintainability and correctness. Ideal upgrade path" date="2026-02-09" authors="Jason Bedard" href="/blog/rules-js-3" tags="JavaScript, Releases, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-d01957e7c5.jpg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=1e8b1d03278fff6cbe78514090f0697a" alt="" width="1600" height="1067" data-path="images/blog/hashnode/hn-d01957e7c5.jpg" />
    </BlogCard>

    <BlogCard title="Pnpm v10 and rules_js: Better Alignment and Improved Build Determinism" description="Pnpm v10 improves build determinism with rules_js, offering enhanced performance and reliability for Bazel-based workflows" date="2025-07-22" authors="Jason Bedard" href="/blog/pnpm-v10-and-rulesjs" tags="JavaScript, Releases, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-8e9d8d5326.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=1c827c3d448a78ce938e4ea2508e01c5" alt="" width="1365" height="768" data-path="images/blog/hashnode/hn-8e9d8d5326.jpeg" />
    </BlogCard>

    <BlogCard title="Containerizing JavaScript Applications with Bazel" description="Learn how to optimize JavaScript container builds with rules_js's JsImageLayer. Discover layer groups for better build times and deployment efficiency." date="2025-04-21" authors="Şahin Yort" href="/blog/containerizing-javascript-applications-with-bazel" tags="Containers & OCI, JavaScript, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-7740d73e29.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=9d9c952fa795dc8b9abe4833c006be4b" alt="" width="1600" height="1064" data-path="images/blog/hashnode/hn-7740d73e29.jpeg" />
    </BlogCard>

    <BlogCard title="rules_js 2.0" description="Upgrade to Aspect's rules_js 2.0 for faster Bazel builds, secure pnpm v9 support, direct js_library linking, and enhanced ESLint integration." date="2024-08-15" authors="Alex Eagle" href="/blog/rulesjs-2" tags="JavaScript, Releases, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-f046c7a577.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=9fc51a50952cd682a345d0034fd344d5" alt="" width="1600" height="1067" data-path="images/blog/hashnode/hn-f046c7a577.jpeg" />
    </BlogCard>

    <BlogCard title="Easier merges on lockfiles" description="Resolve lockfile merge conflicts automatically with Git's 'ours' merge driver, streamlining your workflow and avoiding manual fixes." date="2024-01-22" authors="Alex Eagle" href="/blog/easier-merges-on-lockfiles" tags="Monorepo, JavaScript, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-9859a7d82b.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=f17678cae0fa97182f07910fa550feab" alt="" width="1254" height="836" data-path="images/blog/hashnode/hn-9859a7d82b.jpeg" />
    </BlogCard>

    <BlogCard title="Angular with Bazel" description="Learn how to integrate Angular and Bazel using rules_js for better performance and compatibility." date="2022-08-30" authors="Jason Bedard" href="/blog/angular-with-bazel" tags="JavaScript, TypeScript, Migration, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-1c1e687e2a.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=6e8a820ec86a9a9acfbf9be30a034a72" alt="" width="1600" height="1143" data-path="images/blog/hashnode/hn-1c1e687e2a.jpeg" />
    </BlogCard>

    <BlogCard title="rules_js 1.0.0" description="Upgrade to rules_js 1.0.0 for faster JavaScript build, test, and release tooling under Bazel. Get support from Aspect" date="2022-08-08" authors="Alex Eagle" href="/blog/rulesjs-launch" tags="JavaScript, Releases, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-96f18ecb71.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=d21eafe3ff9f3d648f4fb66a067c1e4e" alt="" width="1600" height="1280" data-path="images/blog/hashnode/hn-96f18ecb71.jpeg" />
    </BlogCard>

    <BlogCard title="rules_ts benchmarks" description="Discover the performance benchmarks of rules_ts, comparing ts_project with older rules and vanilla TypeScript compiler for faster builds" date="2022-06-21" authors="Greg Magolan" href="/blog/rules-ts-benchmarks" tags="TypeScript, Performance, JavaScript, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-d5dfbeef88.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=c8f14da503810036fdf014af6659a0d6" alt="" width="1600" height="1067" data-path="images/blog/hashnode/hn-d5dfbeef88.jpeg" />
    </BlogCard>

    <BlogCard title="rules_js npm benchmarks" description="Discover the performance benchmarks of rules_js npm tool compared to rules_nodejs and non-Bazel npm tools" date="2022-06-15" authors="Greg Magolan" href="/blog/rulesjs-npm-benchmarks" tags="JavaScript, Performance, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-7588bcce70.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=3a5d87eb7aee9dac1e9ced6769bf6a3e" alt="" width="1600" height="1067" data-path="images/blog/hashnode/hn-7588bcce70.jpeg" />
    </BlogCard>

    <BlogCard title="Bazel for Frontend: Introducing rules_js" description="Transform your frontend workflow with rules_js: faster builds, simplified tooling, and improved performance. Get started now!" date="2022-06-15" authors="Alex Eagle" href="/blog/rules-js" tags="JavaScript, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-b5daa3a554.jpeg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=daf7fccd7c33a1c482a9a360a016030c" alt="" width="1600" height="1067" data-path="images/blog/hashnode/hn-b5daa3a554.jpeg" />
    </BlogCard>

    <BlogCard title="Deterministic npm dependencies with Bazel" description="Use Bazel with npm for deterministic dependencies, faster builds, reduced CI times, and cost savings; fix non-determinism for efficient development" date="2022-03-13" authors="Greg Magolan" href="/blog/npm-determinism" tags="JavaScript, Bazel">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/blog/hashnode/hn-a725fab373.jpg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=bf1cb2f2d555988e3d8467f515e88ef9" alt="" width="1260" height="840" data-path="images/blog/hashnode/hn-a725fab373.jpg" />
    </BlogCard>
  </div>
</Section>