All geek questions in one place

How to use html templates in electronic structure?

I need to create a cross-platform application with multiple windows. Therefore, I would like to know how to use html templates in electronic format.

+3
source share
2 answers

Based on a similar question and what I saw, Electron has no built-in html template language, which is actually great because it allows you to use any other template language.

I am currently playing with ajs in Electron. Below is the index.ejs template index.ejs :

 <html lang="en"> <head> <title>The Index Page</title> </head> <body> <h1>Welcome, this is the Index page.</h1> <% if (user) { %> <h3>Hello there <%= user.name %></h3> <% } %> </body> </html>

Below is the section of my main.js file where the above template is displayed and loaded on BrowserWindow . Note that I no longer used boilerplate code:

 const ejs = require('ejs'); //... Other code let win = new BrowserWindow({width: 800, height: 600}); //... Other code // send the data and options to the ejs template let data = {user: {name: "Jeff"}}; let options = {root: __dirname}; ejs.renderFile('index.ejs', data, options, function (err, str) { if (err) { console.log(err); } // Load the rendered HTML to the BrowserWindow. win.loadURL('data:text/html;charset=utf-8,' + encodeURI(str)); });

I will give credit to this meaning to help me find the data:text/html;charset=utf-8 URL that can be used to load dynamic content.

UPDATE

I do not use this anymore. It's faster, just load the default html and use your own DOM methods. Electron Quickstart shows how to do this.

+3
source

Another option is to create templates during assembly. Here is a simple example of using gulp to add one-time numbers to the CSP meta tag and inline script.

index.html

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= scriptNonce %>';"> <title>Basic Electron App</title> </head> <body> <div id="app"></div> <script type="application/javascript" nonce=<%= scriptNonce %>> require('./index.js'); </script> </body> </html>

and in gulfile.js add the following to what you already have and make sure that this task is included in your pipeline. You can also simply update the current HTML task with the code below.

 const template = require('gulp-template'); const uuidv4 = require('uuid/v4'); gulp.task('copy-html', () => { // Create nonces during the build and pass them to the template for use with inline scripts and styles const nonceData = { scriptNonce: new Buffer(uuidv4()).toString('base64'), styleNonce: new Buffer(uuidv4()).toString('base64') }; return gulp.src('src/*.html') .pipe(template(nonceData)) .pipe(gulp.dest('dist/')); });

This is a very truncated example. I have a more complete example at https://github.com/NFabrizio/data-entry-electron-app , if anyone is interested, although there is another warning when starting the application, because one of the packages I use is pulls in response-beautiful-dnd, which adds inline styles but doesn't currently accept disposable ones.

0
source

Source: https://habr.com/ru/post/1239687/

More articles:


All Articles