Bundle Quasar/Express/Electron App for production - Express-server doesn't start

[Chris11]

Hi,

I am using ExpressJS and localhost for some APIs in my Electron application and while everything works in development I seem to not achieve a proper setup for production:
For development-testing I run in bash the command “node server.js”. Now I don’t know the correct settings in quasar.conf.js or package.json to
a) start the localhost server on app start
b) close the localhost when the app is closed and shut down

One thing I read is that I could install shelljs and start the backend server in the e.g. the electron-main.js file.
I also found a thread describing a similar problem, but I have no “build” settings yet and am unsure whether to change anything in “quasar.conf.js” in electron-packager or builder or something in package.json

I’d be happy for any hint, what setting works and preferably also shuts the server down when the app is closed.

Also is there a good resource to find necessary settings and other things that must be respected when switching from development to production with quasar/express/electron?

Cheers Chris

[Chris11]

I believe it could have something to do with my __dirname or __statics in the electron-main.js
https://quasar.dev/quasar-cli/developing-electron-apps/electron-static-assets

I’d appreciate any help!

Implementing a a “start”:“node index.js” into my scripts in the package.json didn’t work.

Here are the files:

package.json

{
"name": "App",
  "version": "0.0.1",
  "description": "A Quasar Framework app",
  "productName": "Quasar app",
  "author": "c",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "cors": "^2.8.5",
    "jquery": "^3.5.1",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.8",
    "babel-eslint": "^10.0.1",
    "devtron": "^1.4.0",
    "electron": "^9.3.1",
    "electron-debug": "^3.1.0",
    "electron-devtools-installer": "^3.1.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-vue": "^6.1.2"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

quasar.conf.js

module.exports = function (/* ctx */) {
  return {
    boot: [
      'axios',
    ],

    css: [
      'app.sass'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      'roboto-font', // optional, you are not bound to it
      'material-icons', // optional, you are not bound to it
    ],

    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
    build: {
      vueRouterMode: 'hash', 
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
      },
    },

    devServer: {
      https: false,
      port: 8080,
      open: true
    },

    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
    framework: {
      iconSet: 'material-icons', // Quasar icon set
      lang: 'en-us', // Quasar language pack
      config: {},

     

      // Quasar plugins
      plugins: ['LocalStorage', 'jquery']
    },

    // animations: 'all', // --- includes all animations
    // https://quasar.dev/options/animations
    animations: [],

    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
    ssr: {
      pwa: false
    },

    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
    pwa: {
      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
      workboxOptions: {}, // only for GenerateSW
      manifest: {
        name: `Quasar App`,
        short_name: `Quasar App`,
        description: `A Quasar Framework app`,
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: []
      }
    },

    cordova: {

    },

    capacitor: {
      hideSplashscreen: true
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
    electron: {
      bundler: 'packager', // 'packager' or 'builder'

      packager: {

      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'vuextest'
      },

      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
      nodeIntegration: true,

      extendWebpack (/* cfg */) {
      }
    }
  }
}

[metalsadman]

@Chris11 quasar has nothing to do with your backend, once you build it then your app is running nodejs wrapped by electron. Just run your backend normally and route your api calls to it from your electron app.

[Chris11]

@metalsadman Are you saying I should just call my backend everytime from bash with “node index.js” if I want to use it in the mentioned application?
This doesn’t make a lot of sense to me.

My routes for api calls have no problems, I just can’t find the right place in package.json/quasar.conf.js/electron-main.js to start the backend server.

[metalsadman]

@Chris11 try some answers in so https://stackoverflow.com/questions/38172308/spawn-a-child-process-in-electron

[Chris11]

@metalsadman I’ll try to dig in that direction. Thank you!