Viacheslav Eremin | Node PostProcessor step for Angular and Electron.

(FRONT) FRONT (2024)

Node PostProcessor step for Angular and Electron.

If we try to start in Electron environment program created by Angular - we receive error, because Electron don't understand where is root of application:

Therefore we need to little bit changing link in HTML (add "./"). This is "post-processor" step in my Angular-Electron template https://github.com/Alex1998100/AngularElectron/tree/PostProcessor.

Something tiny program what adding "./" to result of Angular.

   1:  const fs = require('fs');

   2:  const path = require('path');

3:

   4:  const indexPath = path.join(__dirname, '..', 'dist', 'angular-electron1', 'browser', 'index.html');

5:

   6:  function updateIndexHtml() {

   7:    try {

   8:      let html = fs.readFileSync(indexPath, 'utf-8');

   9:      if (html.includes('<base href="./"')) {

  10:        console.log('Base href already correct. Skipping update.');

  11:        return;

  12:      }

  13:      html = html.replace('<base href="/"', '<base href="./"');

  14:      html = html.replace(/ (href|src)="([^"]+)"/g, (match, attribute, value) => {

  15:        if (value === "favicon.ico") return match;

  16:        if (value.startsWith("./")) return match;

  17:        return ` ${attribute}="./${value}"`;

  18:      });

  19:      fs.writeFileSync(indexPath, html);

  20:      console.log('index.html updated successfully.');

  21:    } catch (error) {

  22:      console.error('Error updating index.html:', error);

  23:    }

  24:  }

25:

  26:  updateIndexHtml();

Post processor is usual template to Vs2022, rarely does a project go without post-processing in this place in Vs2022:

But in Vs Code we should use another way, like in my scenario:

    "scripts": {
    "post-processor": "node ./tools/post-processor.js",
    "electron:start": "npm run build:angular && npm run build:electron-main && npm run post-processor && npx cross-env NODE_ENV=development electron .",

NodeBackend context:

Angular context:

Electron context:

(2024) Electron video player with cashing and CSP policy #Electron #Video
(2024) My workable project template for Angular Electron #Angular #Electron
(2024) Node PostProcessor step for Angular and Electron. #Angular #Electron #NodeBackend
(2022) Electron learning #FrontLearning #Electron
...
(2024) Browser Window Options in Electron application.
(2024) Important Parameters in Electron application.
(2024) Core Features and Concepts in Electron application.
(2024) Crucial Programming Techniques in Electron application.
(2024) Main Process vs. Renderer Process in Electron application.
(2024) Inter-Process Communication in Electron application.
(2024) Asynchronous Operations in Electron application.
(2024) Databases in Electron application.
(2024) MySQL and PostgreSQL integration in Electron application.
(2024) LocalStorage in Electron application.
(2024) Native Modules in Electron application.
(2024) Electron APIs in Electron application.
(2024) Multi-window Applications in Electron application.
(2024) Packaging and Distribution in Electron application.
(2024) Node Integration in Electron application.
(2024) Memory Leaks in Electron application.
(2024) Code Security in Electron application.
(2024) Browser Automation in Electron application.
(2024) Testing in Electron application.
(2024) Monetization in Electron application.

Comments (

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23> <24> <25>

Link to this page: http://www.vb-net.com/NodePostProcessor/Index.htm