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



  • 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



  • 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 */) {
          }
        }
      }
    }
    


  • @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.



  • @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 I’ll try to dig in that direction. Thank you!


Log in to reply