Build Once, Deploy Many: Artifact Sharing Between Frontend & Backend

Stop rebuilding. Start sharing.

We’ve all been there. You fix a small UI bug, push the frontend, and your CI dutifully rebuilds the entire backend too. Or vice versa. Hours wasted. Caches invalidated. Patience gone.

But what if you could build once and deploy anywhere?

The Problem
Most monorepos treat frontend and backend as separate build pipelines. Each deployment triggers:

Fresh npm install

Full compilation

Asset generation

Testing suites

For a typical Next.js + Node backend, that’s 2–4 minutes per deploy. Multiply by daily commits → you’re burning 10+ hours monthly on redundant builds.

The Solution: Shared Artifacts
Artifact sharing means building a deployable package once, then promoting that same artifact across environments (dev, staging, production) and even across services.

How It Works (Simple Example)
yaml

.github/workflows/build.yml

name: Build
on: push

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci
- run: npm run build

  # Upload shared artifact
  - uses: actions/upload-artifact@v3
    with:
      name: app-artifact
      path: |
        dist/
        node_modules/
        package.json

Then in your deploy jobs:

yaml
deploy-frontend:
needs: build
uses: ./.github/workflows/deploy.yml
with:
artifact-name: app-artifact
target: frontend

deploy-backend:
needs: build
uses: ./.github/workflows/deploy.yml
with:
artifact-name: app-artifact
target: backend
Real Benefits
✅ Faster CI — Build once in 90 seconds instead of twice in 4 minutes
✅ Consistency — Same code hits every environment
✅ Traceability — One commit hash = one artifact version
✅ Atomic deploys — Frontend/backend always in sync

When It Gets Tricky
Environment-specific config — Don’t bake API keys into artifacts. Use runtime env vars or a config service.

Different runtimes — Works best when frontend (Node) and backend share the same runtime. For static frontends, just share the asset manifest.

Large artifacts — Cache node_modules separately. Upload only dist/ and a package.json.

Pro Tips
Use tarballs — npm pack your shared code into a .tgz file

Leverage Docker layers — Build once, tag with commit SHA, deploy same image everywhere

Artifact registry — Store builds in S3/Nexus/GitHub Packages for permanent reference

Real-World Example
At [Company X], we moved from 12 separate pipelines to 4 shared artifacts. Deployment time dropped from 22 minutes to 6 minutes. Developer frustration? Zero.

Start small. Pick one shared module (UI components? validation logic?). Build once. Deploy everywhere.

Your CI runner will thank you.

What’s your biggest build bottleneck? Let me know in the comments. 👇