Create an electron JS desktop app with python and react js - javascript

I want to create a desktop app with Electron JS and form front end I can use React JS as I'm familiar with it.
I have a good grasp of Python I checked over the internet but they all wanted me to create an API and run it on local I can do that and connect to react electron app but for distribution, I need the user to install Python as well.
I know I can go for node js as a backend but I have a lot of work ready in Python like backend logic and the app will run on desktop only no need to connect to Internet for that.
I need to know if I need user to install python as well. I don't want that.

I think this is exactly what you're looking for, it's a reusable Electron template that uses a React front-end with Redux & Redux Toolkit, and is integrated with Python/Flask for microservices. Packaging functions with build scripts are available for Windows and macOS.
You can just copy the parts you need or clone the template and use it.
https://github.com/iPzard/electron-react-python-template

If you don't want the user to have to install Python then you need to use something to package it together. Check out Pyinstaller, once you've created an exe it can be distributed and doesn't require the user to install Python
https://www.pyinstaller.org/

Related

Does React.JS need to be installed locally to be able to view a web application that uses the React.JS library?

I am about to start a university project in which we need to build a web application, and asked my lecturer if we were allowed to use React.js for the build. He said yes as long as he didn't have to install anything locally and he was able to just download my submission and view it from his local machine.
Does anything need to be installed for him to be able to view my webapp when using React.js?
I'm relatively new to React.js so apologies if this is a stupid question!
The built application (unless you are depending on a server-side renderer such as next.js) can be deployed on any web server as it is just a collection of static files.
You are likely to find it won't run if launched from a file: scheme URL though.
No.
If you are just using the react library, and write your code as:
React.createElement("div", /*...*/)
then the code can be edited even with notepad++ and executed with every webbrowser out there.
If you however want to use React with JSX and all that syntactic sugar
import * as React from "react"; // <- sugar
class App extends React.Component { // <- newer js
render() {
return <div> </div>; // <- sugar
}
}
you have to set up a build pipeline, that transpiles all the new features to the "old" JavaScript. In that case your teacher can "view" your source, and he can also open the compiled html, but he won't be able to make changes or verify that the output matches the written code without installing your buildpipeline (NodeJS, NPM, webpack, ...).
No, they don't need to install anything globally. (Well, except for NPM, assuming you are using some NPM packages in your app.)
So, technically, all he needs to do is:
1- open the command line in the app directory.
2- npm i

Project structure when using VueJS, VuelidateJS with NodeJS/Express

My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.
My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.
I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.
While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.
If I use VueJS's preferred option of WebPack, how should I change the structure of my code?
Should I have one NPM package for the frontend (generated by vue-cli init) and another for the Express backend app?
Should I put my Express App into the generated Vue frontend package?
Should I use browserify to do the job of WebPack and stay with my existing structure?
Or something else entirely?
I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.
If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.
If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:
mix.js('lib/your-entry-point-script.js', 'public/js/app.js');
Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.
Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.
You can read more about Mix at https://laravel.com/docs/5.7/mix

Building SPA frontend without node/npm

I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.

Issues setting up and running an Angular 4 application without node.js

Currently, my web app consists of java with a html/css/js front end. I am trying to convert my application over to angular 4 while still using java instead of node.js/npm. This is my first time building an Angular 4 app and I am having some issues :( "I've created tutorial/demo apps before but this is my first time converting an entire web app to Angular 4."
I know that using node.js and npm is seen as the easy solution when working with Angular 4, but I need to use java instead of node.js/npm.
The issue I'm having:
I entered some sample code for Angular 4 into my application and when I attempt to build it using the "ng-install", I get a error that says "node_modules appears empty, you may need to run npm install".
I do not want to use node.js or npm in my project. Instead I want to keep using Java.
Does anyone have any examples or advice? All help is appreciated.
I think you mix up a couple of things: Java is the language which you use to build your backend. Do this, that's fine. JavaScript is language which is used for your frontend. Your problem is building the project. NPM is a package manager for JavaScript libraries. Even if you use NPM, it doesn't mean that you cannot use Java. Those are two different things.
Usually you would use Maven (or Gradle) to build your Java project and NPM or Bower to build your frontend. If you don't want to use NPM (because it needs NodeJS), you can use things like https://www.webjars.org. However, I would recommend to use NPM.

Pack Electron in existing App

i'm kinda new to electron and tried a few things with it. I'm currently working on a bigger project with a lot of existing code, where we want to integrate electron to our application. I made a extension for our app which is directly loaded and used require('electron') to get the things started.
I cannot get electron to work because i'm running this from node.
I have experimented with the electron-quick-start and when i run electron-quick-start with electron . it works without problems, but i cannot run it with node main.js.
Is there a way to pack electron in an existing app or is the only way to use electron to wrap the application into electron?
Is there a way to pack electron in an existing app or is the only way to use electron to wrap the application into electron?
Well, the answer to that is probably yes but which way to start from would be more convenient or appropriate for an existing application is an entirely different matter. Personally what I'd do would be instead of requiring electron in your existing app, to create a new Electron app that would include the needed UI and that would require your existing modules, so instead of requiring the UI from your existing module, I would require your existing module from the UI app. Of course not having seen even a single line of code and not knowing anything bout your app I cannot say for sure that it would be a good approach.

Categories

Resources