Comments (11)
@kgs916 I've seen that error before when trying to run a require
statement in the main process.
I haven't tried esri-loader
in Electron, but in a few prototypes that I built I didn't seem to need it.
Here's a simple example you can try out really fast using electron-quick-start.
Run the following commands in console:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start
The quickstart app should launch. If it does then control-c in the console to exit the app.
Change the index.html file to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
</head>
<body>
<h1>Hello World Part 2!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<div id="viewDiv"></div>
</body>
<script src="index.js"></script>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
And create index.js
and copy the following content in:
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
console.log("Require() loaded.");
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
});
The last step is to run npm start
again and you should see a map.
from esri-loader.
I have updated my example at https://github.com/kgs916/electronMap to include the change to the esri-loader. It is now working correctly both in and outside of Electron.
from esri-loader.
I like the name. I have renamed the repo to ng-cli-electron-esri and updated it to use the latest esri-loader. Thanks for getting release out there!
One more change that I want to make to this example before I consider it good-to-go is to use the angular2-esri-loader so that it matches the example gist. I've submitted a PR to update the angular2-esri-loader to the latest esri-loader as well tomwayson/angular-esri-loader#13.
from esri-loader.
@kgs916
First, let me start by saying that I've never created an electron app that uses the ArcGIS API.
I believe @odoe has.
Based on that error, it looks to me like window.require
is Node's require. What I suspect is happening is that when you call load()
(thank you for providing source btw) that it calls isLoaded()
which sees that require()
is defined and says, yeah, it's already loaded.
I did a little searching, and I came upon @odoe's suggestion to rename node's require before loading the JSAPI: https://geonet.esri.com/thread/160978#comment-623946 I would try just renaming require()
to nodereq()
and then using that where you'd ordinarily use require()
for node modules, maybe just here?
Can you try that?
from esri-loader.
Yeah, I've been wondering about the value of esri-loader in an electron app. I'm guessing the reaons to use it is b/c you have source that uses imports
/exports
that is getting transpiled into code that runs in electron.
In that case, I wonder if using the Exclude and Require pattern would be a better solution. You could trade the run time complexity introduced by esri-loader for the the build time complexity of configuring webpack (or whatever bundler you're using) to exclude the esri
modules and output an AMD bundle that would be something you could use i @andygup's above example. Presumably you are building a desktop application and therefore the initial load time should not be as great a concern, so the benefits of using esri-loader (like lazy loading) should not be as important, right?
from esri-loader.
RE: using imports/exports
so true and a good point so thanks for calling that out. It does depend on how you are building the app. My overly simple, single page web app above is definitely not a one-size-fits-all solution.
RE: dedicated loader versus Exclude and Require...hmmm good question, and I think either pattern could actually work. The cool thing about Electron is you can use it with your favorite JavaScript framework such as Angular, Vue, React, Ember etc. It's all V8 JavaScript Engine under the hood. So, the pattern you use pretty much depends on your needs, likes, requirements, skillz and tolerances.
RE: load times. The nice thing about Electron is the shell that loads the app is pretty lightweight and fast, so as you mentioned it seems reasonable that you may have a little more wiggle room for module loading that might not exist in a full-blown browser-based app. As for which pattern is best, it may actually take some A/B testing to compare dedicated loader versus exclude and require, or any other pattern that developer comes up with.
From an Electron standpoint and with respect to the error above, the real key to app happiness is to carefully separate the Renderer processes from the Main process. The Renderer handles all the .html, .css and .js goodness. Bundling modules, transpiling etc for the Renderer works just like it does in non-Electron apps. For example, Electron even comes with it's own compiler.
from esri-loader.
@tomwayson and @andygup, thanks for all the great info!
I would like to avoid the "Exclude and Require pattern" if I can because I am using the Angular CLI and there is very limited access to the webpack build process to make the necessary changes.
I managed to get this working with the Angular CLI making a very small change to the esri-loader. I created a pull request with the change: #22. I tried this out both inside and outside of Electron and it worked well. I can create an example demonstrating this as well if needed I just ran out of time this morning to get that pulled together.
from esri-loader.
Resolved in #22
from esri-loader.
@kgs916 if you update your electronMap example to use the v1.0.0 let me know and I'll include it in the examples.
from esri-loader.
@tomwayson I'm thinking about renaming electronMap to something a bit more descriptive. What do you think of ng-cli-electron-esri-loader
? To long?
I was also thinking to add an npm script to esri-angular-cli-example
that would allow for it to be run in Electron. This would make for a much more compelling example of JSAPI running in Electron. What do you think?
from esri-loader.
What do you think of ng-cli-electron-esri-loader?
Maybe just ng-cli-electron-esri?
thinking to add an npm script to esri-angular-cli-example that would allow for it to be run in Electron
Go for it!
from esri-loader.
Related Issues (20)
- drop IE support? HOT 2
- ArcGIS JS API 4.18 Sketch Widget graphics and graphic selection often do not render in Angular 11 application HOT 4
- angular esri-loader 4.18 graphics refresh bug HOT 4
- Sketch widget: graphics not visible HOT 2
- new `esri-loader-typings-helper` plugin for VS Code HOT 2
- esri-loader dojoConfig removed not able to set has: {"csp-restrictions": true} HOT 2
- isLoaded or ready prop? HOT 2
- switch release process over to use np HOT 1
- Is it possible to have crossorigin attribute when loading ArcGIS modules? HOT 8
- Clean up dependabot PRs HOT 1
- 利用BaseTileLayer.createSubclass进行扩展,读取离线tms瓦片。 HOT 3
- Esri sources don't get loaded from our server HOT 3
- wall o compile node_module/@types errors when you run tests HOT 2
- ERROR ReferenceError: Can't find variable: document HOT 2
- qustion:how to test esri-loader with jest HOT 7
- After upgrading ESRI/Loader from 2.5.0 to 3.6, Querytask.js library file is returning 404 error HOT 2
- Update product name in error messages at 4.26 HOT 3
- Are you using esri-loader with Angular and Zone.js?
- What is the latest version that supports Angular 14 and ESRI JS API v3.x? HOT 2
- How to change the default Map Language ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esri-loader.