I've created a basic app with create-react-app and wrapped it with Electron. Right now I'm just trying stuff out but all I want to achieve is an Electron window that fits the content size. I've barely changed CRA; all I've done is replace App.js with this:
function App() {
return (
<div style={{ height: '100px', width: '200px', background: 'slategray' }}>
This is some stuff
</div>
);
}
So all it should be rendering is a div with size 200x100. As for the electron code:
const { app, BrowserWindow, globalShortcut } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
// width: 80,
// height: 60,
useContentSize: true,
show: false,
// frame: false,
// transparent: true,
});
const startURL = isDev ? 'http://localhost:3000/app' : `file://${path.join(__dirname, '../build/index.html')}`;
mainWindow.loadURL(startURL);
mainWindow.once('ready-to-show', () => {
mainWindow.show()
});
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
I've tried setting width and height to specific values, and tried commenting them out as seen above, but nothing changes; whenever I start the app the window opens at the specified width and height and not 200x100 as I would expect with useContentSize: true.