'Setup p5.js in Electron

I am trying to use p5.js in a electron desktop app. I tried using templates from github but it didn't work I tried setting up my self it didn't work either.

Here is my index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <script src="p5.js" type="text/javascript" charset="utf-8"/>
    <script src="sketch.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

</body>
</html>    

and here is my index.js code:

const {app, BrowserWindow} = require('electron');

app.on('ready', () => {
    let window = new BrowserWindow({
        width: 1000,
        height: 500,
        webPreferences: {
          nodeIntegration: true,
        },
    })
    window.loadFile('index.html');
})    


Solution 1:[1]

I guess you can just copy the index.html from p5.js itself, cause rn it doesn't seem as though you're referencing the actual library anywhere in either of those files. this should be all the html you'd need:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
</head>

and:

<body>
<script src="sketch.js"></script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ulti