Not an Issue but a question about esri-flux-react HOT 10 CLOSED

Additionally, should I use esri-leaflet instead of the full arcgis platform requiring the dojoConfig and everything else?

I can't find a writeup of functionality I'd lose.

from esri-flux-react.

@lapint Yes some packages from node and other sources often have problems with dojo and esri because of the different module systems, but also because of configured paths and dependencies. It very quickly becomes a nightmare trying to configure all of that.

The best option I have found that works with Esri & Dojo is Webpack. It will allow you to import node modules written in CommonJS, write your code in ES6, and generate a build in AMD which satisfies dojo. This will allow you to use things like react-router, react-linkify, material-ui, and many more cool features. I have an example repo demonstrating how to make all these work together that is similar to this, but uses Redux and Sass instead of Alt and Stylus, you can find it here esri-redux and here is a material-ui branch esri-redux with material-ui. Those may get updated soon to add in more Webpack features and less Gulp tasks once I get some more time.

As per the second question, Esri-Leaflet is lighter than the Esri Javascript API but Esri's Javascript API does have more features. My understanding of esri-leaflet is it creates small wrappers around esri services so they can be consumed in a Leaflet application. You probably won't find a write up anywhere of what one has over the other, but Esri will have more utilities, geometry operations, widgets, and support for webmaps. Those things can work in Esri-Leaflet but will require a little extra effort on the developers part.

My recommendation for picking which one to use would be to try to evaluate all your requirements and potential future requirements (if possible), and look over the API and see if it supports what you want to do. With Webpack, the performance difference is neglible but there are more configurations and tooling becomes more difficult with Esri's API because of AMD. (Prerendering react components in node is a major pain with the Esri API because modules don't exist locally and even with Webpack, you still need dojoConfig but it becomes easier to deal with in my opinion).

Currently Esri 3.17 has the most features, Esri 4.0 is more flexible but was a rewrite of the API essentially so it does not have all functionality ported over from 3.17 yet and does not support all the layers. Esri Leaflet is probably the smallest and lightest, and is easy to integrate with tooling, and does not need any dojoConfig, but does not have quite the number of features and prebuilt widgets as the main Esri API does.

from esri-flux-react.

Thank you very much for the response, exactly what I needed.

Your sample projects have been incredibly useful and I will be looking into integrating webpack ASAP.

from esri-flux-react.

No problem, glad they have been helpful.

from esri-flux-react.

Hey Robert,

I'm hoping you can help me but it's a shot in the dark.

I have converted my previous project to work with webpack and everything works great. However, now I want to combine the Map with the React Starter Kit https://github.com/kriasoft/react-starter-kit/

I'm essentially trying to create a Map inside the starter kit so a user can login with facebook and then access a map with their details.

I'm running into issues converting your esri-flux package structure to work with the react-starter-kit. I can see the resemblance between your 2 configurations but I cannot get the packages to combine.

One current issue is -
"Error: Cannot find module 'esri/Map'"

Which I think occurs because the starter kit uses commonjs2. I tried changing the libraryTarget to amd and umd but I'm just not familiar enough with webpack enough yet as that caused other issues.

Do you have any idea how to minimally convert the starter kit to work with DOJO?

Thanks

from esri-flux-react.

I'm trying to create a disaster flood relief map for the Louisiana Floods going on so I'm going to abandon trying to combine them for now.

For now I am going to just redirect to a different URL hosting my map and pass along the user login information in a cookie.

from esri-flux-react.

Hey @lapint,

You may have a few issues when trying to use that project setup but nothing a little configuration can't fix. Just some heads up, anytime you try to do server rendering with Dojo or Esri modules, you are going to have some difficulties because those modules do not exist locally, so node will throw module not found errors. You can use requirejs in node which has map functionality that will allow you to map require calls to missing modules to a local file. Also, only if your not using esri modules or window or document in your render functions, will you be able to do server rendering. Check out this prerender script I wrote to do it in my projects, this is the same script I actually use on many of my projects. Note that this is not necessary for all projects, but a good idea for applications building the entire UI from Javascript.

For your first issue, you are partially right, commonjs2 will not work with Dojo in the browser, so you will need to update the config to target amd which you can do like so (this is from my webpack config output section):

output: {
  path: path.join(root, 'dist'),
  filename: 'js/[name].[hash].js',
  libraryTarget: 'amd'
}

However the issue you are seeing is because Webpack cannot load the module (Remember Esri did change the module name when upgrading from 3.17 to 4.0 from esri/map to esri/Map so make sure you are using the right one). You need to teach Webpack how to deal with those modules which you can do with externals. I have this function I use:

