Template rendering in Electron using light-electron-renderer!

So I had just finished creating a project using Express and EJS when I started work on a Desktop app using Electron and was shocked to find a lot of the rendering engine packages for Electron were limited in terms of features by a lot and most of them were just straight up forks of Dennis Baskins:

So instead of following the trend I started work on developing my own from scratch and created

So lets get started on how to use it and what it can do or if you prefer the documentation is available here.

Creating an app

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm i
# Run the app
npm start
electron-quick-start app running

Now that you have a base electron app to work with lets add some templating in this example I'm going to use EJS but there are several examples in my github.

Next simply:

# Install the renderer
npm i @futurelucas4502/light-electron-renderer

Great now we have the light-electron-renderer installed but how do we use it?

Using the renderer

So next you will need to install your favourite templating language in this example I’m going to be cover EJS.

So open up main.js in your favourite IDE in my case I’m using VS Code:

Now if you’re experienced in Electron this may look very familiar to you if not this is the basic structure of an app for electron we set our window size and we give some web preferences and finally load a file in this example we load index.html

But we want to set this up to use our renderer so first we need to actually add the renderer to the project we do this by requiring it at the top of our project so add the following:

# Require the renderer
const renderer = require('@futurelucas4502/light-electron-renderer')

The project should now look something like this:

electron-quick-start + require renderer

Now we can remove a couple files please delete preload.js and renderer.js as we don’t need those for this example:

Remove not needed files

Now we need to edit main.js again simply remove the webPreferences section of code and you can also remove the require path code:

Perfect now add a folder called views and a folder called assets and move the index.html file into the views folder like so:

Folder Structure

Now again in main’s we’re going to replace the:

mainWindow.loadFile(‘index.html’)

With:

renderer.load(mainWindow, 'index', {
appName: app.getName(),
appVersion: app.getVersion(),
chromeVersion: process.versions['chrome'],
nodeVersion: process.versions['node'],
electronVersion: process.versions['electron']
})

Now the file should look exactly like this:

Almost final main.js layout

NOTE: It is very important that it is app.whenReady().then({}) and not app.on(“ready”, () => {}) as it is no longer supported.

Now we need to do one last thing in main.js to get this working

Please add the following code above the createWindow function and below your require code:

// setup renderer
renderer.use(ejs, true, 'assets', 'views', ejs.renderFile)

NOTE: This is for EJS other languages may have specific needs please check the examples on my github

The final main.js file:

Final main.js layout

Now rename index.html to whatever your templating language requires in my case I need to rename it index.ejs then remove all the code and replace it with:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>
<%= appName %>: <%= appVersion %><br>
Node.js: <%= nodeVersion %><br>
Chromium: <%= chromeVersion %><br>
Electron: <%= electronVersion %>
</p>
<!-- You can also require other files to run in this process -->
</body>
</html>

NOTE: Obviously the code in the paragraph tag will need to be changed to match the language you’re working with.

So if you were to run it now it’d load up and work fine but in order to add assets like CSS, JS and Images etc then we need to do a little more work.

Simply add a folder called css in the assets folder this isn’t strictly necessary it makes the project neat so after you’ve created the css folder inside the assets folder add a new file called style.css the folder structure should look like this:

Folder structure

Now add the following simple code to the style.css file:

body {
background-color: lightblue;
}

Now go to you’re index file in the views folder and now we need to alter out CSP to allow for the assets to be loaded correctly to do this we simply change this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'">

To this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' asset:">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self' asset:">
<link href="asset://css/main.css" rel="stylesheet"/>

This allows asset:// links to be loaded and as you can see I’ve also added the link to the stylesheet now simply either restart electron or refresh the page using ctrl+r or ctrl+shift+r ;)

Final result:

Final result of the app

Great but what exactly does this add that others don’t?

This renderer allows for both passing data through from the server side (the main.js file) and through renderer processes like so:

location.href = `ejs:///about{
"viewData": {
"msg": "About"
},
"viewOptions": {

}
}`

Or

<a href='ejs:///about{
"viewData": {
"msg": "About"
},
"viewOptions": {

}
}'>link</a>

Pretty great right?

It also fully supports working with the console on the client side where some other libraries fall down

It requires minimal setup when compared to other libraries and caches the data passed through so reloading a page from the client side doesn’t cause everything to error ;)

And that’s it we’re done but again for the documentation see here:

Student studying at Liverpool Hope University

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store