title: How do i make a frameless electron app movable while loading a local hosted url
body: <p>So currently i am building an electron application and have the backend written with python &amp; flask so i am currently loading the local host url as seen below</p>
  <pre><code>const {app, BrowserWindow} = require('electron')
  const path = require('path')
  
  
  
  
  function createWindow () {
      var executablePath = 'app.exe';
  
  var child = require('child_process').exec;
    // Create the browser window.
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      frame: false,
      transparent: true,
      movable: true,
  
      // show: false,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      }
    })
  
  
    mainWindow.loadURL('http://127.0.0.1:5001/')
  
  
  
  }
  
  app.whenReady().then(() =&gt; {
    createWindow()
    
    app.on('activate', function () {
  
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
  
  
  app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
  })
  </code></pre>
  <p>What i am confused about is how to make the application movable while still being frame less.</p>
  <p>in other stack over flow reads i have been seeing to add this css.</p>
  <pre><code>.titlebar {
    -webkit-user-select: none;
    -webkit-app-region: drag;
  }
  </code></pre>
  <p>My issue is where do i add this css if i am running the app its self from a local hosted URL</p>