[Solved] Running electron:serve inside docker

[St-Ex]

TL;DR;

I've managed to run electron:serve inside a docker with current user (no root file created) and with x11 binding. I don't know where to put this in the documentation.

Context

I always work with docker because I don't like to install to much stuff on my machine (Yes Node I'm looking at you). I'm doing this for all my Vue apps but I've battled for 3 days to do this with Vue+Electron especially with :

• linking X11
• Working with userid and chromium sandboxing

Solution

Create docker image base on the node you want:

FROM node:12

RUN apt update \
    && apt install -yqq \
        libnss3 \
        libgtk-3-0 \
        libxss1 \
        libasound2

docker build -t mydevimage .

Change electron:serve command in packge.json

- "electron:serve": "vue-cli-service electron:serve",
+ "electron:serve": "vue-cli-service electron:serve --no-sandbox",

Install and run

docker run --rm -it \
    --env ELECTRON_CACHE="/app/.cache/electron" \
    --env ELECTRON_BUILDER_CACHE="/app/.cache/electron-builder" \
    --env YARN_CACHE_FOLDER="/app/.cache/yarn" \
    --env="DISPLAY" \
    --volume="$(pwd):/app" \
    --volume="${HOME}/.Xauthority:/root/.Xauthority:rw" \
    -it --net=host  \
    -u "$(id -u):$(id -g)" \
    -w "/app" \
   mydevimage bash -c "yarn && yarn electron:serve"

[aviTwito]

I'm trying to run production version on a container. Would you take a look? https://stackoverflow.com/questions/71371276/how-to-run-appimage-electron-app-file-on-docker-container