var weCantMake = function weCantMake (request) {
  return /^dojo/.test(request) || /^dojox/.test(request) || /^dijit/.test(request) || /^esri/.test(request);
};

And then I can use it the externals configuration:

externals: [function (context, request, callback) {
  if (weCantMake(request)) {
    callback(null, 'amd ' + request);
  } else {
    callback();
  }
}]

You can see the full configuration file I am using here.

This will tell Webpack to not try to include these modules in the bundle and as long as you have the libraryTarget set to amd, you should be able to make the linked project work. Let me know if any of this helps, or if it gets you past the current error you were seeing.

from esri-flux-react.

Thanks for the response @Robert-W

I had successfully got the externals logic working and verified it in the server.js.map file where they are referenced.

I was able to get the build process to complete but then when I went to run the actual server code I get this error now:

lpint:build lukepint$ node server.js
Error: Cannot find module 'esri/Map' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Users/lukepint/workspace/disasterhelp/build/webpack:/external "esri/Map":1:1) at __webpack_require__ (/Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:19:1) at Object.module.exports.Object.defineProperty.value (/Users/lukepint/workspace/disasterhelp/build/webpack:/src/components/DisasterMap/js/actions/MapActions.js:5:1) at __webpack_require__ (/Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:19:1) at Object.module.exports.Object.defineProperty.value (/Users/lukepint/workspace/disasterhelp/build/webpack:/src/components/DisasterMap/DisasterMap.js:15:1) at __webpack_require__ (/Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:19:1) at Object.<anonymous> (/Users/lukepint/workspace/disasterhelp/build/webpack:/src/routes.js:18:1) at __webpack_require__ (/Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:19:1) at Object.<anonymous> (/Users/lukepint/workspace/disasterhelp/build/webpack:/src/server.js:22:1) at __webpack_require__ (/Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:19:1) at /Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:39:1 at Object.<anonymous> (/Users/lukepint/workspace/disasterhelp/build/webpack:/webpack/bootstrap aa8a074418190811e23b:39:1) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3) at Module.runMain(module.js:590:10)
`
I can tell it's trying to use the external mapping via the error but I wasn't able to get past this point.

from esri-flux-react.

So the previous comment then brings us to your prerender.js script and needing map functionality configured I believe.

This is where I'm somewhat stuck, does this mean I need to integrate Gulp into the build process to be able to run prerender.js?

I realize this is not directly related to your project - we can keep communicating here but if you think through email would be better/easier, mine is --removed email for privacy :) --

from esri-flux-react.

Hey @lapint, I dont mind communicating here, this way if anyone else faces a similar issue they might benefit from this.

The map functionality comes from requirejs and you do not need Grunt/Gulp or any of those. Essentially because node's require has no concept of missing modules it just breaks when it hits these which is why you see Cannot find module 'esri/Map'. Requirejs does have the ability to replace node's require which gives you more control over module loading and for your case, you will have to find a way to integrate it into that project. It may be difficult because that project is doing server rendering, you will need to replace that functionality with something custom that will work with Esri Modules. It looks like around Line #104 in the server file is where they call ReactDOM.renderToString, however they are loading the actual component somewhere else. Universal Router is probably pulling it in via routes. If you implement requirejs there as a loader then you may be able to configure it to load the component containing maps correctly. A simplified requirejs config could be done like so:

const requirejs = require('requirejs');

const requireconfig = {
  map: {
    '*': {
      'esri/Map': 'some/local/file',
      'esri/request': 'some/local/file'
    }
  },
  nodeRequire: require
};

requirejs(requireconfig);
const myComponentWithAMap = requirejs('./path/to/MapComponent');

This would effectively intercept each require to an esri module and remap it to a local file, so if you implemented this in routes/index.js, it may allow you to require your components without throwing module not found errors. The disadvantage to this approach is it can be cumbersome as essentially every module you use that cannot be found must be explicitly listed in the requirejsconfig.map section, as far as I know it does not accept patterns. Webpack can give you a list of modules in a callback to compiling which you can then grab all the esri related ones, this is what I do in prerender. However if you are not using the webpack node API, then you won't have access to this information. You can manually do it which will work, but just means you need to maintain it. Or you can write a script to crawl your application starting at the root component and find all esri dependencies, that's what a prerender npm module I have written does to create this list programmatically, you can see that in the generateRemap function on line 105. The 'some/local/file' above is any local module, essentially since we are not using the Esri or Dojo Components in the render, they are not necessary to prerender, so we remap the requests to esri/dojo components to a local file, thus essentially 'ignoring' them.

from esri-flux-react.