0

I have built electron app using Vue CLI Plugin Electron Builder Now I need to run the app on docker I created this docker file

FROM node:16.14.0

WORKDIR /app

COPY . .

RUN ["yarn","install"]

RUN ["yarn","electron:build"]

My Package.json

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "prepare": "husky install"
  },
  "main": "background.js",
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.22",
    "@stablelib/aes-kw": "^1.0.1",
    "bcryptjs": "^2.4.3",
    "core-js": "^3.18.1",
    "ec-key": "^0.0.4",
    "express": "^4.17.3",
    "fast-xml-parser": "^3.20.3",
    "futoin-hkdf": "^1.4.2",
    "get-google-fonts": "^1.2.2",
    "net-snmp": "^3.5.5",
    "sqlite3": "^5.0.2",
    "tftp": "^0.1.2",
    "vee-validate": "^3.4.14",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.5.9",
    "vuex": "^3.4.0",
    "winston": "^3.3.3",
    "winston-transport": "^4.4.0"
  },
  "devDependencies": {
    "@mdi/js": "^6.1.95",
    "@types/bcryptjs": "^2.4.2",
    "@types/cryptr": "^4.0.1",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/elliptic": "^6.4.14",
    "@types/node": "^16.10.2",
    "@types/sqlite3": "^3.1.7",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "electron": "13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^7.18.0",
    "husky": "^7.0.0",
    "prettier": "^2.4.1",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "typescript": "~4.4.3",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-cli-plugin-vuetify": "~2.4.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }

My docker build output:

Step 1/5 : FROM node:16.14.0
 ---> b426ce8b7669
Step 2/5 : WORKDIR /app
 ---> Running in 9f59fdc419f7
Removing intermediate container 9f59fdc419f7
 ---> 61b361994727
Step 3/5 : COPY . .
 ---> 34e00a59e8dd
Step 4/5 : RUN ["yarn","install"]
 ---> Running in dfcdf7114bab
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @vue/cli-plugin-eslint@4.5.14" has incorrect peer dependency "eslint@>= 1.6.0 < 7.0.0".
warning "@vue/cli-plugin-eslint > eslint-loader@2.2.1" has incorrect peer dependency "eslint@>=1.6.0 <7.0.0".
warning " > @vue/eslint-config-prettier@6.0.0" has incorrect peer dependency "eslint-plugin-prettier@^3.1.0".
warning " > sass-loader@10.2.0" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "vue-cli-plugin-vuetify > null-loader@4.0.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > vuetify-loader@1.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "vuetify-loader > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
  • electron-builder  version=22.13.1
  • rebuilding native dependencies  dependencies=sqlite3@5.0.2 platform=linux arch=x64
  • rebuilding native dependency  name=sqlite3 version=5.0.2
$ husky install
husky - Git hooks installed
Done in 90.34s.
Removing intermediate container dfcdf7114bab
 ---> 5d22fdf008c7
Step 5/5 : RUN ["yarn","electron:build"]
 ---> Running in 92bb7231dec1
yarn run v1.22.17
$ vue-cli-service electron:build
 INFO  Bundling render process:

-  Building modern bundle for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 WARNING  Compiled with 6 warnings2:29:47 PM

Module Warning (from ./node_modules/eslint-loader/index.js):

/app/src/components/applications/keys-generator/PackageCard.vue
  115:3  warning  'mdiProgressUpload' is defined but never used  @typescript-eslint/no-unused-vars
  143:7  warning  Unexpected console statement                   no-console

✖ 2 problems (0 errors, 2 warnings)


Module Warning (from ./node_modules/eslint-loader/index.js):

/app/src/components/applications/user-managment/UserDialog.vue
  162:3   warning  'ElectronResponse' is defined but never used  @typescript-eslint/no-unused-vars
  173:10  warning  'log' is defined but never used               @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)


Module Warning (from ./node_modules/eslint-loader/index.js):

/app/src/components/wrapper/window/FiltersPackages.vue
  41:22  warning  'mdiProgressUpload' is defined but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)


Module Warning (from ./node_modules/eslint-loader/index.js):

