Electron

Electron

Electron is an open-source framework developed and maintained by GitHub. Electron allows for the development of desktop GUI applications using front and back end components originally developed for web applications: Node.js runtime for the backend and Chromium for the frontend.
Sean Robertson

Sean Robertson

1664845420

Build a Cross-platform Desktop App with Electron & JavaScript

In this tutorial, we will create a cross-platform desktop app to resize image dimensions, using JavaScript and Electron.

Timestamps:
0:00 - Intro
3:05 - Resources
4:48 - Setup & Install Dependencies
8:08 - Create Main Window
12:45 - Common Boilerplate
15:53 - Show Devtools
18:10 - Using Electronmon
18:54 - Adding the UI Theme
21:26 - Content Security Policy
23:00 - Menu Customization
27:36 - Menu Roles
30:00 - About Window
31:53 - Start Renderer JS / Load Image
38:15 - Get Original Dimensions
39:40 - Using Preload
44:28 - Show Output Path
46:43 - Toastify Alerts
50:58 - Form Submit Handler
53:54 - IPC Renderer (Send)
56:44 - IPC Main (Recieve)
59:35 - Resize Image
1:05:32 - Catch Message In Renderer
1:07:32 - Make mainWindow Global
1:10:22 - Test Production Mode

💻 Code:
https://github.com/bradtraversy/image-resizer-electron 

To package your app up for different platforms, you could use one of the following:
https://github.com/electron/electron-packager 
https://www.electronforge.io/

#electron #javascript 

Build a Cross-platform Desktop App with Electron & JavaScript
Lawrence  Lesch

Lawrence Lesch

1662448740

OpenSC2K: An Open Source Remake Of Sim City 2000 By Maxis

OpenSC2K

OpenSC2K - An Open Source remake of SimCity 2000 written in JavaScript, using WebGL Canvas and Phaser 3.

Overview

Currently a lot remains to be implemented but the basic framework is there for importing and viewing cities. Lots of stuff remains completely unimplemented such as the actual simulation, rendering of many special case tiles and buildings and anything else that exists outside of importing and viewing.

Along with implementing the original functionality and features, I plan to add additional capabilities beyond the original such as larger city/map sizes, additional network types, adding buildings beyond the initial tileset limitations, action/history tracking along with replays and more.

I've only tested using Chrome / Firefox on macOS, but it should run fairly well on any modern browser/platform that supports WebGL. Performance should be acceptable but there is still a LOT of room for optimizations and improvements.

Due to copyrights, the original graphics and assets from SimCity 2000 cannot be provided here. I've developed and tested using the assets from SimCity 2000 Special Edition for Windows 95. Once I've got the basic engine stabilized I plan to add support for multiple versions of SimCity 2000 in the future.

Update: I've been working on refactoring considerable portions of the code for clarity and performance. Due to the changes a lot of existing functionality is now completely broken and will be fixed in upcoming commits.

Installation

You can use yarn (recommended) or npm to install and run. Once installed and started, open a browser to http://localhost:3000 to start the game.

OS X / Linux

  1. git clone https://github.com/rage8885/OpenSC2K or download this repository
  2. cd OpenSC2K
  3. yarn install downloads and installs the dependancies
  4. yarn dev to run

Usage

By default, a test city included in the /assets/cities/ folder will load. Currently you must modify the /src/city/load.js file to load different cities.

Requires two files from the Windows 95 Special Edition version of SimCity 2000: LARGE.DAT and PAL_MSTR.BMP. These must be placed in the /assets/import/ directory prior to starting the game. The files will be automatically parsed and used for all in game graphics.

Controls

  • WASD to move the camera viewport
  • Q or E to adjust camera zoom  

Acknowledgements

Based on the work of Dale Floer

Based on the work of David Moews

Portions of the SC2 import logic are based on sc2kparser created by Objelisks and distributed under the terms of the ISC license. https://github.com/Objelisks/sc2kparser

Includes work adapted from the Graham Scan polygon union JavaScript implementation by Lovasoa and distributed under the terms of the MIT license https://github.com/lovasoa/graham-fast

Download Details:

Author: Nicholas-ochoa
Source Code: https://github.com/nicholas-ochoa/OpenSC2K 
License: GPL-3.0 license

#javascript #electron #game #webgl 

