old lintel
Im using electron-forge, tailwind and react to build my first application for a simple college project. When I run the app using npm start, the assets are loaded perfectly fine. However, when I run npm run make and launch the executable, they do not work. The first image is an example of when I use npm start, whilst the second image is how it looks when I run it from the executable. Does anyone know how I can fix this?
old lintel
let me know if you need to see any of my files, here are the main config ones
magic quiver
Tipp: prevent blanks in file or program names.
You could try to unpack the asar and check if the image is missing at the path from the console.
Thunder and celsius image paths seem to be wrong at least
old lintel
& is the repo public somewhere?
https://github.com/billo32/electron-react-tailwind-js this is what i had used
-src
--containers
---Assets
----icons
-----title
-----weather-icons
----weather
----global.css (loads)```this is my renderer.js file
old lintel
Tipp: prevent blanks in file or program names.
You could try to unpack the asar...
how could i go about unpacking the asar? i've never worked with electron before so all of this stuff is new to me
verbal heath
@old lintel the @electron/asar package is also available as a standalone CLI tool: https://github.com/electron/asar
Or you could disable asar in your packagerConfig with Forge
old lintel
alright ill try disable it
verbal heath
👍
old lintel
this is in my dev tools -> sources
Location it's trying to acess (img src) file:///.../out/Storm%20Shield-win32-x64/resources/app/.webpack/renderer/main_window/assets/icons/title/min-w-10.png
Real location file:///.../out/Storm%20Shield-win32-x64/resources/app/.webpack/renderer/assets/icons/title/min-w-10.png
how can i prevent it from trying to go into main_window? @verbal heath
verbal heath
ah, lemme jog my memory on how the webpack plugin works under the hood 🙂
Thanks for providing the repo link
I'll see if I have time later tn to debug a bit
old lintel
alright, tysm for the help btw
old lintel
instead of doing /assets/icons/cat/icon.png i just did ../assets which seems to works on both 'npm start' and the executable so that issue is solved, however I want to implement routing (literally just a search page and data page) but im not too sure how, do you have any resources to hand which you could refer me to?
Oh yeah, I'm not sure what is causing this, though when the user hasn't inputted a location or is searching for a location, i want to display the search bar with the background "clear-day.mp4". Once the user then inputs a query and its successful, i rerender the video accordingly to the weather data, however the video doesn't actually get re-rendered but in inspect element, you can see that the video source is the new video
image 1 - code
image 2 - how it looks with search page uncommented
image 3 - how it renders when search page is commented (correct)
