How to run an electron app on docker

Running Electron applications on Docker involves several key steps, including creating an appropriate Dockerfile to configure the runtime environment, installing Electron and its dependencies, and ensuring the container can run GUI applications correctly. I will explain each step in detail and provide a practical example.

Step 1: Create the Dockerfile

First, you need to create a Dockerfile. This file defines all the steps required to build a Docker image. As Electron is a framework built on Chromium, it requires an environment that supports GUI applications. Here is an example Dockerfile using Debian as the base image and installing necessary packages:

Dockerfile
# Use the official Node.js as the base image
FROM node:12-slim

# Install Xvfb and other dependencies; Xvfb is a virtual framebuffer that allows executing graphical applications without display hardware
RUN apt-get update && apt-get install -y \n    xvfb \n    x11-xkb-utils \n    xfonts-100dpi \n    xfonts-75dpi \n    xfonts-scalable \n    xfonts-cyrillic \n    x11-apps \n    clang \n    libdbus-1-dev \n    libgtk-3-dev \n    libnotify-dev \n    libgnome-keyring-dev \n    libgconf2-dev \n    libasound2-dev \n    libcap-dev \n    libcups2-dev \n    libxtst-dev \n    libxss1 \n    libnss3-dev \n    libsasl2-dev \n    libx11-xcb-dev

# Set the working directory
WORKDIR /usr/src/app

# Copy application source code
COPY . .

# Install application dependencies
RUN npm install

# Add the execution script to start Xvfb and Electron
COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint.sh

ENTRYPOINT ["docker-entrypoint.sh"]

Step 2: Create the Startup Script

You need a startup script to launch Xvfb and run your Electron application. This script will be set as the Docker container's ENTRYPOINT. Here is an example script:

bash
#!/bin/bash

# Start Xvfb
Xvfb :99 -screen 0 1024x768x16 &
export DISPLAY=:99

# Run the Electron application
exec npm start

Ensure that this script is included in your project and added to the Dockerfile using the COPY instruction before building the Docker image.

Step 3: Build and Run the Docker Container

Finally, use the following commands to build the Docker image and run the container:

bash
docker build -t my-electron-app .
docker run -it --rm my-electron-app

These steps will build a Docker image containing your Electron application and all necessary dependencies, then run it using Xvfb as the virtual display environment.

This method is suitable for running Electron applications in headless servers or any environment without physical display hardware.