OpenSC2K: An Open Source Remake Of Sim City 2000 By Maxis
Reid  Rohan

Reid Rohan

1661827680

React Application Prototyping tool for Developers & Designers

React-Proto

React-Proto is a React application prototyping tool for developers and designers.

React-Proto allows the user to visualize/setup their application architecture upfront and eject this architecture as application files either into a previous project or a new create-react-app project or a starter template from any repository.

Download for MacOS, Windows, Linux.

  • Mac users only: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.

If you find any issues, file issue

How To Use

Application can be run from cli using react-proto command or by clicking on the application icon.

To start a new project, either import a mockup or start with a blank stage.

Add components you would like to create using the input, then drag the component frame into place and resize accordingly.

dragging.gif

While building, you can use the icons in the toolbar to zoom, toggle draggability of the stage, update or remove an image, collapse the left container, and export your files.

For each component you have the ability to define whether your component will have state, the color of the frame component, and the ability to apply a parent component.

If you place a container around other components and can no longer access them, you can use the layer buttons in the corresponding dropdown menu to change layer order down or up.

hierarchy.gif

In the right container, the props tab allows you to define props in key value pairs, as well as the necessary prop type.

Once you are finished, you can use the export button in the toolbar to choose from three options of how to export your files:

  1. Import your files into an existing project. Just choose the path where you would like to create your components folder.
  2. Use create-react-app to start a new project (the project will be under the "proto_app").
  3. Clone your favorite Github repo to start a project with your favorite starter files.

export.gif

  • Lastly, start building!

Running Your Own Version

Fork and Clone Repository.

Open project directory

cd react-proto
  • Install dependencies
yarn install
  • Run application
yarn start
  • For development experience...
yarn dev
  • and on another terminal
yarn electron

Linting

yarn linter

Testing

yarn test

Built With

  • React - Framework for building user interaces.
  • Redux - Predictable state container for JavaScript apps.
  • Electron - Cross-platform desktop apps with HTML, CSS and JS.
  • KonvaJS - HTML5 2d canvas library for desktop and mobile applications.
  • React-Sortable-Tree - Drag-and-drop sortable component for nested data and hierarchies.

Acknowledgments

Logo Design

Clariz Mariano @havengoer

Joe Thel @fakemonster

Download Details:

Author: React-Proto
Source Code: https://github.com/React-Proto/react-proto 
License: MIT license

#javascript #react #electron 

React Application Prototyping tool for Developers & Designers
Reid  Rohan

Reid Rohan

1661761584

Betwixt: Web Debugging Proxy Based on Chrome Devtools Network Panel

Betwixt

Betwixt will help you analyze web traffic outside the browser using familiar Chrome DevTools interface.

Betwixt in action

Even more Betwixt action!

Installing

Download the latest release for your operating system, build your own bundle or run Betwixt from the source code.

Setting up

In order to capture traffic, you'll have to direct it to the proxy created by Betwixt in the background (http://localhost:8008).

If you wish to analyze traffic system wide:

  • on macOS - System Preferences → Network → Advanced → Proxies → Web Proxy (HTTP)
  • on Windows - Settings → Network & Internet → Proxy
  • on Ubuntu - All Settings → Network → Network Proxy

Setting up proxy on Windows 10 and macOS

If you want to capture traffic coming from a single terminal use export http_proxy=http://localhost:8008.

Capturing encrypted traffic (HTTPS) requires additional step, see this doc for instructions.

Contributing

All contributors are very welcome. See CONTRIBUTING.md fore more details.

Download Details:

Author: Kdzwinel
Source Code: https://github.com/kdzwinel/betwixt 
License: MIT license

#javascript #electron #devtool #proxy 

Betwixt: Web Debugging Proxy Based on Chrome Devtools Network Panel
Nat  Grady

Nat Grady

1661573700

Rinno: How to Install Local Shiny Apps

RInno

RInno makes it easy to install local shiny apps by providing an interface between R, Inno Setup, an installer for Windows programs (sorry Mac and Linux users), and Electron, a modern desktop framework used by companies like Github, Slack, Microsoft, Facebook and Docker. RInno is designed to be simple to use (two lines of code at a minimum), yet comprehensive.

