ci: test docker builds for PRs and pushes on master

[CalvinTPark]

Related Issue

fix #116

Details

Adds GitHub CI workflow to test docker image builds.

Helps ensure repo changes build and are tested against a sample SPFx project:

• Builds docker image on:
  • linux/amd64
  • linux/arm64/v8
• Creates and builds a sample SPFx react webpart

See example runs:

• CalvinTPark/docker-spfx workflow (20881679928)-1
  
• CalvinTPark/docker-spfx workflow (20881679928)-2
  
  • Build with docker buildkit cache:
  • 

GitHub Docker Report example (build) [Click to open]

Docker Build summary

For a detailed look at the build, download the following build record archive and import it into Docker Desktop's Builds view.
Build records include details such as timing, dependencies, results, logs, traces, and other information about a build. Learn more

⬇️ CalvinTPark~docker-spfx~N682B3.dockerbuild (36.43 KB - includes 1 build record)

Find this useful? Let us know

ID	Name	Status	Cached	Duration
N682B3	docker-spfx (default)	✅ completed	50%	2s

Build inputs

workdir: .
set:
  - '*.cache-from=type=gha,scope=dockerspfx'
  - '*.cache-to=type=gha,scope=dockerspfx,mode=max'
targets:
  - default

Bake definition

{
  "group": {
    "default": {
      "targets": [
        "default"
      ]
    }
  },
  "target": {
    "default": {
      "context": ".",
      "dockerfile": "Dockerfile",
      "tags": [
        "docker.io/m365pnp/spfx:latest",
        "docker.io/m365pnp/spfx:online"
      ],
      "cache-from": [
        {
          "scope": "dockerspfx",
          "type": "gha"
        }
      ],
      "cache-to": [
        {
          "mode": "max",
          "scope": "dockerspfx",
          "type": "gha"
        }
      ],
      "target": "default",
      "platforms": [
        "linux/amd64",
        "linux/arm64/v8"
      ]
    }
  }
}

---

GitHub Docker Report example (test) [Click to open]

Docker Build summary

For a detailed look at the build, download the following build record archive and import it into Docker Desktop's Builds view.
Build records include details such as timing, dependencies, results, logs, traces, and other information about a build. Learn more

⬇️ CalvinTPark~docker-spfx~0RMDXK.dockerbuild (74.39 KB - includes 1 build record)

Find this useful? Let us know

ID	Name	Status	Cached	Duration
0RMDXK	docker-spfx	✅ completed	27%	6m21s

Build inputs

workdir: .
set:
  - '*.cache-from=type=gha,scope=dockerspfx'
  - '*.cache-to=type=gha,scope=dockerspfx,mode=max'
targets:
  - test

Bake definition

{
  "group": {
    "default": {
      "targets": [
        "test"
      ]
    }
  },
  "target": {
    "test": {
      "context": ".",
      "dockerfile": "Dockerfile",
      "cache-from": [
        {
          "scope": "dockerspfx",
          "type": "gha"
        }
      ],
      "cache-to": [
        {
          "mode": "max",
          "scope": "dockerspfx",
          "type": "gha"
        }
      ],
      "platforms": [
        "linux/amd64",
        "linux/arm64/v8"
      ],
      "output": [
        {
          "type": "cacheonly"
        }
      ]
    }
  }
}

---

Potential task: fix the PNPM cache across test runs

[Copilot]

Pull request overview

This PR adds continuous integration testing for Docker image builds on PRs and pushes to the master branch. The workflow validates that the Docker image can be successfully built on both linux/amd64 and linux/arm64/v8 platforms and can create and build a sample SPFx React webpart project.

Changes:

• Adds new CI workflow that builds the Docker image and tests it by creating a sample SPFx webpart
• Converts Dockerfile to multi-stage build with test stages for automated validation
• Adds docker-bake.hcl configuration for managing build targets and platforms

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
.github/workflows/ci.yml	New CI workflow that builds and tests the Docker image on PRs and master branch pushes
docker-bake.hcl	New Docker Bake configuration defining build targets for default image and test scenarios
Dockerfile	Refactored to multi-stage build with test stages (test-base, test-webpart) for CI validation
.github/workflows/build-and-push.yaml	Updated to specify the 'default' build target for consistency with new multi-stage structure
.gitattributes	Enforces LF line endings for consistent cross-platform behavior
.dockerignore	Excludes unnecessary files from Docker build context (.github, assets, OS-specific files)
README.md	Adds documentation section with examples for building and running custom images

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Inconsistent indentation: this line uses 4 spaces for indentation while the rest of the file uses 2 spaces. This should be adjusted to maintain consistent YAML formatting.

Suggested change

	cleanup: false
	cleanup: false

[Copilot]

Inconsistent indentation: this line uses 4 spaces for indentation while the rest of the file uses 2 spaces. This should be adjusted to maintain consistent YAML formatting.

[Copilot]

The yo command is missing the '--no-insight' flag that's shown in the CONTRIBUTING.md examples. Without this flag, the Yeoman generator may attempt to send telemetry and could cause interactive prompts or delays during the automated build process.

Suggested change

	--package-manager pnpm \
	--package-manager pnpm \
	--no-insight \

[Copilot]

The pnpm cache mount may not be effective because pnpm is not configured to use the custom store directory. Consider adding 'pnpm config set store-dir /usr/app/spfx/test/.pnpm-store' before running 'pnpm install' to ensure the cache mount is actually utilized.

Suggested change

	RUN pnpm config set store-dir /usr/app/spfx/test/.pnpm-store

[Copilot]

The "test" target definition is missing the "target" field that specifies which Dockerfile build stage to build. Based on the Dockerfile, this should be 'target = "test-webpart"'. The "targets" field appears to be invalid syntax for a bake target definition - it's typically used in group definitions, not target definitions.

Suggested change

	targets = [
	"test-webpart"
	]
	target = "test-webpart"

[Copilot]

The ci.yml workflow uses actions/checkout@v6 while the existing build-and-push.yaml workflow uses actions/checkout@v4. These should use the same version for consistency across the repository's CI workflows.

[Copilot]

The ci.yml workflow uses actions/checkout@v6 while the existing build-and-push.yaml workflow uses actions/checkout@v4. These should use the same version for consistency across the repository's CI workflows.