/app/src/mixins/serial-com.mixin.ts
  528:7  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  css/chunk-vendors.c5ae0b35.css (377 KiB)
  js/chunk-vendors.a1d31b89.js (905 KiB)
  js/keys-managment~keys-packages~security-logger.0ffb2a34.js (428 KiB)
  js/pdfmake.e52466cf.js (2.06 MiB)
  js/xlsx.841a6991.js (912 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.31 MiB)
      css/chunk-vendors.c5ae0b35.css
      js/chunk-vendors.a1d31b89.js
      css/app.d57e576d.css
      js/app.4d8b94af.js


  File                                      Size             Gzipped

  dist_electron/bundled/js/pdfmake.e5246    2114.14 KiB      925.22 KiB
  6cf.js
  dist_electron/bundled/js/xlsx.841a6991    912.04 KiB       325.83 KiB
  .js
  dist_electron/bundled/js/chunk-vendors    904.95 KiB       244.40 KiB
  .a1d31b89.js
  dist_electron/bundled/js/keys-managmen    427.60 KiB       88.25 KiB
  t~keys-packages~security-logger.0ffb2a
  34.js
  dist_electron/bundled/js/canvg.01f5a96    205.99 KiB       58.35 KiB
  6.js
  dist_electron/bundled/js/keys-packages    136.88 KiB       31.62 KiB
  .3ca4ab27.js
  dist_electron/bundled/js/app.4d8b94af.    57.63 KiB        15.86 KiB
  js
  dist_electron/bundled/js/keys-managmen    51.16 KiB        12.71 KiB
  t.cf100abe.js
  dist_electron/bundled/js/keys-packages    35.22 KiB        8.85 KiB
  ~user-managment.89760328.js
  dist_electron/bundled/js/user-managmen    33.51 KiB        6.67 KiB
  t.027a79e4.js
  dist_electron/bundled/js/keys-managmen    31.05 KiB        10.05 KiB
  t~keys-packages~login~settings~user-ma
  nagment.235e8c1b.js
  dist_electron/bundled/js/security-logg    21.50 KiB        6.59 KiB
  er.4c181c4d.js
  dist_electron/bundled/js/keys-managmen    20.52 KiB        6.44 KiB
  t~keys-packages~settings~user-managmen
  t.ac08c6c6.js
  dist_electron/bundled/js/settings.cc12    12.47 KiB        3.96 KiB
  77df.js
  dist_electron/bundled/js/security-logg    11.02 KiB        3.82 KiB
  er-logs.a92c734f.js
  dist_electron/bundled/js/login.8aa3a91    7.68 KiB         2.59 KiB
  8.js
  dist_electron/bundled/css/chunk-vendor    376.90 KiB       45.69 KiB
  s.c5ae0b35.css
  dist_electron/bundled/css/keys-package    36.34 KiB        5.08 KiB
  s.9d095b6c.css
  dist_electron/bundled/css/security-log    16.58 KiB        2.27 KiB
  ger.526798ed.css
  dist_electron/bundled/css/security-log    14.08 KiB        1.36 KiB
  ger-logs.581673ed.css
  dist_electron/bundled/css/keys-package    11.42 KiB        1.81 KiB
  s~user-managment.e711b953.css
  dist_electron/bundled/css/keys-managme    8.81 KiB         1.87 KiB
  nt~keys-packages~settings~user-managme
  nt.bd1bdf30.css
  dist_electron/bundled/css/settings.060    6.46 KiB         1.21 KiB
  86f2d.css
  dist_electron/bundled/css/keys-managme    1.76 KiB         0.60 KiB
  nt.b76de2d2.css
  dist_electron/bundled/css/app.d57e576d    0.62 KiB         0.35 KiB
  .css
  dist_electron/bundled/css/user-managme    0.11 KiB         0.10 KiB
  nt.f9d6c525.css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron/bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

✔  Building modern bundle for production...
-  Bundling main process...
 DONE  Compiled successfully in 11951ms2:29:59 PM