If a user does not have R installed, the RInno installer can be configured to ask them to install R along with a shiny app, include_R = TRUE. And similar to Dr. Lee Pang’s DesktopDeployR project, RInno provides a framework for managing software dependencies and error logging features. However, RInno also supports GitHub package dependencies, continuous installation (auto-update on start up), and it is easier to manage with create_app, the main RInno function. DesktopDeployR requires many manual adjustments and a deep understanding of the entire framework to use, but RInno can be learned incrementally and changes automatically flow down stream. You don’t need to remember the 100+ places impacted by changing app_dir. RInno only requires a high-level understanding of what you’d like to accomplish.

Getting Started

# Get remotes package
install.packages("remotes"); require(remotes)

# Use install_github to get RInno
install_github("ficonsulting/RInno")

# Require Package
require(RInno)

# Use RInno to get Inno Setup
install_inno()

Minimal example

Once you have developed a shiny app, you can build an installer with create_app followed by compile_iss.

# Example app included with RInno package
example_app(app_dir = "app")

# Build an installer
create_app(app_name = "Your appname", app_dir = "app")
compile_iss()

create_app creates an installation framework in your app’s directory, app_dir. The main components are a file called “app_name.iss” and the “nativefier-app” directory. You can perform minor customizations before you call compile_iss. For example, you can replace the default/setup icon at Flaticon.com, or you can customize the pre-/post- install messages, infobefore.txt and infoafter.txt. Just remember, the default values (i.e. create_app(info_after = "infobefore.txt")) for those files have not changed. The Inno Setup Script (ISS), app_name.iss, will look for default.ico and try to use it until you update the script or call create_app with the new icon’s file name (i.e. create_app(app_icon = "new.ico")). Likewise, the Electron app will need to be recompiled to capture any manual changes to files in app_dir.

Electron is now used to render the shiny app’s UI. All other user_browser options will be deprecated in future releases.

ui.R Requirements

In order to replace Electron’s logo with your app’s icon, add something like this to your ui.R file:

fluidPage(
  tags$head(
    tags$link(
      rel = "icon", 
      type = "image/x-icon", 
      href = "http://localhost:1984/default.ico")
  )
)

server.R Requirements

In order to close the app when your user’s session completes:

  1. Add session to your server function
  2. Call stopApp() when the session ends
function(input, output, session) {

  if (!interactive()) {
    session$onSessionEnded(function() {
      stopApp()
      q("no")
    })
  }
}

If you forget to do this, users will complain that their icons are broken and rightly blame you for it (an R session will be running in the background hosting the app, but they will need to press ctrl + alt + delete and use their task manager to close it). Not cool.

Package Dependency Management

Provide a named character vector of packages to create_app, and RInno will download them and install them with your shiny app. RInno downloads windows binaries from CRAN for the listed packages and their dependencies with tools::package_dependencies(packages = pkgs, recursive = TRUE).

create_app(
  app_name = "myapp", 
  app_dir = "app",
  pkgs = c("shiny", "jsonlite", "httr")
)

For remotes, Github source files are compiled into windows binaries. Bitbucket will be supported in a future release.

Custom Installations

If you would like to create a custom installer from within R, you can slowly build up to it with create_app, like this:

create_app(
  app_name    = "My AppName", 
  app_dir     = "My/app/path",
  dir_out     = "wizard",
  pkgs        = c("jsonlite", "shiny", "magrittr", "xkcd"),  # CRAN-like repo packages
  remotes     = c("talgalili/installr", "daattali/shinyjs"), # GitHub packages
  include_R   = TRUE,     # Download R and install it with your app, if necessary
  R_version   = "2.2.1",  # Old versions of R
  privilege   = "high",   # Admin only installation
  default_dir = "pf")     # Install app in to Program Files

create_app passes its arguments to most of the other support functions in RInno. You can (and probably should) specify most things there and they will get passed on. Alternatively, you can provide instructions directly to those support functions like this:

# Copy installation scripts (JavaScript, icons, infobefore.txt, package_manager.R, launch_app.R)
copy_installation(app_dir = "my/app/path")

# If your users need R installed:
get_R(app_dir = "my/app/path", R_version = "2.2.1")

# Create batch file
create_bat(app_name = "My AppName", app_dir = "my/app/path")

# Create app config file
create_config(app_name = "My AppName", R_version = "2.2.1", app_dir = "my/app/path",
  pkgs = c("jsonlite", "shiny", "magrittr", "dplyr", "caret", "xkcd"))

