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

Thank you @beets and @metalsadman. I use qcard instead and it works without any problems!
Actually I never filed a ticket, so I wouldn’t know how to do it. Maybe I’ll find a tutorial on that

Hello,

in my app I have no alert used whatsoever.

In the two tabs I created, one q-banner always gets a weird css if I change out to a different tab and then back in. I cannot explain it why this happens.

I don’t know why it adds this role=“alert” in the html, which I didn’t intended

I’d appreciate a useful hint.

<div class="MatrixAuswahlBereich">
      <q-banner>  
        <p id="matrixErzeugenHeading"><b>Matrix über Eingabe erzeugen:</b></p>
        <q-form @submit="erzeugeMatrix">
          <div id="matrixErzeugen1">

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

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

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

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

@dobbel thank you for this specific and helpful answer! I’ll set up a proper backend! Due to many threads concerning this problem (also for other frameworks) I thought, those devServer-setting could be sufficient.

@dobbel other thread, same topic.
The cors header must be missing, otherwise the CORS Unblock extension wouldn’t solve it for me.

Could you give any insight on how to actually and specifically enable cors on the server (webpack devServer)?

Interim solution:

I now am able to make the request with help of this chrome extension: https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/related?hl=en

When this extension is enabled, each web request will be appended with “access-control-allow-origin: *” header.

I am wondering why it doesn’t work, when I add those headers in the devServer quasar.conf.js.

This CORS Unblock extension might be nice to test everything in development, but doesn’t solve it for production.

@dobbel I start to think that I am not the only one with this problem. Webpack-devServer is my server here and this thread suggests that webpack doesn’t read the settings made in devServer (in quasar.conf.js) properly: https://github.com/webpack/webpack-dev-server/issues/533

I now have a vast list of settings which I should use to bypass this problem: custom headers, whitelist via allowedHosts, use a proxy, install npm cors (I am aware that using all these at the same time might not be the way of the yedi)

devServer: {
  https: false,
  port: 8080,
  open: true, // opens browser window automatically
  allowedHosts: ['XXX.weclapp.com'],
  proxy: {
    '/api': 'https://XXX.weclapp.com'
  },
  before (app) {
    const cors = require('cors')
  
    app.options('*',cors())
    app.use(cors())
  },
  headers: {
    // 'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
    // 'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    'Access-Control-Allow-Origin': '*',
},

Now I might look for the proper place outside of the quasar.conf.js and probably in the webpack-dev-server node module to come closer to any solution…