Electric + Senna basePath resolve #146

Activity

1. matuzalemsteles commented on Apr 12, 2018

   

   matuzalemsteles

   on Apr 12, 2018

   Contributor

   More actions

   Hey @marceloavf, First of all sorry for the delay.

   This is an interesting case, O senna.js was made to work with the browser, all parse logic in the URI is based on the browser, it makes an Ajax request to get the page and can handle it. This works great on the Web, but maybe this process does not make sense in an Electron application, since everyone is on localhost, it would be more interesting to have all the pages pushed into the final bundle for the Electron application and handle the routing on the Client side, would certainly have an enjoyable experience for the user.

   At the moment I would not recommend using it with Electron, I do not know if we will look at this now, but maybe we can improve this in the future, thanks for your feedback.

   👍React with 👍1Reacted by Marcelo Formentão
2. marceloavf commented on Apr 12, 2018

   

   marceloavf

   on Apr 12, 2018

   Author

   More actions

   Hi @matuzalemsteles, Thank you for your response!

   The most important problem is that electric has a intern (package) webpack build and with Senna.js they work together for the web browser only. There is some tutorials of React building with electron with no eject that improves my vision about this situation.

   With that I was able to make it work only with specific point of electron instalation (not dynamic or user choice) and a Middleware component to persist the routes in browser and also in Electron.

   This is the main middleware code that make it work nicelly:

   app.on('beforeNavigate', middlewareClass.beforeNavigate);
   /**
      * Check before each navigation for bad URL and rework it.
      * Why? URL that doesn't have index.html at the end doesn't work with Electron
      * and others non-server hosts, and we need also to set basePath for links that
      * doesn't start with it, some of them are from internal packages of Electric
      * @param {any} e => Senna event handler
      * @memberof Middleware
      */
     beforeNavigate(e) {
       console.log('Check route:', e);
       const endsHashNumber = new RegExp("#\\d+$");
       const basePath = encodeURI(window.electric.data.site.basePath);
       if (!e.path.endsWith('.html')) {
         if (!endsHashNumber.test(e.path)) {
           e.path = e.path + 'index.html';
         }
       }
       if (basePath != "") {
         if (!e.path.startsWith(basePath)) {
           e.path = basePath + e.path.substr(3); // Include basePath and remove system initial base
         }
       }
     }

   In that case, I realize that not all routes have basePath included and no index.html href to properly get there.

   Now the final step is to make Electron talks with Senna/Electric to send IPC commands, get basePath dynamically based on where the user installed it and also get some remote options, I tried to do some tests by changing webpack target to electron-renderer but it messed up with Senna.js.

   Anyway, I'll continue searching for it and this could help someone else who try the same and in the future we can get a solution for that.
3. matuzalemsteles commented on Apr 12, 2018

   

   matuzalemsteles

   on Apr 12, 2018

   Contributor

   More actions

   Awesome @marceloavf, Thanks for going deeper into the details.

   It really can be a problem for this case, but Electric was initially made thinking of generating static sites and focused on documentation at first glance. I'm not sure exactly what your case is about using it with Electron, maybe we can look at it in the future.

   But on IPC communication with Electron and Electric. Electric uses Metal.js which is quite similar to React, can you send a command from your window to the files compiled after the internal compilation of Electric easily?

   You could maybe use something like redux-electron-ipc. Because Electric compiles your application internally, you may not be able to find the electron package. Try to do a dynamic import in your Electric application of electron. To check if the package exists, do nothing, after being called on the main Electron can find. Maybe it helps to fool Electric internal compiler.