# Build the iss script
start_iss(app_name = "My AppName") %>%

  # C-like directives
  directives_section(R_version   = "2.2.1", 
             include_R   = TRUE,
             app_version = "0.1.2",
             publisher   = "Your Company", 
             main_url    = "yourcompany.com") %>%

  # Setup Section
  setup_section(output_dir  = "wizard", 
        app_version = "0.1.2",
        default_dir = "pf", 
        privilege   = "high",
        inst_readme = "pre-install instructions.txt", 
        setup_icon  = "myicon.ico",
        pub_url     = "mycompany.com", 
        sup_url     = "mycompany.github.com/issues",
        upd_url     = "mycompany.github.com") %>%

  # Languages Section
  languages_section() %>%

  # Tasks Section
  tasks_section(desktop_icon = FALSE) %>%

  # Files Section
  files_section(app_dir = "my/app/path", file_list = "path/to/extra/files") %>%

  # Icons Section
  icons_section(app_desc       = "This is my local shiny app",
        app_icon       = "notdefault.ico",
        prog_menu_icon = FALSE,
        desktop_icon   = FALSE) %>%

  # Execution & Pascal code to check registry during installation
  # If the user has R, don't give them an extra copy
  # If the user needs R, give it to them
  run_section() %>%
  code_section() %>%

  # Write the Inno Setup script
  writeLines(file.path("my/app/path", "My AppName.iss"))

  # Check your files, then
  compile_iss()

Feel free to read the Inno Setup documentation and RInno’s documentation to get a sense for what is possible. Also, please suggest useful features or build them yourself! We have a very positive culture at FI Consulting, and we would love to get your feedback.

Please note that this project has a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Download Details:

Author: Ficonsulting
Source Code: https://github.com/ficonsulting/RInno  
License: View license

#r #electron #json #javascript 

Rinno: How to Install Local Shiny Apps

Dockeron: A Project Built on Electron + Vue.js for Docker On Desktop

A dockeron project, built on Electron + Vue.js for Docker.

  • Template generator: electron-vue
  • Docker Engine API: dockerode.
  • UI components: iView

I am only using Mac version, which means that the Windows and Linux versions are to be tested.

Notice that, this project is still under active development, many functionalities or features are not implemented yet, and some parts are still buggy.

Since this is my first front-end project, there might be some bad practices BUT I want to make Dockeron better. This is why I would really appriciate the help from you and the community.

Welcome PR and issues.

TODOs and progress

Please refer to project dockeron.

Development

Make sure you have Node.js installed (node@^6.5.0 or higher is recommended).

Clone the repo to your machine (or fork it to your github account then clone from there)

git clone git@github.com:dockeron/dockeron.git
cd dockeron

Make your branch from develop

Install all dependencies then npm run dev

npm install
npm run dev

Contributing

Contributing to Dockeron

Screenshots

Alternatives

This project was generated from electron-vue.


Download Details:

Author: dockeron
Source code: https://github.com/dockeron/dockeron
License: MIT license
#docker #vuejs #electron 

Dockeron: A Project Built on Electron + Vue.js for Docker On Desktop

Electron.jl: Provides Easy Access to Atom/electron From Julia

Electron.jl

Provides easy access to atom/electron from Julia

Installation

@require "github.com/jkroso/Electron.jl" => Electron

See Rutherford.jl for example usage

API

latest()

Returns the VersionNumber of electons latest release

install(::VersionNumber)

Installs a given version of Electron and returns the path to its executable

import Electron
electron = Electron.install(Electron.latest())
stdin,process = open(`$electron path/to/your/app`, "w")

App

Boots up an Electron app which can have messages written to its stdin in order to open windows

const app = App("Electron")

Download Details:

Author: jkroso
Source Code: https://github.com/jkroso/Electron.jl 

#julia #electron 

Electron.jl: Provides Easy Access to Atom/electron From Julia
Gordon  Taylor

Gordon Taylor

1660658880

Slate: WIP - We're Building The Place You Go to Discover, Share

Slate

An open source storage system for your data that makes it easy to collect, organize, and share them anywhere on the web.

Slate

Introduction

Slate Preview

