Linux: /.config/App Name Mac OS: /Library/Application Support/App Name Windows: C: Users AppData Local App Name In Electron we can use app.getPath('userData') to get the correct folder. Then we make a function to write our data to the disk or we use a library that does it for us. Using a Library to Store Data. Vala is made to make GTK easy as well as for other things and it really does, and makes it easier than working with C/C, Python, or any other, See More Specs Platforms: Windows, Linux, Mac. Electron - Signing a Mac Application 07 Jun 2015 by Marco Pracucci Comments. If you’re building a Mac app with Electron (formerly known as Atom Shell), you will have to sign it before releasing.
Developers of apps built with the cross-platform Electron framework say that Apple has started rejecting their applications during its Mac App Store review process, and has threatened cancellation of Apple Developer Accounts for repeated rules violations.
The issue was first raised in August and only affects Electron apps seeking Mac App Store Distribution. The problem received widespread attention following a developer blog post on Sunday.
Apple's App Store Review Guidelines have long specified that applications may use only public APIs. The phone-and-computer maker maintains private APIs for its own usage, but it doesn't support them for third-parties.
The off-limits APIs singled out by Apple include:
CAContext , CALayerHost , NSAccessibilityRemoteUIElement , NSNextStepFrame , NSThemeFrame , and NSURLFileTypeMappings , among others.
Despite Apple's warning, those making macOS apps sometimes risk crafting code that interacts with private APIs because they can distribute such apps themselves, outside of the Mac App Store.
The Chromium project, the open source foundation of Google's Chrome browser, is one prominent code base that talks to Apple's private APIs. And Electron apps include Chromium as a runtime library.
Electron has a number of drawbacks – builds tend to be large and memory-hungry, for instance – but the advantage of being able to use familiar web technology to create a single code base that can generate builds for macOS, Linux, and Windows outweighs the downsides in many cases.
Apple hasn't previously rejected Electron-based applications for private API usage – at least not on a consistent basis – so presumably something has changed in Apple's review process.
The Register asked Apple to explain what's going on but the Cupertino crew did not respond to a request for comment. Whatever prompted the change, a rule long ignored is now being enforced, at least for Electron apps.
We also asked Google whether it intends to move away from private APIs in Chromium. Again, no response.
Here's how we made a no-fuss RSS vulture app using trendy ElectronREAD MORE
What makes this particularly alarming for developers is that some have received a warning threatening excommunication from Apple's walled garden if rules violations persist in subsequent app submissions: 'Continuing to use or conceal non-public APIs in future submissions of this app may result in the termination of your Apple Developer account, as well as removal of all associated apps from the App Store.'
The API clampdown recalls several months in 2010 when a draft of Apple's iOS 4.0 rules disallowed iOS apps that relied on programming languages other than Objective-C, C, C++, or JavaScript. Following criticism from the developer community, Apple adopted more flexible requirements. But the way things have been going in terms of security concerns – e.g. app notarization – it seems doubtful that Apple will relent.
The iPhone maker's heightened concern about Electron raises questions about whether future updates to widely used Electron-based desktop apps, such as Slack, will get flagged by Apple's reviewers.
Developers reporting rejections have indicated that Apple has recommended specific outdated Electron builds that it finds acceptable. These include versions 3.0.0-beta.7, 2.0.8, 1.8.8, or 1.7.16 of the Electron SDK, which is presently at version 7.0.1.
Contributors to the open source Electron project have been working to disable calls to the offending APIs, so a forthcoming Electron update may address Apple's requirements. ®
Get ourTech Resources
No webpack configuration or “ejecting” necessary.
I recently built an Electron app using create-react-app. I didn’t need to muck about with Webpack, or “eject” my app, either. I’ll walk you through how I accomplished this.
I was drawn to the idea of using create-react-app because it hides the webpack configuration details. But my search for existing guides for using Electron and create-react-app together didn’t bear any fruit, so I just dove in and figured it out myself.
If you’re feeling impatient, you can dive right in and look at my code. Here’s the GitHub repo for my app.
Before we get started, let me tell you about Electron and React, and why create-react-app is such a great tool.
Electron and React
React is Facebook’s JavaScript view framework.
A JavaScript library for building user interfaces - React
A JavaScript library for building user interfacesfacebook.github.io Electron Mac App
And Electron is GitHub’s framework for building cross-platform desktop apps in JavaScript.
Electron
Build cross platform desktop apps with JavaScript, HTML, and CSS.electron.atom.io
Most use webpack for the configuration necessary for React development. webpack is a configuration and build tool that most of the React community has adopted over alternatives like Gulp and Grunt.
The configuration overhead varies (more on this later), and there are many boilerplate and application generators available, but in July 2016 Facebook Incubator released a tool,create-react-app. It hides most of the configuration and lets the developer use simple commands, such as
npm start and npm run build to run and build their apps.
What is ejecting, and why do you want to avoid it?
create-react-app makes certain assumptions about a typical React setup. If these assumptions aren’t for you, there is an option to eject an application (
npm run eject ). Ejecting an application copies all the encapsulated configuration of create-react-app to the your project, providing a boilerplate configuration that you can change as you wish.
But this is a one way trip. You can’t undo ejecting and go back. There have been 49 releases (as of this post) of create-react-app, each making improvements. But for an ejected application, you would have to either forgo these improvements or figure out how to apply them.
An ejected configuration is over 550 lines spanning 7 files (as of this post). I don’t understand it all (well, most of it, actually) and I don’t want to.
Goals
My goals are simple:
Basic Recipe
Steps 1 and 2 are pretty straightforward. Here’s the code for steps 3 and 4:
(Gist)
And for steps 5 and 6:
(Gist)
When you run the npm commands in step 7, you should see this:
You can make live changes to the React code and you should see them reflected in the running Electron app.
This works okay for development, but has two shortcomings:
Specifying the loadURL in Production and Dev
In development, an environment variable can specify the url for
mainWindow.loadURL (in electron-starter.js ). If the env var exists, we’ll use it; else we’ll use the production static HTML file.
We’ll add a npm run target (to
package.json ) as follows:
Electron Ios App
Update: Windows users will need to do the following: (thanks to @bfarmilo)
In
electron-starter.js , we’ll modify the mainWindow.loadURL call as follows:
(Gist)
Electron Build Mac
There is a problem with this:
create-react-app (by default) builds an index.html that uses absolute paths. This will fail when loading it in Electron. Thankfully, there is a config option to change this: set a homepage property in package.json . (Facebook documentation on the property is here.)
So we can set this property to the current directory and
npm run build will use it as a relative path.
Using Foreman to Manage React and Electron Processes
For convenience, I prefer to not
Foremen is a good process management tool. We can add it,
and add the following
Procfile https://yardclever190.weebly.com/how-to-view-the-code-of-an-app-mac.html.
(Gist)
That deals with (1). For (2), we can add a simple node script (
electron-wait-react.js ) that waits for the React dev server to start, then starts Electron.
(Gist)
NOTE: Foreman will offset the port number by 100 for processes of different types. (See here.) So,
Now modify the
Procfile
(Gist)
Finally, we’ll change the run targets in
package.json to replace electron-dev with:
And now, we can execute:
UPDATE (1/25/17) : I‘ve added the following section in response to some user comments (here and here). They need access to Electron from within the react app and a simple require or import throws an error. I note one solution below. Accessing Electron from the React App
An Electron app has two main processes: the Electron host/wrapper and your app. In some cases, you’d like access to Electron from within your application. Do you need a mac to publish iphone apps. For example, you might want to access the local file system or use Electron’s
ipcRenderer . But if you do the following, you’ll get an error
There is some discussion about this error in various GitHub and Stack Overflow issues, such as this one. Most solutions propose webpack config changes, but this would require ejecting the application.
Electron Make Mac Apple
However, there is a simple workaround/hack.
Wrapping Up
For convenience, here is a GitHub repo that has all the changes above, with tags for each step. But, there it isn’t much work to bootstrap an Electron application that uses create-react-app. (This post is much longer than the code and changes you would need to integrate the two.)
And if you are using create-react-app, you might want to check out my post, Debugging tests in WebStorm and create-react-app.
Thanks for reading. You can check out more of my posts at justideas.io
UPDATE (2/2/17). A reader, Carl Vitullo, suggested to use Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |