Everything is good until i load index.php and their is no css no js NOTHING is actually loading except index.php. PLS HELP QUICK

[juklot]

PLEASE HELP

MAIN.JS:

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module for mennu
const Menu = electron.Menu
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

/////////////////////////////

///////////////////////////////
// Copy paste fixed by this 

app.on('ready', () => {
//  createWindow() // commented for avoiding double window issue
  if (process.platform === 'darwin') {
    var template = [{
      label: 'FromScratch',
      submenu: [{
        label: 'Quit',
        accelerator: 'CmdOrCtrl+Q',
        click: function() { app.quit(); }
      }]
    }, {
      label: 'Edit',
      submenu: [{
        label: 'Undo',
        accelerator: 'CmdOrCtrl+Z',
        selector: 'undo:'
      }, {
        label: 'Redo',
        accelerator: 'Shift+CmdOrCtrl+Z',
        selector: 'redo:'
      }, {
        type: 'separator'
      }, {
        label: 'Cut',
        accelerator: 'CmdOrCtrl+X',
        selector: 'cut:'
      }, {
        label: 'Copy',
        accelerator: 'CmdOrCtrl+C',
        selector: 'copy:'
      }, {
        label: 'Paste',
        accelerator: 'CmdOrCtrl+V',
        selector: 'paste:'
      }, {
        label: 'Select All',
        accelerator: 'CmdOrCtrl+A',
        selector: 'selectAll:'
      }]
    }];
    var osxMenu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(osxMenu);
  }
})

// PHP SERVER CREATION /////
const PHPServer = require('php-server-manager');

let server
  if (process.platform === 'win32') {

server = new PHPServer({
    php: `${__dirname}/php/php.exe`,
    port: 8000,
    directory: __dirname,
    directives: {
        display_errors: 1,
        expose_php: 1
    }
    });
  } else {

server = new PHPServer({
  
    port: 8000,
    directory: __dirname,
    directives: {
        display_errors: 1,
        expose_php: 1
    }
});
};

//////////////////////////

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {

  server.run();
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 680,
    minWidth: 940,
    minHeight: 560,
    frame: false,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        devTools: true,
        // YOU NEED TO SET FALSE DEVTOOLS AFTER TEST PHASE FOR RELEASE
    }
  })

  // and load the index.html of the app.
  mainWindow.loadURL('http://'+server.host+':'+server.port+'/src/index.php')

/*
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'index.php'),
  protocol: 'file:',
  slashes: true
}))
*/
 const {shell} = require('electron')
 shell.showItemInFolder('fullPath')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    // PHP SERVER QUIT
    server.close();
    mainWindow = null;
  })

}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow) // <== this is extra so commented, enabling this can show 2 windows..

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    // PHP SERVER QUIT
    server.close();
    app.quit();
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})



// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.php:

<!DOCTYPE html>
<html>
  <head>
    <title>Flutsh</title>
    <link rel="stylesheet" href="styles/style.css">
    <script defer src="js/AppFunctions.js"></script>
  </head>
  <body>
    <div class="mainApp">
      <div class="topBar">
        <div class="topBarContent"></div>
        <div class="titleBarBtns">
          <button id="minimizeBtn" class="topBtn minimizeBtn"></button>
          <button id="maxResBtn" class="topBtn maximizeBtn"></button>
          <button id="closeBtn" class="topBtn closeBtn"></button>
        </div>
      </div>
      <div class="contentArea">
        <div class="contentPages">
          
        </div>
      </div>
    </div>
  </body>
  <script src="../renderer.js"></script>
</html>

css:

html, body{
    margin: 0;
    padding: 0;
    font-size: 10pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #949AA7;
    background-color: #1A1A1E;
}

/* AP BASE */
.mainApp {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
}

.mainApp > .topBar {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 35px;
    background-color: #121214;
    -webkit-user-select: none;
    justify-content: flex-end;
}

.topBar > .topBarContent {
    -webkit-app-region: drag;
    width: 100%;
    height: 35px;
    display: flex;
    flex-direction: row;
}

.topBar > .titleBarBtns {
    display: flex;
    flex-direction: row;
    width: 100px;
    height: 40px;
}

.titleBarBtns > .topBtn {
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    transition: 0.2s;
    cursor: pointer;
}

.titleBarBtns > .minimizeBtn{
    background-image: url('../icons/minimize.png');
}

.titleBarBtns > .minimizeBtn:hover{
    background-color: #212124;
}

.titleBarBtns > .minimizeBtn:active{
    background-color: #303033;
}

.titleBarBtns > .maximizeBtn{
    background-image: url('../icons/maximize.png');
}

.titleBarBtns > .maximizeBtn:hover{
    background-color: #212124;
}

.titleBarBtns > .maximizeBtn:active{
    background-color: #303033;
}

.titleBarBtns > .closeBtn{
    background-image: url('../icons/close.png');
}

.titleBarBtns > .closeBtn:hover{
    background-color: #b93b3b;
}

.mainApp > .contentArea {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.contentArea > .contentPages{
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -webkit-box;
}