Slate is the first open source file storage application designed to encourage collaboration and research across a distributed network. It is a first step towards enabling a thriving network for data storage and transactions powered by IPFS, Filecoin and Textile that is open and usable for everyone. Our goal is to provide a meaningful story for every feature the protocol provides today and in the future. The Slate Project is the byproduct of a growing community of contributors from around the world.

Slate is tightly scoped for the present and more broadly thought out for the future. Our primary objective is to create a best-in-class experience for uploading, collecting, and sharing media. Additional filetypes will be supported, but our focus is to start with the pieces that apply to everyone and then dial into more specific formats.

Create an account and try it out!

Get involved

Slate is built by a growing community of collaborators and contributors. We’d love for you to join us! You can reach out to us by email at hello@slate.host

Developer API

Slate has a Developer API that allows you upload files using code and HTTP. Every user who creates an account on Slate can use the API. The documentation is visible after logging in, under the API tab.

Download Details:

Author: Filecoin-project
Source Code: https://github.com/filecoin-project/slate 
License: MIT license

#javascript #electron #react #nextjs 

Slate: WIP - We're Building The Place You Go to Discover, Share
Reid  Rohan

Reid Rohan

1660551840

Ganache-ui: Personal Blockchain for Ethereum Development

Ganache

Ganache is your personal blockchain for Ethereum development.

Getting started

You can download a self-contained prebuilt Ganache binary for your platform of choice using the "Download" button on the Ganache website, or from this repository's releases page.

Contributing

Please open issues and pull requests for new features, questions, and bug fixes.

Requirements:

  • node v12.13.1

To get started:

  1. Clone this repo
  2. Run npm install
  3. Run npm run dev

If using Windows, you may need windows-build-tools installed first.

Building for All Platforms

Each platform has an associated npm run configuration to help you build on each platform more easily. Because each platform has different (but similar) build processes, they require different configuration. Note that both Windows and Mac require certificates to sign the built packages; for security reasons these certs aren't uploaded to github, nor are their passwords saved in source control.

On Windows:

Building on Windows will create a .appx file for use with the Windows Store.

