Create a Node.js Desktop Application With Electron, Bootstrap and Express.js

Looking to create a Node.js desktop application? You have come to the right place. In this tutorial, we will discover developing Node.js desktop applications with Electron, Bootstrap, and Express.js. This will allow us to create modern, intuitive user-interfaces backed up by powerful back-end data systems.

Benefits

Create a desktop application that enables easy integration with third-party software from the web. It uses node-package-manager — which is the largest software registry in the world. You can search available integrations on their website here — Node Registry

Perform the git clone command to pull down the template to get started.

git clone https://github.com/zero-equals-false/node-desktop-app-template

Install the dependencies.

npm install

Test run the server.

npm start

In this tutorial, we will use this template to create a modern full-stack desktop application. We will create a form processing application, which takes user input from a form and injects the data into a word document.

To build our form application, we will need Express.js, Docxtemplater and Pizzip. Express will handle the middleware routing when the form is submitted. Docxtemplater and Pizzip is used for our backend functionality / data injection. Also, to parse and split the data from when it is sent from the front-end to the back-end, we need body-parser. We will serve our form as an ejs file as a seperate view. This will allow us to scale out our views as the application grows larger.

Install dependencies with the following command.
npm install --save express docxtemplater pizzip body-parser

Now let’s create our folder structure. It should look like this.

Most folders you should have with the template. I have labelled* against the folders/files we will create. This will be the Express.js app we will be building inside our Electron desktop app.

Let’s build our Express app now, by creating the following:

Create the directories for routes and views.

mkdir routesmkdir views

We will create our route inside our Express app by creating an index.js file inside the routes folder, and adding:

Next, save the word document we will use as a template for the data injection. The word doc must be saved as template.docx inside the routes folder.

Title [ {#hasMr}X{/hasMr} ] Mr [ {#hasMrs}X{/hasMrs}] Mrs [ {#hasMs}X{/hasMs}] Ms [ ] Other please specify: First name {name} Surname {surname} Postal address {postal} Suburb {suburb} State or territory {state} Postcode {postcode} Phone number {phone} Fax number {fax} Mobile number {mobile} Email address {email}

The template.docx file will be the file we will use as a baseline to generate each form.

Next, we will create our view files inside ourview folder. Create the following file, index.ejs and copy and paste the code from below.

Let’s also create an error file incase anything goes wrong, create theerror.ejs file:

Now let’s finish off our Express.js application, create the app.js file in the top level of the project.

I have copied the code for convenience, however it is only two lines which need to be added. These are displayed in caps, as :

//ADD THIS.

Ok, well done! you have made it this far. You have successfully built a modern Node.js express application using Electron, Bootstrap and Express.js. Last but not least, start your desktop application by using npm start.

Now in your project folder, you should see an output.docx

You can view the full source code for this tutorial here

This is a Node.js desktop solution for both front-end and back-end, taking data from a form on the front-end and mapping it to specific locations in a word document (data processing). However, this is only one use-case, there are many other uses for Node.js desktop applications out there. Please, if you found this post interesting sign-up to cast your vote by hitting the buttons below!

Originally published at https://zeroequalsfalse.com.