Loading index.html doesn't work in the samples

[Zaid-Ajaj]

Hello, This is probably a windows problem with how windows resolves relative paths. this line

window.loadURL("file://" + Node.__dirname + "/../index.html");

doesn't work as I get an this error (I tried 3 samples helloworld, react-todomvc and material-ui, all three seem to have the this problem so I assume the rest have the same problem as well)

Workaround

Use url and path libraries from node as per electron-quick-start like this:

import the libraries

let url = importAll<obj> "url"
let path = importAll<obj> "path"

then replace window.loadURL("file://" + Node.__dirname + "/../index.html") with

    let formatOptions = 
        createObj [
            "pathname" ==>  path?join(__SOURCE_DIRECTORY__ , "../app/index.html")
            "protocol" ==> "file:"
            "shashes" ==> true
        ]

    // Load the index.html of the app.
    window.loadURL(unbox<string> <| url?format(formatOptions));

Then it works (at least on my windows machine)

[alfonsogarciacaro]

Hi @Zaid-Ajaj! Thanks for the report. Strange, in my machine (Windows 10) it's working even with the back slashes. I've updated the helloworld sample. Could you please give it a try? Before compiling, please pull latest changes from this repo and install latest Fable version with npm i -g fable-compiler. Among other changes I update that line to:

    window.loadURL("file://" + Node.path.join(Node.__dirname.Replace("\\", "/"), "/../index.html"));

If it works for you, I'll update the other samples as well.

[Zaid-Ajaj]

Hello @alfonsogarciacaro, I was not able to compile properly

I have fable-compiler@0.7.35 globally installed (that's what I see when I npm list -g --depth=0).

In fableconfig.json, the projFile: ["src/main.fsx", "src/renderer.fsx"] gives me a warning the a string was expected. (I though multiple project files were supported in the latest version)

When I run fable I get this:

The strange thing is that I get the log fable-compiler 0.6.15: Start Compilation... this is neither my globally installed fable-compiler nor the one defined in package.json

The other stange thing is that webpack could not resolve the compiled main.js and renderer.js (I tried appending .js to the files or removing the first ./ from the path but these didn't work either)

Again maybe it's just my windows that is a bit drunk. I will re-try this on my linux soon and see what happens.

[alfonsogarciacaro]

I shouldn't trust npm global installations, they always give problems :grin:

I've changed again the helloworld sample so fable-compiler is installed locally. Sorry for the inconvenience, but can you please pull the latest changes and try the following?

npm install
npm run build
npm start

In fableconfig.json, the projFile: ["src/main.fsx", "src/renderer.fsx"] gives me a warning the a string was expected. (I though multiple project files were supported in the latest version)

This is because the fableconfig schema hasn't been updated yet in Ionide. We need to fix that.

[Zaid-Ajaj]

@alfonsogarciacaro Compilation was succesful with the correct fable-compiler version (0.7.35), webpack worked as expected without changes. However, I still got the same problem of not being able to load the index.html file (same error as reported above). Using the workaround got it working so this line

 window.loadURL("file://" + Node.path.join(Node.__dirname.Replace("\\", "/"), "/../index.html"));

did not work for me

[alfonsogarciacaro]

Hmm, strange. Ok, I've modified the code again following your indications. Can you give it another try please? Thanks a lot for your time!

[Zaid-Ajaj]

@alfonsogarciacaro Confirmed, works like a charm without any changes :)