Before building, create the ./certs directory with the following files:

  • ./certs/cert.pfx - Note a .pfx file is identical to a .p12. (Just change the extension if you've been given a .p12.)

In order to build on Windows, you must first ensure you have the Windows 10 SDK installed. If you have errors during the build process, ensure the package.json file's windowsStoreConfig.windowsKit points to your Windows 10 SDK directory. The one specified in the package.json file currently is what worked at the time this process was figured out; it may need to be updated periodically.

Because Windows requires a certificate to build the package -- and that certificate requires a password -- you'll need to run the following command instead of npm run make:

$ CERT_PASS="..." npm run build-windows

Replace ... in the command above with your certificate password.

This will create a .appx file in ./out/make.

On Mac:

Building on a Mac will create a standard Mac .dmg file.

Before building on a Mac, make sure you have Truffle's signing keys added to your keychain. Next, run the following command:

$ npm run build-mac

This will create a signed .dmg file in ./out/make.

On Linux:

Bulding on Linux will create a .AppImage file, meant to run on many versions of Linux.

Linux requires no signing keys, so there's no set up. Simply run the following command:

$ npm run build-linux

This will create a .AppImage file in ./out/make.

Generating Icon Assets

Asset generation generally only needs to happen once, or whenever the app's logo is updated. If you find you need to rebuild the assets, the following applications were used:

Two tools were used:

electron-icon-maker generates assets for all platforms when using Electron's squirrel package, and these assets live in ./static/icons. svg2uwptiles generates all assets needed for the Windows appx build, and those assets live in ./build/appx. These locations can be changed in the future, but make sure to change the associated configuration pointing to these assets.

Note from the author: I found managing these assets manually -- especially the appx assets -- was a pain. If possible, try not to edit the assets themselves and use one of the generators above.

Flavored Development

"Extras" aren't stored here in this repository fordue to file size issues, licensing issues, or both.

Non-ethereum "flavored" Ganache extras are uploaded to releases here: https://github.com/trufflesuite/ganache-flavors/releases

When "extras" change they should be uploaded to a new release, and a corresonding Ganache release that targets the new ganache-flavors release (see common/extras/index.js for what you'dd need to update)

Corda

Corda requires 4 "extras" that get downloaded at runtime.

braid-server.jar is used to communicate to corda nodes via JSON RPC over HTTP. This file is built from https://gitlab.com/bluebank/braid/tree/master/braid-server. To build: run mvn clean install in the root of the project.

corda-tools-network-bootstrapper-4.3.jar is used to create corda networks from configuration (_node.conf) files. It contains an embedded corda.jar and the logic required to create a network. To update or download the latest corda-tools-network-bootstrapper go to https://software.r3.com/artifactory/corda-releases/net/corda/ and download the version you want. You'll need to update the file name in src/common/extras/index.js if the version changes.

Corda and braid require Java's JRE 1.8, aka 8. We "release" 4 versions of JRE 1.8: Linux x64, Mac x64, Windows x32, and Windows x64. The Java releases are downloaded from https://adoptopenjdk.net/archive.html -- we use "OpenJDK 8 (LTS)" with "HotSpot". To redistribute these files you will need to unpack/unzip them, then zip them up again (make sure you are on Linux for the Linux release, as it needs its file permissions properly embedded within the zip). It is very important that you ensure that all files are stored at the root of the zip. You'll also want to rename the zip files in the following format: OpenJDK8U-jre_{arch}_{os-name}_hotspot_{version}.zip. You'll need to update the version in src/common/extras/index.js if it changes.

Corda requires PostgreSQL 9.6. We "release" 4 versions of PostgreSQL 9.6: Linux x64, Mac x64, Windows x32, and Windows x64. These are downloaded from https://www.enterprisedb.com/downloads/postgres-postgresql-downloads.To redistribute these files you will need to unpack/unzip them, then zip them up again (make sure you are on Linux for the Linux release, as it needs its file permissions properly embedded within the zip). It is very important that you ensure that all files are stored at the root of the zip. You'll also want to rename the zip files in the following format: postgresql-{version}-2-{os-name}-{arch}-binaries.zip. You'll need to update the version in src/common/extras/index.js if it changes.

By Truffle

Ganache is part of the Truffle suite of tools. Find out more!

Download Details:

Author: Trufflesuite
Source Code: https://github.com/trufflesuite/ganache-ui 

#javascript #electron #developement #ethereum 

Ganache-ui: Personal Blockchain for Ethereum Development

Electron.jl: Julia Wrapper for Electron

Electron 

Overview

Electron.jl wraps the cross-platform desktop application framework Electron. You can use it to build GUI applications in julia.

Alternatives

Blink.jl provides similar functionality (and was a major inspiration for this package!). The main difference between the two packages is that Electron.jl opts for a more minimalistic feature set than Blink.jl. Here are some key differences between the two packages:

  • Electron.jl does not have any web server functionality.
  • Electron.jl has no functionality to translate julia code to JavaScript.
  • Electron.jl uses named pipes for the communication between julia and the electron process (no more firewall warnings!).
  • Electron.jl doesn't integrate with the Juno stack of packages, Blink.jl does in some way (that I don't understand).
  • Electron.jl has a high test coverage.
  • Electron.jl always installs a private copy of Electron during the build phase.

Installation

You can install the package with:

Pkg.add("Electron")

Getting started

Electron.jl introduces two fundamental types: Application represents a running electron application, Window is a visible UI window. A julia process can have arbitrarily many applications running at the same time, each represented by its own Application instance. If you don't want to deal with Applications you can also just ignore them, in that case Electron.jl will create a default application for you automatically.

To create a new application, simply call the corresponding constructor:

using Electron

app = Application()

This will start a new Electron process that is ready to open windows or run JavaScript code.

To create a new window in an existing application, use the Window constructor:

using Electron, URIs

app = Application()

win = Window(app, URI("file://main.html"))

Note that you need to pass a URI that points to an HTML file to the Window constructor. This HTML file will be displayed in the new window.

You can update pre-existing Window using function load:

load(win, URI("http://julialang.org"))
load(win, """
<img src="https://raw.githubusercontent.com/JuliaGraphics/julia-logo-graphics/master/images/julia-logo-325-by-225.png">
""")

You can also call the Window constructor without passing an Application, in that case Electron.jl creates a default application for you:

using Electron, URIs

win = Window(URI("file://main.html"))

You can run JavaScript code both in the main or the render thread of a specific window. To run some JavaScript in the main thread, call the run function and pass an Application instance as the first argument:

using Electron

app = Application()

result = run(app, "Math.log(10)")

The second argument of the run function is JavaScript code that will simply be executed as is in Electron.

You can also run JavaScript in the render thread of any open window by passing the corresponding Window instance as the first argument to run:

using Electron, URIs

win = Window(URI("file://main.html"))

result = run(win, "Math.log(10)")

You can send messages from a render thread back to julia by calling the javascript function sendMessageToJulia. On the julia side, every window has a Channel for these messages. You can access the channel for a given window with the msgchannel function, and then use the standard julia API to take messages out of this channel:

using Electron

win = Window()

result = run(win, "sendMessageToJulia('foo')")

ch = msgchannel(win)

msg = take!(ch)

println(msg)

Examples

The following packages currently use Electron.jl:

Please add any other packages that depend on Electron.jl to this list via a pull request!

Download Details:

Author: Davidanthoff
Source Code: https://github.com/davidanthoff/Electron.jl 
License: View license

#julia #electron 

Electron.jl: Julia Wrapper for Electron
Oda  Shields

Oda Shields

1660487820

Lightweight, Modern Boilerplate Built with Electron, Typescript, React

Delaware County Fair Auction App

This app is in tandem with the mobile app here.

Description

This app was designed for the intent of being able to select participants in an auction to be selected and displayed on all the devices connected to a web-socket server running on a device. Without the server running and properly connected, it will not work as intended. You can find the web-socket here.

Usage

To use this app, have npm and electron installed and run

  • npm install
  • npm run dev

Authors

  • Daniel Dawit

Author:  danield33
Source code: https://github.com/danield33/DelawareCountyAuction
License: MIT license
#react #typescript #javascript #electron #materialui 

Lightweight, Modern Boilerplate Built with Electron, Typescript, React
Chloe  Butler

Chloe Butler

1660302000

Template for: Create React App with Typescript & Electron Forge

Electron Forge & Create React App Typescript Template

Template for creating Electron apps using two popular frameworks with no extra dependencies:

  • Create React App (with Typescript)
  • Electron Forge (WITHOUT Typescript)

For a version of this template without Typescript visit this other repo.

Preface

Electron has become a popular tool for building desktop apps for Windows, macOS and some distributions of Linux. It allows the use of web technologies in the development process, hence, anyone can use their preferred web tools to have a better development experience, React falls in the category of a very preferred web technology.

As of 2022, great frameworks have made and easy entrypoint for new developers to these technologies. Create React App is a popular framework for building React projects offering helpful functionalities as hot reloading or basically non existing configuration or knowledge requirements for webpack or babel. On the other hand, Electron Forge framework achieves similar advantages for Electron.

This template is an attempt to provide a ready to use boilerplate for using both previously mention frameworks without any other dependency.

How to use

How to setup

  1. Clone or download this repository to your local environment.
  2. Install dependencies.
npm install

Now you are ready to create your app. Be careful if you move the location of the index.js file corresponding to React, or the main.js file corresponding to Electron. Check package.json to update their new locations.

How to run project

  1. For this you'll need to use two separate tabs or windows in your terminal. The first one for React and the second one for Electron.
  • 1.1. For React:
npm start
  • 1.2. For Electron:
npm run electron

This can be simplified using another dependencies such as foreman, but this template aims to avoid using any other dependency apart from what is already required inside the frameworks.

How to build

In order to build a production ready version of your React project, and make an installer for your application using Electron Forge, execute the following command:

npm run build-all

Independent builds can be made using commands specified inside the package.json file.

Other npm commands corresponding to the Create React App framework and Electron Forge framework are available, you can checkout those reading the package.json file.

Creating this template

How to replicate this template from scratch

  1. Create an empty project using create-react-app with Typescript. Check the framework's docs.
  2. Install Electron as a development dependency.
  3. Create a main.js inside the src folder. This will be our Electron entry point to manage the main electron processes. Copy here the following code and save file:
const { app, BrowserWindow } = require("electron")
const path = require("path")
const url = require("url")

const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    })

    // and load the index.html of the app.
    const startUrl =
        process.env.WEB_URL ||
        url.format({
            pathname: path.join(__dirname, "../build/index.html"),
            protocol: "file",
            slashes: true,
        })
    mainWindow.loadURL(startUrl)

    // Open the DevTools.
    mainWindow.webContents.openDevTools()
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit()
    }
})

