Search code examples
reactjslinuxelectronelectron-builderappimage

Electron .AppImage distribution app cannot be opened, when downloaded from the web site

I have an Electron app, which I have to publish, and I am having issues with the Linux distribution version. For Linux, I've decided to build an .AppImage distribution file and the problem is that the built AppImage launches successfully on the host machine where the app was built on, and on other machines too. But, when I try to upload the app on the website, where it has to be downloaded from, and launch the downloaded app, such a screen appears.

The screen which appears, when launching the app, downloaded from the internet

Here's the content of my package.json file :

{
  "name": "electron-app",
  "productName": "electronApp",
  "main": "public/electron.js",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "author": {
    "name": "John Doe",
    "email": "[email protected]"
  },
  "build": {
    "appId": "app.com.electron",
    "productName": "electronApp",
    "linux": {
      "target": [
        {
          "target": "AppImage",
          "arch": [
            "x64",
            "ia32",
            "armv7l",
            "arm64”"
          ],
        }
      ]
     },
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "dependencies": {
    "apexcharts": "^3.10.1",
    "apisauce": "^1.0.3",
    "cross-env": "^6.0.3",
    "electron-is-dev": "^1.1.0",
    "electron-root-path": "^1.0.16",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-code-input": "^3.8.1",
    "react-dom": "^16.8.6",
    "react-loading-overlay": "^1.0.1",
    "react-notification-system": "^0.3.0",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.0.1",
    "react-tradingview-widget": "^1.3.2",
    "react-web-tabs": "^1.0.1",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
    "reduxsauce": "^1.1.0",
    "seamless-immutable": "^7.1.4"
  },
  "scripts": {
    "lint": "eslint",
    "build": "yarn react-build && yarn electron-build",
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-postinstall": "electron-builder install-app-deps",
    "electron-start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-build": "electron-builder"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/jest": "^24.0.15",
    "@types/react": "^16.8.22",
    "@types/react-redux": "^7.1.1",
    "babel-eslint": "10.0.1",
    "concurrently": "^5.0.0",
    "electron": "^7.1.1",
    "electron-builder": "^21.2.0",
    "eslint": "5.16.0",
    "eslint-plugin-react": "^7.14.2",
    "wait-on": "^3.3.0"
  }
}

I don't know, maybe I need some additional dependencies, like for the .deb version, but I really, do not have a clue, what the problem can be in...

Solution

  • This is a Desktop Environment/File Manager issue. They are recognizing the file type properly but they don't execute it (as they should).

    The probable cause of this issue is that the AppImage file doesn't have execution permissions (they are not preserved when the file is downloaded). The immediate solution is to ask your users to make it executable. You can achieve this by using checking the "allow execution" permission in the file properties tab of your file manager or by using the command line instruction:

    chmod +x ./MyApp.AppImage.

    It's also explained here https://docs.appimage.org/introduction/quickstart.html#ref-how-to-run-appimage