✔  Bundling main process...
-  Bundling preload files...
  File                                   Size              Gzipped

  dist_electron/bundled/background.js    629.06 KiB        183.58 KiB

  Images and other types of assets omitted.

 DONE  Compiled successfully in 552ms2:30:00 PM

  File                                Size                Gzipped

  dist_electron/bundled/preload.js    1.35 KiB            0.65 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  • electron-builder  version=22.13.1 os=5.11.0-27-generic
  • rebuilding native dependencies  dependencies=sqlite3@5.0.2 platform=linux arch=x64
  • rebuilding native dependency  name=sqlite3 version=5.0.2
  • packaging       platform=linux arch=x64 electron=13.0.0 appOutDir=dist_electron/linux-unpacked
  • downloading     url=https://github.com/electron/electron/releases/download/v13.0.0/electron-v13.0.0-linux-x64.zip size=77 MB parts=8
  • downloaded      url=https://github.com/electron/electron/releases/download/v13.0.0/electron-v13.0.0-linux-x64.zip duration=6.438s
  • building        target=snap arch=x64 file=dist_electron/security-suite_0.2.4_amd64.snap
  • building        target=AppImage arch=x64 file=dist_electron/Elynx Security Suite-0.2.4.AppImage
  • application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/configuration/linux
  • default Electron icon is used  reason=application icon is not set
  • application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/configuration/linux
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/appimage-12.0.1/appimage-12.0.1.7z size=1.6 MB parts=1
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/snap-template-4.0-2/snap-template-electron-4.0-2-amd64.tar.7z size=1.5 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/appimage-12.0.1/appimage-12.0.1.7z duration=1.942s
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/snap-template-4.0-2/snap-template-electron-4.0-2-amd64.tar.7z duration=1.985s
 DONE  Build complete!
Done in 135.98s.
Removing intermediate container 92bb7231dec1
 ---> d35fbfedea1d
Successfully built d35fbfedea1d

Now I ran the container with -it and cd into dist_electron And I have these files:

ls -l
total 166648
-rwxr-xr-x 1 root root 91678318 Mar  6 14:30 'appName.AppImage'
-rw-r--r-- 1 root root      702 Mar  6 14:30  builder-debug.yml
drwxr-xr-x 7 root root     4096 Mar  6 14:30  bundled
drwxr-xr-x 5 root root     4096 Mar  6 14:30  linux-unpacked
-rw-r--r-- 1 root root 78954496 Mar  6 14:30  appName.snap

I tried running appName.AppImage but I got bash: sudo: command not found I also tried chmod +X appName.AppImage but got same result. I found this issue on github but it didn`t helped me How can I run the .AppImage file inside the container?

ATT
  • 921
  • 3
  • 13
  • 30
  • I wouldn't try running a GUI application inside a container, but see [Can you run GUI applications in a Linux Docker container?](https://stackoverflow.com/questions/16296753/can-you-run-gui-applications-in-a-linux-docker-container) for a (involved, fragile, Linux-only) approach. I'm guessing the runnable binary will be in that `linux-unpacked` directory. – David Maze Mar 06 '22 at 20:53
  • I'm not running it as GUI app. I had to implement server configuration for the business logic. See this https://stackoverflow.com/questions/71305880/add-express-server-and-dockerize-app-built-with-vue-electron-builder – ATT Mar 07 '22 at 03:17

1 Answers1

0

Something you need to be aware of, that many people are missing: Docker is a different operating system than Linux, it is build on top of Linux kernel but has a different package manager (dockerhub), different handling of hardware (aka no support in most cases), different way of handing the filesystem (it uses the network stack making many operations inefficient) and processes (no IPC), etc.

One of the things that almost every linux distro has are core applications: cron, init daemon, sudo, etc.

In your case the missing component is sudo, generally you can just remove it from your commands, but if its placed deep inside the application, it might be easier to install sudo (lot of work) than to modify your code, especially since that might cause compatibility issues on non-docker environments.

Another problem you might get into is that running AppImage files has 1 requirement: fuse, aka another thing that is installed on almost every Linux distribution, but is missing in docker, and here you might have problems, since I don't think its possible to install fuse in docker (docker will actively block you from doing it for security reasons). As a workaround you might try to run it with --appimage-extract-and-run parameter, but my suggestion would be to just ditch docker and run the AppImage natively, it should work on almost every Linux distro.

And my last suggestion: If you need root access you are most likely doing something wrong. I don't know your application and what is it used for, but its generally better to avoid root access if you don't absolutely need it. So if your application is not some administration tool, try to figure out why its running sudo, and if possible make it not do it.

HubertNNN
  • 1,727
  • 1
  • 14
  • 29