I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Specifically, I had been experimenting with different Bootstrap form input styles for a search box. Despite reverting to a basic HTML form without any Bootstrap styling, the fancy Bootstrap input continues to appear.
Adding more text to the HTML does reflect in the app, but the moment I include a text input element, the Bootstrap style overrides everything else. I tried clearing the electron cache for my app, deleting the ~/AppData/Roaming/myapp directory, and even creating a new app in a fresh folder, yet the problem persists. I have explored solutions like those found in this discussion on Stack Overflow, but none of them seem to make a difference. At this point, I suspect there might be hidden caches either within Electron itself or possibly within Visual Studio Code and Git Bash causing this interference.
My project consists of only three files:
package.json:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"devDependencies": {
"electron": "^6.0.10"
}
}
main.js:
const electron = require('electron');
const path = require('path');
const url = require('url');
// SET ENV
process.env.NODE_ENV = 'development';
const {app, BrowserWindow, Menu} = electron;
let mainWindow;
// Listen for app to be ready
app.on('ready', function(){
// Create new window
mainWindow = new BrowserWindow({});
mainWindowURL = url.format({
pathname: path.join(__dirname, 'mainWindow.html'),
protocol: 'file:',
slashes:true
});
mainWindow.webContents.session.clearCache(function(){})
mainWindow.loadURL(mainWindowURL, {"extraHeaders":"pragma: no-cache\n"})
// Quit app when closed
mainWindow.on('closed', function(){
app.quit();
});
// Build menu from template
const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
// Insert menu
Menu.setApplicationMenu(mainMenu);
// Clear cache from any previous sessions
//mainWindow.webContents.session.clearStorageData();
//win.once('ready-to-show', ()=>{win.show()})
//const win = BrowserWindow.getAllWindows()[0];
//const ses = win.webContents.session;
//ses.clearCache(() => {});
});
// Add developer tools option if in dev
if(process.env.NODE_ENV !== 'production'){
mainMenuTemplate.push({
label: 'Developer Tools',
submenu:[
{
role: 'reload'
},
{
label: 'Toggle DevTools',
accelerator:process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
click(item, focusedWindow){
focusedWindow.toggleDevTools();
}
}
]
});
}
mainWindow.html:
<!DOCTYPE html>
<html>
<head>
<title>Miobium</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">-->
<!--<link rel="script" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">-->
<style>
.fullPageContainer{
}
#left_panel {
background-color: white;
height: 100vh;
float: left;
width: 20vw;
border-right: 1px solid grey;
}
#main_panel{
background-color: white;
height: 100vh;
float: right;
width: calc(78vw - 2px);
}
input[type=text]{
width: 80%;
border: 1px solid grey;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="fullPageContainer">
<div id="left_panel">
Tags
</div>
<div id="main_panel">
Search
<form>
<input type='text'>
</form>
</div>
</div>
<script>
const electron = require('electron');
const {ipcRenderer} = electron;
</script>
</body>
</html>
Any advice or insights you can provide would be greatly appreciated! As someone new to Electron development, I am hopeful that there is a straightforward solution to resolving this issue. Thank you!