app.on("activate", () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})
  1. Install Electron Forge using the "Importing Existing project" guide here at it's website.
  2. Add the next block of json key-value pairs or replace them if any already exists at package.json. Don't change what is set to main and homepage in the following json data, but use your own description, author info and license.
"main": "src/main.js",
"description": "Electron Forge & Create React App Template",
"author": {
    "name": "Your name",
    "email": "your@em.ail"
},
"license": "MIT",
"homepage": "./",
  1. Replace all scripts object inside package.json for the following object:
"scripts": {
    "start": "BROWSER=none react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "WEB_URL=http://localhost:3000 electron .",
    "electron-prd": "electron .",
    "electron-forge": "WEB_URL=http://localhost:3000 electron-forge start",
    "electron-forge-prd": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "build-all": "npm run build; npm run make"
}
  1. Add /out to your .gitignore file
# Electron Forge
/out

You now should have the same template.

References

Sepulveda, C. (2017). How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary. https://medium.com/free-code-camp/building-an-electron-application-with-create-react-app-97945861647c

Electron Forge. (2021). Importing Existing Project. https://www.electronforge.io/import-existing-project


Author: hakantakiri
Source code: https://github.com/hakantakiri/crats-ef
License: MIT license
 

#react-native #typescript #javascript #electron 

