Electron Drupal

This project is an experiment to see if Drupal can run successfully inside the Electron shell.

Conclusion: Yes, Drupal can run inside the Electron shell.

Electron Drupal installs a default Electron build, a small php binary, gulp-connect-php, and Drupal 8.

• Technically
  • Electron Drupal makes it possible for developers to build cross platform desktop apps with Drupal.
• Practically
  • Drupal is architected for digital experiences deployed on the web; not within the Electron shell.
  • An Angular app with headless Drupal probably makes more sense.

Having stated the above, playing with Drupal inside the Electron shell is fun.

I have shared this repo for others to experiment with Drupal and Electron. If you come up with cool experiments, demos, use cases, or even an app, please let me know. I'll link to them for others to check out.

Electron Drupal also includes a few tools to help with debugging.

Requirements

• npm installed
• OS X

Linux and Windows support will be added soon. See: todo

Installation

1. Clone this repository git clone [email protected]:seanbuscay/electron-drupal.git
2. Move to the project directory cd electron-drupal
3. Run npm install

Execution

1. Run npm start
2. An Electron shell window will open to the Drupal login page
3. Log in with the user name: admin and the password: password

Developing a Drupal desktop app

Except for the issues documented below, I have yet to find any real problems with running Drupal in the Electron shell. As this project is currently just an experiment to see if it is possible to run Drupal within the Electron shell, I have only tested a few common Drupal features. I am sure there will be issues I did not discover during my initial experiments.

If you discovery new issues, please post them here: https://github.com/seanbuscay/electron-drupal/issues

Before you begin read the 'Issues and Fixes' section below.

Issues and Fixes

CDN assets do not work inside Electron

Issue:

JS and CSS need to be local

Fix:

1. Copy CDN delivered assets to your local theme directory and adjust your templates
2. Use the developer tools to inspect your pages for any CDN delivered assets you may not be aware of (such as those linked to by Bootstrap based themes)

JS symbol name collisions

Issue:

Due to the Node.js integration of Electron, there are extra symbols inserted into the DOM like module, exports, and require. This causes problems for some libraries since they want to insert the symbols with the same names. - http://electron.atom.io/docs/faq/#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Fix:

1. This is the best solution I have found and it works with all the themes I have tested
2. Edit your Drupal themes to use the solution below to load theme JS libraries

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

• http://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined

Technical notes

Install notes

• Drupal 8 installs
  • within the web directory
  • a sqlite db here: web/sites/default/files/.ht.sqlite
  • the "JS symbol name collisions" fix to the "Classy" core theme
• PHP
  • installs within the bin directory
  • uses a php.ini file here: bin/php.ini
  • logs errors to logs/electron-php-errors.log
• Drush 8
  • installs within the bin directory
  • Drush uses a drush.ini file here: bin/drush.ini

Using native PHP

todo

Using native MySQL

todo

Commands

Drush

To run the embedded version of Drush, which will use the embedded version of PHP, use the following syntax within the Drupal docroot: web

../bin/php ../bin/drush [drush-command]

You can add an alias to reduce the need to type the paths each time. Then run the alias from within the Drupal root directory: web

Run the following in your terminal.

alias edrush="../bin/php ../bin/drush "

The alias will remain for the life of your terminal session.

Now, you can run Drush commands within the web directory using the following syntax:

edrush [drush-command]

Examples:

• Rebuild the cache: edrush cr
• Run cron: edrush cron
• Index remaining search items: edrush search-index

NPM Scripts

Cleanup the previous install before running npm install again:

• npm run wipe

  • will backup the current Drupal web directory
  • will remove everything installed by npm install
  • except any backups of the Drupal web directory

• npm run wipe-all

  • will remove everything installed by npm install
  • including any backups of the Drupal web directory

Contributing to the Electron Drupal project

todo

Attribution

---

Electron Drupal began as a fork of Electron Symfony coded by Massimiliano Arione.