Electron HTML Loading Issue | electronjs.org | Page 1

queen salmon May 7, 2023, 3:12 PM

#

Hi all,

I'm trying to update My <h1> and <p> texts in My index.html files / in Electron but the HTML file(s) for some reason keeps refusing to load bootstrap.css and bootstrap.js which are stored in the following paths:

<link rel='stylesheet' href='./node_modules/bootstrap/dist/css/bootstrap.css'>
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>

I have checked both folders multiple times, the files are definitely there. I have also tried restarting Electron, reloading + force-reloading Electron whilst trying to update the <h1> and <p> texts in My index.html files but nope, no luck. I just don't see what's causing it all the sudden.

Any ideas? Thanks in advance.

valid hare May 7, 2023, 3:14 PM

#

error in the console?

queen salmon May 7, 2023, 3:15 PM

#

valid hare error in the console?

GET file :///C:/Users/xipur/Desktop/Yu-Gi-Oh!%20Capsule%20Monster%20Coliseum/My%20Electron%20App/YGO-CMC-Electron-App/new-app/app/node_modules/bootstrap/dist/css/bootstrap.css net::ERR_FILE_NOT_FOUND index.html:33

GET file:///C:/Users/xipur/Desktop/Yu-Gi-Oh!%20Capsule%20Monster%20Coliseum/My%20Electron%20App/YGO-CMC-Electron-App/new-app/app/node_modules/bootstrap/dist/js/bootstrap.js net::ERR_FILE_NOT_FOUND index.html:51

These are the errors in the Console tab in Electron, there are also some pa/pi/oe/qe/oe messages as well but I don't think they are errors..

#

Nothing in Command Prompt btw, forgot to include above

#

Part of Me wonders if it's to do with the order of the files; like in which way I'm loading them (according to the index.html file, that is)

valid hare May 7, 2023, 3:21 PM

#

have you checked that the files exist?

queen salmon May 7, 2023, 3:21 PM

#

Yes

#

I have checked both folders multiple times, the files are definitely there.

#

gusty rapids May 7, 2023, 4:01 PM

#

Js is not css

queen salmon May 7, 2023, 4:01 PM

#

One of the console errors was bootstrap.js

#

I just had another thought when You were typing Timosh, would lines like:

<link rel='stylesheet' href='./node_modules/bootstrap/dist/css/bootstrap.css'>
and
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>

..need to go in the <head> or the <body> ....? I currently have them in the <body> but when I move them to the top of <head> the screen (In Electron) just goes black.

gusty rapids May 7, 2023, 4:02 PM

#

Doesnt matter

queen salmon May 7, 2023, 4:02 PM

#

Oh ok

#

        <!-- Bootstrap CSS -->
        <link rel='stylesheet' href='./node_modules/bootstrap/dist/css/bootstrap.css'>
      
        <!-- Custom CSS -->
        <link rel='stylesheet' href='./scripts/style.css'>
      
        <!-- Three.js -->
        <script src="./js/three.min.js"></script>
      
        <!-- GSAP -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

        <!-- Tether -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

        <!-- JQuery Library -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- Bootstrap JS -->
        <script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
      
        <!-- Custom JS -->
        <script src="./scripts/index.js"></script>

This is the current loading order

gusty rapids May 7, 2023, 4:03 PM

#

If it say no file then path is incorrect

queen salmon May 7, 2023, 4:04 PM

#

The ./ starts from the folder prior to node_modules, correct?

gusty rapids May 7, 2023, 4:05 PM

#

./ is relative path

queen salmon May 7, 2023, 4:05 PM

#

uh ok

#

Would I be better off trying the full file path, as in:

C:\Users\xipur\Desktop\Yu-Gi-Oh! Capsule Monster Coliseum\My Electron App\YGO-CMC-Electron-App\node_modules\bootstrap\dist\css\bootstrap.css

#

or would that probably make it worse

gusty rapids May 7, 2023, 4:07 PM

#

Better to fix relative path

queen salmon May 7, 2023, 4:07 PM

#

Ok yeah thought so

#

I just don't understand why it's not seeing the files

#

they are definitely there

gusty rapids May 7, 2023, 4:07 PM

#

Because path is incorrect

#

You can see path in network tab

#

To check if path is correct

queen salmon May 7, 2023, 4:10 PM

#

#

Looks correct to me