Template for: Create React App with Typescript & Electron Forge
Quinten  Boehm

Quinten Boehm

1660135620

3D Docker Containers Viewer Built with Electron, React and Three Fiber

Turborepo starter with pnpm

This is an official starter turborepo.

What's inside?

This turborepo uses pnpm as a packages manager. It includes the following packages/apps:

Apps and Packages

  • docs: a Next.js app
  • web: another Next.js app
  • ui: a stub React component library shared by both web and docs applications
  • eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
  • tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This turborepo has some additional tools already setup for you:

Setup

This repository is used in the npx create-turbo@latest command, and selected when choosing which package manager you wish to use with your monorepo (pnpm).

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm run build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm run dev

Remote Caching

Turborepo can use a technique known as Remote Caching (Beta) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching (Beta) you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
pnpx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:

pnpx turbo link

Useful Links

Learn more about the power of Turborepo:


Author: trindadematheus
Source code: https://github.com/trindadematheus/portus
 

#javascript #docker #react-native #electron 

3D Docker Containers Viewer Built with Electron, React and Three Fiber
Marisol  Kuhic

Marisol Kuhic

1660109100

Pomodoro App: A Pomodoro App using Electron, React and TypeScript

Pomodoro App 

Pomodoro GIF

Adjustments and improvements

The project is still in development and the next updates will focus on the following tasks:

  •  Start timer
  •  Stop timer
  •  Play sounds
  •  Show notifications

🛠 Technologies Used

📫 Contributing to Pomodoro App

To contribute to Pomodoro App, follow these steps:

  1. Fork this repository.
  2. Create a branch: git checkout -b <branch_name>.
  3. Make your changes and commit them: git commit -m '<commit_message>'
  4. Push to original branch: git push origin <project_name> / <local>
  5. Create the pull request.

Or, see the GitHub documentation on how to create a pull request.

🤝 Collaborators

We thank the following people who contributed to this project:

Fellipe Utaka display photo
Fellipe Utaka 

Author: fellipeutaka
Source code: https://github.com/fellipeutaka/electron-pomodoro-app
License: MIT license

#react-native #typescript #electron 

Pomodoro App: A Pomodoro App using Electron, React and TypeScript
Marisol  Kuhic

Marisol Kuhic

1660051105

A Twitch Chat Viewer Desktop Application Built with React and Electron

twitch-chat-viewer

A desktop application built with React + typescript and Electron JS to check your Twitch without having to use the searcher and being in top of all windows.

How to install

  • Download from releases the program and move the direct access to your Desktop.

Features

  • English and Spanish support
  • Minimalistic design
  • Usefull
  • Resizable
  • Easy to use

Previews

image

Resizable!

image


Author: guillerp8
Source code: https://github.com/guillerp8/twitch-chat-viewer
 

#react-native #electron #typescript #javascript 

A Twitch Chat Viewer Desktop Application Built with React and Electron