The Electron app is experiencing issues with updating the edited index.html file properly

Recently, I decided to delve into learning Electron and as a beginner, I decided to clone a simple electron tutorial app to experiment with its features. (The official Electron starter app worked perfectly for me).

The GitHub repository I used: https://github.com/crilleengvall/electron-tutorial-app

I have not included the scripts here as they are readily available in the repository.

What I've modified: I made changes to the index.html and sections->welcome.html as indicated below.

The issue at hand: The expected changes did not reflect in the Electron app.

(Note: I haven't made any alterations to the .js or .css files)

Original UI (from the repo): https://i.sstatic.net/TTsSo.png

Changes in index.html (expected changes in the left panel of UI): https://i.sstatic.net/PhvOg.png

Changes in sections->welcome.html (expected changes in the main panel of UI): https://i.sstatic.net/4fAgf.png

After implementing those changes and running the app, this is what I encountered. (On the left panel, "bacon" is displayed and on the main panel, the "testing" header appears but the paragraph underneath remains unchanged.) https://i.sstatic.net/ofMz3.png

I'm a bit perplexed by what's happening because after some research, I suspected it might be a session cache issue. However, only a portion seems to be edited while the rest remains unaffected.

Any assistance would be highly appreciated.

javascripthtmlcssnode.jselectron

Answer №1

If you wish to modify the text displayed in the sidebar, you will need to make adjustments to the strings located in translations/en.js file. This is because the solution involves localization, which is the process of adapting computer software to various languages.

To edit the sidebar strings, locate and update the following entries in en.js:

"Welcome": "Welcome", 
"Who we are": "IPC/Remote", 
"What we do": "What we do", 
"Get in touch": "Get in touch"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve an array of objects that have a property matching another array?

In my array, I have data structured like this: array = [ { name: "john", tag: ["tag1", "tag2"] }, { name: "doe", tag: ["tag2"] }, { name: "jane", tag: ["tag2", "tag3"] } ]; My goal is to create a new array of objects that only contain elements with ...

javascriptvue.js

Initially Missing Child Props in Parent Component

I am currently working on an application that utilizes a nutrition API to fetch information such as calories and more. One of the key features I am developing is the ability for users to set their daily calorie target along with the percentage breakdown fo ...

javascriptreactjs

Why is it possible to import the Vue.js source directly, but not the module itself?

The subsequent HTML code <!DOCTYPE html> <html lang="en"> <body> Greeting shown below: <div id="time"> {{greetings}} </div> <script src='bundle.js'></script& ...

javascriptwebpackvue.jswebpack-2

Ways to alter the color of a link after clicking it?

Is there a way to change the link color when clicking on it? I have tried multiple approaches with no success. The links on this page are ajax-based and the request action is ongoing. <div class="topheading-right"> <span> ...

javascriptjquerycsscakephpcakephp-2.0

React failing to display basic component

As a newcomer to React, I have a question regarding rendering a basic React component. Here is my setup in index.html: <!DOCTYPE html> <html lang="en> <head> <title>React</title> </head> <body> < ...

javascriptreactjs

Show specific content based on which button is selected in HTML

I am working on a project where I have three buttons in HTML - orders, products, and supplier. The goal is to display different content based on which button the user clicks: orders, products, or supplier information. function showData(parameter){ i ...

javascripthtmlbutton

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

cssvue.jsvuejs3vuetify.js

What is the best way to mix up the images in my memory game?

My JavaScript memory game is functioning properly, but I would like the images to load in a random order. Unfortunately, I'm not sure how to accomplish this. Here is the current setup: var easyImages = ["img/bat.jpg", "img/bug.jpg", "img/cat.jpg", " ...

javascriptimagememoryrandomshuffle

Generate a specified quantity of elements using jQuery and an integer

I am working with a json file that contains an items category listing various items through an array. This list of items gets updated every few hours. For example: { "items": [ { "name": "Blueberry", "img": "website.com/blueberry.png" } ...

javascriptjqueryjson

various types of font colors within the text box

If I have a text box with the content "eg. 'one'" Can I set the font color of "eg." to color:black and "'one'" to color:red? Below is the HTML code: <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" Text="eg.-one"> ...

c#htmlasp.netcss

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

javascriptjqueryhtmlcssless

What distinctions can be made between the id selector and class selector when implementing border styles?

When trying to set the border width to 0px, I noticed that the border style doesn't seem to work when using a class selector. Oddly enough, the border width does work if an id selector is used! Below is the HTML (Vue template) code: <el-form-item ...

htmlcssvue.js

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Dropdown navigation with CSS

It seems like there's a simple oversight on my end... The drop-down menu I created is causing the main navigation bar to expand. You can view the page I'm working on by following this link. The issue occurs with the navigation below the App butto ...

htmlcssdrop-down-menunavigation

PhantomJS process spawned is stuck in limbo

Currently, I am working on setting up a node server that can spawn phantomjs processes to generate screenshots. The grab.js script is functioning properly when run independently and I have verified that it writes to the stdout. However, the node code respo ...

node.jsphantomjs

Ways to specifically load a script for Firefox browsers

How can I load a script file specifically for FireFox? For example: <script src="js/script.js"></script> <script src="js/scriptFF.js"></script> - is this only for Firefox?? UPDATE This is how I did it: <script> if($. ...

javascriptjqueryhtml

What is the reason for encountering an error when using the ForwardRef with a pair tag

I am facing an issue with my React app that has 3 tsx (jsx) files: First, in my index.tsx file: import ReactDOM from 'react-dom'; import Page from './Page'; ReactDOM.render( <Page /> ...

javascriptreactjsreact-refreact-forwardref

Using Node.js to interact with MongoDB and perform filtered queries

Utilizing the mongodb native API, I am attempting to execute a query on my collection. Below is my filter object: { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f697929b9f98b6939b979f9ab89f82">[email  ...

node.jsmongodbmongodb-query

What is the process of adding new fields to a model in TypeScript?

I have created a test.model.ts file: export interface ITransaction { description: string; transactionDate: string; isDebit: boolean; amount: number; debitAmount: string; creditAmount: string; } export class Transaction implements ...

javascriptangularjstypescript

Having difficulty animating camera rotation in ThreeJS with Tween

I am facing an issue with animating the ThreeJS camera rotation using TweenJS. While I can successfully tween the camera position, the camera.rotation does not seem to update as expected. To illustrate my problem, I have created a simple example based on ...

javascriptthree.jstween