Alternate version of SE Template

[Nlaux]

Hi @reZach,

First off, this is an awesome looking template. Thanks to you and everyone who's contributed on this. Kudos to you all.

I was wondering if there was a slightly simpler version of this template, as my skill set is a bit out-dated, and I am completely unfamiliar with react / redux.

Is there any chance you might have a version of this template that still has the security features but doesn't have the react/redux parts? Or, possibly could you point me in the direction of how to remove the react / redux so I can just use older stuff (html5 / jquery, etc etc).

Thank you!
~Nick

[Nantris]

@Nlaux a lot of things aren't going to be relevant and a number of changes would be needed, but to give you a jumping off point, React first comes into use in this file https://github.com/reZach/secure-electron-template/blob/master/app/src/index.jsx

You should rename that file to index.js and put the contents for your JS file there. That name would also need to change here: https://github.com/reZach/secure-electron-template/blob/master/webpack.config.js#L7

Keep in mind that React is creating the DOM that you see in the template, so I'm not sure myself about how you'd go about populating your app with content.

There's surely more changes necessary. Let me know where you get stuck as you work through it and I can try to help.

If you're removing React, I think you should be able to remove Redux without it breaking anything (though you'll still have to remove some lines that reference it.)

[Nlaux]

@slapbox

Thanks for the info. Sounds like react / redux is pretty well integrated into the template. :)

Would you suggest perhaps starting with the code in this example, https://github.com/reZach/secure-electron-template/blob/master/docs/newtoelectron.md to create a barebones template that later as I get more familiar with electron I can start incorporating bits from your secure template?

Thanks again for your advice, it's much appreciated. :)

[Nantris]

Heh, not Zach, but happy to help where I can.

I've started moving our app to emulate these best practices so I have at least some insight into the project but I don't have enough to know off the top of my head what needs to change.

When I started studying this repo what I did was copied those into an Electron Fiddle. In the context of Electron Fiddle, the renderer.js file should contain the contents listed there as preload.js.

[Nlaux]

@slapbox

Whoops, sorry about that! I should learn how to read huh? ha ha. =D

That's a great idea. I'm extremely new to electron, but it looks awesome, so I've been exploring tutorials on it, and stumbled on to this template, which is great, but a little bit beyond my understanding at this moment.

I'll look into an electron Fiddle. that's great suggestion, thank you!

[reZach]

Hi @Nlaux and @slapbox, thank you for humoring me with your conversation earlier!

Here's what you'll have to do @Nlaux (roughly; it should get you 90% of the way), and I'm very open to someone forking and maintaining a JS-only version of this repository if they wish. If not, that's fine, although some other people have asked for this likewise.

Proposed changes

app/electron/main.js

• get rid of electron-devtools-installer, it's not necessary
• remove the "dom-ready" event or at the very least only leave require("electron-debug")(); and win.webContents.openDevTools();

app/localization/i18n.config.js

• replace react-i18next with a backend

app/src/components/*

• get rid of this

app/src/constants/*

• get rid of this

app/src/core/*

• get rid of this

app/src/pages/*

• get rid of this

app/src/redux/*

• get rid of this

app/src/index.html

• put your <script> tags and js in here, but be sure they are loaded securely or load them from a copy you have saved in your solution/project directory

app/src/index.jsx

• you can probably delete this if you aren't doing anything that needs webpack

dev-scripts/*

• get rid of this

.babelrc

• you can probably delete this if you aren't doing anything that needs webpack

webpack[.development|.production].js

• you can probably delete this if you aren't doing anything that needs webpack

package.json

• remove the dev-server script
• change the dev script to electron .
• change the prod script to electron .
• remove the dev dependencies: @babel/*, concurrently, cross-env, css-loader, html-loader, html-webpack-plugin, style-loader, url-loader, webpack-*
• remove the dependencies: @reduxjs/toolkit, bulma, connected-react-router, easy-redux-undo, react-*, redux

What you'll lose

• page routing
• the supporting packages (ie. undo/redo support, custom context menu, electron store) may not work outside of imports, which may tie you to use webpack if you want to use these

Give this a try!

[Nlaux]

@reZach

Thank you for that! I will have some time this coming up week to start working on a version using your changes. I looked at the other gentleman's forked version, but it still has quite a bit of react in it, so I will probably make a secure-template-for-dummies version that is really barebones. =D

I appreciate your help! Thanks again!

[reZach]

You're welcome @Nlaux. I'm going to close this issue, please comment/re-open if you run into any other questions or when you are finished building out a JS-barebones template of this repo 😄.