Use desktop build inside docker (#1350)

## Launch Checklist

This PR uses the maputnik CLI inside the docker container to allow
loading of files into the container and watch for changes.

 - [x] Briefly describe the changes in this PR.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -7,17 +7,7 @@ on:
     branches: [ main ]
 
 jobs:
-  build-docker:
-    name: build docker
-    runs-on: ubuntu-latest
 
-    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
-
-    steps:
-      - uses: actions/checkout@v5
-      - run: docker build -t test-docker-image-build .
-
-  # build the editor
   build-node:
     name: "build on ${{ matrix.os }}"
     runs-on: ${{ matrix.os }}
@@ -89,13 +79,9 @@ jobs:
           path: ./desktop/bin/windows/
 
   e2e-tests:
-    name: "E2E tests using ${{ matrix.browser }}"
+    name: "E2E tests using chrome"
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [ chrome ]
 
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v5
@@ -105,7 +91,27 @@ jobs:
         with:
           build: npm run build
           start: npm run start
-          browser: ${{ matrix.browser }}
+          browser: chrome
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          files: ${{ github.workspace }}/.nyc_output/out.json
+          verbose: true
+
+  e2e-tests-docker:
+    name: "E2E tests using chrome and docker"
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - run: npm ci
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: docker build -t maputnik .
+          start: docker run --rm --network host maputnik --port=8888
+          browser: chrome
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v5
         with:

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Refactor Field components to use arrow function syntax
 - Replace react-autocomplete with Downshift in the autocomplete component
 - Add LocationIQ as supported map provider with access token field and gallery style
+- Use maputnik go binary for the docker image to allow file watching
 - Revmove support for `debug` and `localport` url parameters
 - Replace react-sortable-hoc with dnd-kit to avoid react console warnings and also use a maintained library
 - _...Add new stuff here..._

Dockerfile

@@ -1,16 +1,14 @@
-FROM node:22 as builder
+FROM golang:1.23-alpine AS builder
 WORKDIR /maputnik
 
-# Only copy package.json to prevent npm install from running on every build
+RUN apk add --no-cache nodejs npm make git gcc g++ libc-dev
-COPY package.json package-lock.json .npmrc ./
-RUN npm ci
 
 # Build maputnik
 COPY . .
-RUN npx vite build
+RUN npm ci
+RUN CGO_ENABLED=1 GOOS=linux npm run build-linux
 
-#---------------------------------------------------------------------------
+FROM alpine:latest
-# Create a clean nginx-alpine slim image with just the build results
+WORKDIR /app
-FROM nginx:alpine-slim
+COPY --from=builder /maputnik/desktop/bin/linux ./
-
+ENTRYPOINT ["/app/maputnik"]
-COPY --from=builder /maputnik/dist /usr/share/nginx/html/

README.md

@@ -18,9 +18,15 @@ targeted at developers and map designers.
 - In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
 
 ```bash
-docker run -it --rm -p 8888:80 ghcr.io/maplibre/maputnik:main
+docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main
 ```
 
+To see the CLI options (for example file watching or style serving) run:
+```bash
+docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main --help
+```
+You might need to mount a volume (`-v`) to be able to use these options.
+
 ## Documentation
 
 The documentation can be found in the [Wiki](https://github.com/maplibre/maputnik/wiki). You are welcome to collaborate!

desktop/Makefile

@@ -2,8 +2,7 @@ SOURCEDIR=.
 SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
 BINARY=maputnik
 VERSION := $(shell node -p "require('../package.json').version")
-GOPATH := $(if $(GOPATH),$(GOPATH),$(HOME)/go)
+GOBIN := $(or $(shell if [ -d /go/bin ]; then echo "/go/bin"; fi),$(HOME)/go/bin)
-GOBIN := $(if $(GOBIN),$(GOBIN),$(HOME)/go/bin)
 
 all: $(BINARY)
 
@@ -11,6 +10,10 @@ $(BINARY): $(GOBIN)/gox $(GOBIN)/go-winres $(SOURCES) version.go rice-box.go win
 	$(GOBIN)/go-winres make --product-version=$(VERSION)
 	$(GOBIN)/gox -osarch "windows/amd64 linux/amd64 darwin/amd64" -output "bin/{{.OS}}/${BINARY}"
 
+bin/linux/$(BINARY): $(GOBIN)/gox $(GOBIN)/go-winres $(SOURCES) version.go rice-box.go winres/winres.json
+	$(GOBIN)/go-winres make --product-version=$(VERSION)
+	$(GOBIN)/gox -osarch "linux/amd64" -output "bin/{{.OS}}/${BINARY}"
+
 winres/winres.json: winres/winres_template.json
 	sed 's/{{.Version}}/$(VERSION)/g' winres/winres_template.json > $@
 

desktop/maputnik.go

@@ -5,8 +5,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
-
+    "github.com/GeertJohan/go.rice"
-        "github.com/GeertJohan/go.rice"
 	"github.com/gorilla/handlers"
 	"github.com/gorilla/mux"
 	"github.com/maputnik/desktop/filewatch"

package.json

@@ -8,6 +8,7 @@
     "start": "vite",
     "build": "tsc && vite build --mode=production",
     "build-desktop": "tsc && vite build --mode=desktop && cd desktop && make",
+    "build-linux": "tsc && vite build --mode=desktop && cd desktop && make bin/linux/maputnik",
     "i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
     "lint": "eslint",
     "test": "cypress run",