#

(for both)

gusty rapids May 7, 2023, 4:10 PM

#

Now show path to files on hard drive

queen salmon May 7, 2023, 4:11 PM

#

#

ok

#

#

I assume you meant in file explorer(?).

gusty rapids May 7, 2023, 4:13 PM

#

Yes

queen salmon May 7, 2023, 4:13 PM

#

gusty rapids May 7, 2023, 4:13 PM

#

And path in request and path on hard drive are different

queen salmon May 7, 2023, 4:14 PM

#

They are? 🤔

#

I thought they were the same

gusty rapids May 7, 2023, 4:14 PM

#

They are

queen salmon May 7, 2023, 4:14 PM

#

May I ask how they are different? Because I can't see a difference

gusty rapids May 7, 2023, 4:14 PM

#

Are you kidding?

queen salmon May 7, 2023, 4:15 PM

#

?

#

node modules > bootstrap > dist > css > bootstrap.css?

#

./node_modules/bootstrap/dist/css/bootstrap.css

gusty rapids May 7, 2023, 4:15 PM

#

#

What is this?

queen salmon May 7, 2023, 4:15 PM

#

Ohhh

#

🤦

#

Wait how did it find/direct-itself to the app folder

#

wtf electron

#

xD

#

Ok uhh thats weird

#

oh wait not unless i need to make a node modules folder for this app?

#

which i haven't done yet

#

or would that really fk things up?

gusty rapids May 7, 2023, 4:18 PM

#

Its work properly

#

You use relative path

#

From your html file

queen salmon May 7, 2023, 4:19 PM

#

I should probably like, cut>paste (or copy) my node modules folder into new-app/app/[put-folder-here] then

gusty rapids May 7, 2023, 4:19 PM

#

No

#

Well its depends on your project structure

#

Or you can fix incorrect path in html

queen salmon May 7, 2023, 4:20 PM

#

#

This is the primary folder

#

for Electron

gusty rapids May 7, 2023, 4:20 PM

#

And what inside new_app/app?

queen salmon May 7, 2023, 4:22 PM

#

A js folder with three.min.js inside it

A scripts folder with index.js and style.css inside it

and index.html

The index.html files in both images/locations are exactly the same btw

gusty rapids May 7, 2023, 4:23 PM

#

You can copy bootstrap dist files into it

#

Or use correct path

queen salmon May 7, 2023, 4:23 PM

#

into new-app/app < here?

gusty rapids May 7, 2023, 4:23 PM

#

Yes

queen salmon May 7, 2023, 4:23 PM

#

ok i'll do that

gusty rapids May 7, 2023, 4:23 PM

#

If it's only page you have

queen salmon May 7, 2023, 4:23 PM

#

and re-do the paths in the .html's

#

the only page?

gusty rapids May 7, 2023, 4:24 PM

#

Yes

#

You have html in root directory

queen salmon May 7, 2023, 4:24 PM

#

and the one in new-app/app

#

ye

#

Ok I've just copied the bootstrap folder from /node-modules and have wrote these in the index.html files:
<link rel='stylesheet' href='./new-app/app/bootstrap/dist/css/bootstrap.css'>
<script src="./new-app/app/bootstrap/dist/js/bootstrap.js"></script>

Still getting same errors though? 🤔

#

unless i did the path wrong again?

gusty rapids May 7, 2023, 4:32 PM

#

Yes

queen salmon May 7, 2023, 4:32 PM

#

Dang it lol

#

🙃

#

ok where did i fk up

gusty rapids May 7, 2023, 4:33 PM

#

In path

#

You can check in network tab

queen salmon May 7, 2023, 4:33 PM

#

what part of it i meant

#

Uhh... why is it requesting 2x new-app folders and 2x app folders?

#

gusty rapids May 7, 2023, 4:35 PM

#

Because you tell it to do so

queen salmon May 7, 2023, 4:35 PM

#

<link rel='stylesheet' href='./new-app/app/bootstrap/dist/css/bootstrap.css'>
By using this? oh

#

<link rel='stylesheet' href='./bootstrap/dist/css/bootstrap.css'>

So something like this should work?

#

omg yay it loaded finally

#

except now it won't update the old <h1> and <p> texts to the newly written texts that are written in the index.html files...

Edit: Fixed. Yay!

#Electron HTML Loading Issue