question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

First App Won't Build In Electron Properly

See original GitHub issue

**Describe the bug** This is my first app. When I test my app in Electron, my app works just fine with emulators for both Mac and PC. However, when I try to build the app, the resulting app on both platforms doesn’t work properly.

The home page loads just fine. However, if I try to navigate to any other page, my home page opens just fine, but my other pages are all blank. Even if I am on the home page and I try to access the home page via the navigation, the page goes blank.

Dev Tools for these blank pages shows:

<html>
<head></head>
<body></body>
</html>

I can’t think of anything about these blank pages that could cause the problem because they’re not doing much of anything from a JS perspective. They mainly just contain HTML content.

I see in Dev Tools under Sources that there are three folders: css, fonts, and JS, along with my index.html file.

But when I try to navigate to any of the pages that end up displaying blank pages, the JS folder disappears in the Sources list, leaving only the css and font folders.

Again, I get the same result when I build with either my Mac and my PC.

I’ve tried deleting the src-electron folder entirely and starting again, but that doesn’t help. And I can’t find anything via Google that gives me any good clues.

It’s baffling to me that the app would work fine on the simulator but would then fail so completely when building the actual app. And I don’t really know what to do next.

How can I resolve this?

Codepen/jsFiddle/Codesandbox (required) Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.

I don’t see how to create a codepen for this issue. so I will upload my files instead for your review.

To Reproduce Steps to reproduce the behavior:

  1. Open project in Visual Studio Code
  2. Run command: quasar build -m electron
  3. Open the resulting executable file
  4. Navigate to any page from the home page

Expected behavior A clear and concise description of what you expected to happen. I expect to see the content on any page that I attempt to navigate to.

Screenshots If applicable, add screenshots to help explain your problem. N/A Platform (please complete the following information): OS: Windows 10 or Mac Node: 12.15.0 NPM: 6.13.4 Yarn: N/A Browsers: N/A iOS: N/A Android: N/A Electron: 1.12.2 according to @electron > get > package.json (zip file removed)

Additional context Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
webnoobcommented, Jun 29, 2020

I’ve tracked this down and it’s not update related. Basically, it’s just the way the example data is setup and the way you’re using it.

So, by default this is EssentialLink (The demo component which you’re using to generate the links on the left in your menu):

<q-item
    clickable
    tag="a"
    :href="link"
  >

Under the hood, this will create a QItem with a standard html hyperlink pointing to whatever URL you set. This is why ./index.html#/somePath works as it needs a relative URL.

If you change it to:

<q-item
    clickable
    @click="$router.push(link)"
  >

This then hooks into VueRouters routing (with no page refresh) and sorts out the link itself.

0reactions
vahostcommented, Jun 27, 2020

Oh! I see. I was trying to change routes.js. Yes, I can confirm that works for some reason.

Read more comments on GitHub >

github_iconTop Results From Across the Web

First App Won't Build In Electron Properly - Quasar forum
I've just finished my first (very simple) Quasar SPA app, and I've tested it in Electron dev mode. It works well there on...
Read more >
How can I fix Electron app not launching properly?
This issue occurs only if show is set to false and window is shown after the app is loaded. I tried using the...
Read more >
Building your First App | Electron
This guide will step you through the process of creating a barebones Hello World app in Electron, similar to electron/electron-quick-start.
Read more >
Building an Electron app from scratch (Part 1) - Medium
NET developer, and while I've built a couple of complex Electron apps I'm still learning how to do it properly. I'll also not...
Read more >
How To Build Your First App With Electron - Neutron Dev
Have you ever wondered if you can build cross-platform desktop apps with HTML, CSS, and JavaScript? It is possible with Electron.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found