{"componentChunkName":"component---src-templates-post-tsx","path":"/posts/2019/07/electron-web-server/","result":{"data":{"markdownRemark":{"fields":{"slug":"/2019/07/electron-web-server/"},"frontmatter":{"title":"Create an Electron app from any web server in any programming language.","tag":["electron","web server","pinned"],"image":"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRMQFZ9SzNkt7LXFk6YgFPaVLs7tA2dZoM0tJokNVNz7q7Mi5Qa"},"correctedDateEpoch":1562173200000,"html":"<p>As Electron is actually an containerized extended Chromium web engine, I reckon that this must be possible somehow. However, by default, Electron uses <code>ipcMain</code>/<code>ipcRenderer</code> rather than <code>http</code> or <code>websocket</code>...</p>\n<p>As for a lazy reader, you can see my example project at <a href=\"https://github.com/patarapolw/rep2recall-sqlite\">https://github.com/patarapolw/rep2recall-sqlite</a>, which is Python Flask in Electron. There is also a pure TypeScript version -- <a href=\"https://github.com/patarapolw/e-rep2recall\">https://github.com/patarapolw/e-rep2recall</a></p>\n<!-- excerpt_separator -->\n<h2>Finding a random PORT</h2>\n<p>You might use <a href=\"https://www.random.org/integers/?num=1&#x26;min=5001&#x26;max=49151&#x26;col=5&#x26;base=10&#x26;format=html&#x26;rnd=new\">https://www.random.org/integers/?num=1&#x26;min=5001&#x26;max=49151&#x26;col=5&#x26;base=10&#x26;format=html&#x26;rnd=new</a>. Just make sure you don't use too common a port number.</p>\n<h2>Containerizing web server</h2>\n<p>This is quite easy for Python, using <a href=\"https://www.pyinstaller.org/\">https://www.pyinstaller.org/</a>. For a guide on how to add data files, you might follow <a href=\"https://github.com/smoqadam/PyFladesk#packaging\">https://github.com/smoqadam/PyFladesk#packaging</a>.</p>\n<p>For Java/Kotlin/other JVM languages, you might use <a href=\"https://github.com/johnrengelman/shadow\">https://github.com/johnrengelman/shadow</a>, i.e. fat JAR, shadow JAR, uber JAR.</p>\n<p>For JavaScript/TypeScript itself, you don't need containerizing, but make use you use absolute path, relative to <code>__dirname</code> for everything, and avoid hidden imports. For Express.js, at least <code>pug</code> and <code>ejs</code> templating engine works, but make sure to use <code>pug.renderFile()</code> and <code>ejs.renderFile()</code>. You can avoid this altogether, though, by making use of static files.</p>\n<h2>Starting web server at app start, and killing web server at app exit, including on errors</h2>\n<p>For non-JavaScript, see <a href=\"https://github.com/patarapolw/rep2recall-sqlite/blob/master/src/node/electron.ts\">https://github.com/patarapolw/rep2recall-sqlite/blob/master/src/node/electron.ts</a></p>\n<p>For JavaScript/TypeScript, see <a href=\"https://github.com/patarapolw/e-rep2recall/blob/master/src/node/electron.ts\">https://github.com/patarapolw/e-rep2recall/blob/master/src/node/electron.ts</a></p>\n<p>To kill on error, you might try <a href=\"https://stackoverflow.com/questions/14031763/doing-a-cleanup-action-just-before-node-js-exits\">doing a cleanup action just before node.js exits</a></p>\n<h2>Webpack-dev-server settings</h2>\n<p>See <a href=\"https://github.com/patarapolw/rep2recall-sqlite/blob/master/webpack.dev.js\">https://github.com/patarapolw/rep2recall-sqlite/blob/master/webpack.dev.js</a>.</p>\n<p>Have only tried <code>http</code> and <code>socket.io</code>. Never tried <code>websocket</code> directly yet, though.</p>\n<p>This allows you to run Electron in your default web browser in development mode using two terminal, <code>webpack-dev-server</code>, and another running your default web server. Make sure to hide Electron specific code on development, though; otherwise it will throw an error in Webpack and in web browser.</p>\n<h2>Electron builder, and file associations</h2>\n<p>This might give you some ideas -- <a href=\"https://github.com/patarapolw/rep2recall-sqlite/blob/master/package.json#L61\">https://github.com/patarapolw/rep2recall-sqlite/blob/master/package.json#L61</a></p>\n<p><code>asarUnpack</code> is needed for Python and static files. -- <a href=\"https://github.com/patarapolw/rep2recall-sqlite/blob/master/package.json#L86\">https://github.com/patarapolw/rep2recall-sqlite/blob/master/package.json#L86</a>.</p>"}},"pageContext":{"slug":"/2019/07/electron-web-server/"}}}