Site icon Ryadel

Electron - How to add jQuery and Bootstrap to your project

Ryan
Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

We already talked about Electron a number of times, as it's one of the most interesting development frameworks available nowadays. For those who don't know it yet, we'll briefly recap what it is: Electron – formerly known as Atom Shell – is an open-source framework designed to build desktop GUI applications using HTML, CSS and JavaScript. To put it in other words, it allows web developers to use their existing knowledge to create native desktop clients for the most used operating systems – including Windows, Linux, MacOS and so on. The project is developed and maintained by GitHub and runs using Node.jsruntime for the back-end part and Chromium for the front-end.

For additional info regarding the Electron framework and a simple guide to setup a "Hello World!" project tutorial with Visual Studio 2017, we strongly suggest to take a look at this post. In the following article, assuming you already went through that and therefore you already have an Electron project , we'll briefly explain how to add JQuery and Bootstrap to that project.

Adding jQuery

Let's start with jQuery, the "write less, do more" Javascript library created by John Resig: you most likely know it, since it's one of the most popular client-side libraries since years. In the unlikely scenario you don't, we strongly suggest to take a look at the jQuery official website and to the jQuery Wikipedia entry.

At the time of writing the latest general available version of jQuery is 3.3.1: we're going to add this version to our Electron application.

Method #1: JavaScript Resource

The most straightforward method to add jQuery to your Electron application is to perform the following steps:

  • Create a suitable dedicated folder within your Electron project, such as /src/contents/jquery/ (assuming your main index.html page is in the /src/ folder).
  • Manually download the latest jQuery redistributable package from the jQuery official website's download page and unpack them to that folder: it's advisable to store each version within a dedicated subfolder - for example,  /3.3.1/ for the currently latest version.
  • Add the following line to the <head> section of your main index.html file:
That's about it!

If your Electron application has multiple html pages, you just have to repeat the process for any other html file where you want to use jQuery.

Method #2: NPM Package

If you don't want to meddle with JavaScript files manually you can take advange of the Node.js module system and include jQuery that way.  To do that, perform the following steps:

  • Add a reference to the jquery package within the package.json project file of your Electron project, such as the following (feel free to change the version accordingly):
  • Add the following line to the <head> section of your main index.html file:
That's it.

Again, in case your Electron application has multiple html pages, you need to add the above line within any other jQuery-enabled html file.

Adding Bootstrap

Let's now see how to add Bootstrap, also known as the most popular HTML, CSS, and JS library in the world - as said by the Bootstrap official website. In the unlikely scenario you don't know it, we'll briefly introduce it as well. Bootstrap is an open source toolkit for HTML, CSS, and JS development; its most notable features include: Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. If you need to know more, visit its official website and the Bootstrap Wikipedia entry.

At the time of writing the latest general available version of Bootstrap is 4.1.3: we're going to add this version to our Electron application.

Method #1: CSS & JavaScript Resources

  • Create a suitable dedicated folder within your Electron project, such as /src/contents/bootstrap/ (assuming your main index.html page is in the /src/ folder). That folder will contain Bootstrap CSS and JS files.
  • Manually download the latest Boostrap redistributable package from the Bootstrap official website's download page and unpack them to the /boostrap/ folder created above: again, it's advisable to store each version within a separate folder, such as /4.1.3/ in our scenario.
  • (Optional) Repeat the above two steps for popper.js, an open-source library package that Bootstrap internally uses for dropdowns, tooltips and popovers displaying and positioning: it's not required, unless you don't need these features. In our example, we'll just assume that the popper.js library is being stored on the /src/contents/popper.js/1.14.3/ folder.
  • Add the following lines to the <head> section of your main index.html file:
IMPORTANT: as you can see, jQuery is also present as one of the Bootstrap optional packages. If you plan to use both Bootstrap and jQuery in the same page/project, be sure to only include it once: both methods shown earlier will work, as the include order above (suggested by the official Bootstrap setup guidelines) is preserved.

That's about it!

If your Electron application has multiple html pages, you just have to repeat the process for any other html file where you want to use jQuery.

Method #2: NPM Packages

If you prefer to include the NPM packages instead of adding the JS files manually, you can use the same method that we explained earlier for jQuery.

Here's what you need to add to your package.json file:

And these are the lines of code to add to the index.html page's <head> section:

It's worth noting that the CSS file cannot be included that way: it must be added using the Method #1.

This post is part of a series of articles, tutorials and guides on the Electron development framework. To read the other posts, click here!

 

Print Friendly & PDF Download
Exit mobile version