├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.html ├── index.js ├── modules ├── App.js ├── Home.js ├── Map.js ├── Maps.js └── NavLinkItem.js ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # build output 40 | dist 41 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # esri-react-router-example Change Log 2 | All notable changes to this project will be documented in this file. 3 | This project adheres to [Semantic Versioning](http://semver.org/). 4 | 5 | ## 0.9.0 6 | 7 | ### Added 8 | - preload JSAPI once the initial route has rendered using esri-loader-react 9 | 10 | ## 0.8.0 11 | 12 | ### Added 13 | - search living atlas (only) and use calcite theme 14 | 15 | ## 0.7.1 16 | ### Fixed 17 | - fix HTTP AGO API calls failing from HTTPS sites (gh-pages) 18 | 19 | ## 0.7.0 20 | ### Added 21 | - add ability to search by term 22 | 23 | ## 0.6.0 24 | ### Added 25 | - add maps route. currently shows "top 10" webmaps 26 | - added map error handling 27 | 28 | ## 0.5.0 29 | ### Added 30 | - home route allows user to enter their own map id 31 | 32 | ## 0.4.0 33 | ### Added 34 | - map route shows a web map based on id passed in as route parameter 35 | - add list of a few links to maps on the home route 36 | - add link from map title to item detail page 37 | 38 | ### Support 39 | - lint using standard 40 | 41 | ## 0.3.0 42 | ### Added 43 | - add loading indicator to map route until map is loaded 44 | 45 | ### Fixed 46 | - build should minify output 47 | 48 | ## 0.2.0 49 | ### Added 50 | - add bootstrap styles 51 | - add shared navigation via nested routes 52 | - use compact version of ArcGIS API 53 | - add styles to active links 54 | ### Fixed 55 | - bump to latest version of esri-loader to remove webpack warnings in terminal 56 | ### Support 57 | - added build and and gh-pages deploy 58 | 59 | ## 0.1.0 60 | ### Added 61 | - lazy load ArcGIS API for JavaScript using esri-loader 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # esri-react-router-example 2 | 3 | > This example application has been archived because it is very out of date. See https://github.com/tomwayson/create-arcgis-app/ for a more complete and modern implementation using recent versions of [Create React App](https://facebook.github.io/create-react-app/) and [React Router](https://reacttraining.com/react-router/) as well as [ArcGIS REST JS](https://esri.github.io/arcgis-rest-js/). 4 | 5 | Example of how to use [esri-loader-react] and [esri-loader] to load the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) in a [react-router](https://github.com/reactjs/react-router-tutorial) application. 6 | 7 | [View it live](https://tomwayson.github.io/esri-react-router-example) 8 | 9 | ## How it works 10 | The ArcGIS API is not needed until the user navigates to the `/map` route, but we can preload the script without blocking rendering by including [esri-loader-react]'s `` component. 11 | 12 | Once on the map route, the `` component loads the [esri/arcgis/util](https://developers.arcgis.com/javascript/3/jsapi/esri.arcgis.utils-amd.html) module using [esri-loader]'s `dojoRequire()` and then renders a map: 13 | 14 | ```js 15 | // modules/Map.js 16 | componentDidMount () { 17 | // get item id from route params or use default 18 | const itemId = this.props.params.itemId || '8e42e164d4174da09f61fe0d3f206641' 19 | // require the map class 20 | dojoRequire(['esri/arcgis/utils'], (arcgisUtils) => { 21 | // create a map at a DOM node in this component 22 | arcgisUtils.createMap(itemId, this.refs.map) 23 | .then((response) => { 24 | // hide the loading indicator 25 | // and show the map title 26 | // NOTE: this will trigger a rerender 27 | this.setState({ 28 | mapLoaded: true, 29 | item: response.itemInfo.item 30 | }) 31 | }, (err) => { 32 | this.setState({ 33 | mapLoaded: true, 34 | error: err.message || err 35 | }) 36 | }) 37 | }) 38 | ``` 39 | 40 | ## Why? 41 | 42 | See the [esri-loader documentation](https://github.com/Esri/esri-loader#why-is-this-needed) for an explanation of why you would use these techniques. 43 | 44 | ## Development instructions 45 | First you'll need [Node.js](https://nodejs.org) and the package manager 46 | that comes with it: [npm](https://www.npmjs.com/). 47 | 48 | ```bash 49 | git clone https://github.com/tomwayson/esri-react-router-example 50 | cd esri-react-router-example 51 | npm install 52 | npm start 53 | ``` 54 | 55 | Now open up [http://localhost:8080](http://localhost:8080) 56 | 57 | [esri-loader-react]:https://github.com/davetimmins/esri-loader-react 58 | [esri-loader]:https://github.com/Esri/esri-loader 59 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Esri React Router Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 61 | 62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import 'whatwg-fetch' 2 | import React from 'react' 3 | import { render } from 'react-dom' 4 | import { Router, Route, hashHistory, IndexRoute } from 'react-router' 5 | 6 | import App from './modules/App' 7 | import Home from './modules/Home' 8 | import Maps from './modules/Maps' 9 | import Map from './modules/Map' 10 | 11 | console.time('initial render') 12 | render(( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ), document.getElementById('app')) 23 | -------------------------------------------------------------------------------- /modules/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // NavLinkItem is a wrapper around react-router's Link component 3 | // that sets the active class on the
  • around the current nav link 4 | import NavLinkItem from './NavLinkItem' 5 | import EsriLoader from 'esri-loader-react' 6 | 7 | export default class extends React.Component { 8 | componentDidMount () { 9 | console.timeEnd('initial render') 10 | console.log('preloading JSAPI') 11 | console.time('JSAPI loaded') 12 | } 13 | 14 | render () { 15 | const mapOptions = { 16 | url: 'https://js.arcgis.com/3.20/' 17 | } 18 | const currentPathname = this.props.location.pathname 19 | return
    20 | 31 | console.timeEnd('JSAPI loaded')} /> 32 |
    33 | { this.props.children } 34 |
    35 |
    36 | } 37 | } 38 | -------------------------------------------------------------------------------- /modules/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link, hashHistory } from 'react-router' 3 | 4 | export default class extends React.Component { 5 | // search arcgis online for maps 6 | handleSubmit (event) { 7 | event.preventDefault() 8 | const searchTerm = event.target.elements[0].value 9 | const path = `/maps/?q=${searchTerm}` 10 | hashHistory.push(path) 11 | } 12 | 13 | render () { 14 | return

    This is an example of how to use the ArcGIS API for JavaScript in a react-router application.

    15 |

    Search for maps

    16 |

    Search ArcGIS Online for maps

    17 |
    18 | {' '} 19 | 20 |
    21 |

    Or you can try one of these maps:

    22 |
      23 |
    • Missing Migrants
      • 24 |
    • Refugee Routes
      • 25 |
    • 2015 European Sea Arrivals
      • 26 |
    • Portland Bike Map
      • 27 |
    • High Cost Mortgage Loans, 2013
      • 28 |
    29 |

    What's the big deal?

    30 |

    One of the key benefits of the approach demonstrated in this application is that you can lazy load the map. 31 | Notice how fast this page loaded? That's because we haven't loaded the ArcGIS API, nor the map yet.

    32 |

    Show me the code

    33 |

    The source code for this project is on GitHub.

    34 |
    35 | } 36 | } 37 | -------------------------------------------------------------------------------- /modules/Map.js: -------------------------------------------------------------------------------- 1 | // modules/Map.js 2 | import React from 'react' 3 | import { hashHistory } from 'react-router' 4 | import { dojoRequire } from 'esri-loader' 5 | 6 | export default class extends React.Component { 7 | constructor (props) { 8 | super(props) 9 | this.state = { mapLoaded: false } 10 | } 11 | 12 | render () { 13 | // show any map errors 14 | const error = this.state.error 15 | if (error) { 16 | return
    17 |
    {error}
    18 | 19 |
    20 | } 21 | // otherwise, show map 22 | const item = this.state.item 23 | const title = item && item.title 24 | const link = item ? `https://www.arcgis.com/home/item.html?id=${item.id}` : 'javascript:void(0)' 25 | // show a loading indicator until the map is loaded 26 | const loadingStyle = { 27 | display: this.state.mapLoaded ? 'none' : 'block' 28 | } 29 | // show the map title 30 | const titleStyle = { 31 | display: title ? 'block' : 'none' 32 | } 33 | // set up the DOM to attach the map to 34 | return
    35 |
    {title}
    36 |
    37 |
    Loading...
    38 |
    39 | } 40 | 41 | componentDidMount () { 42 | console.log('loading modules') 43 | console.time('modules loaded') 44 | // get item id from route params or use default 45 | const itemId = this.props.params.itemId || '8e42e164d4174da09f61fe0d3f206641' 46 | // require the map class 47 | dojoRequire(['esri/arcgis/utils'], (arcgisUtils) => { 48 | console.timeEnd('modules loaded') 49 | console.log('loading map') 50 | console.time('map loaded') 51 | // create a map at a DOM node in this component 52 | arcgisUtils.createMap(itemId, this.refs.map) 53 | .then((response) => { 54 | console.timeEnd('map loaded') 55 | // hide the loading indicator 56 | // and show the map title 57 | // NOTE: this will trigger a rerender 58 | this.setState({ 59 | mapLoaded: true, 60 | item: response.itemInfo.item 61 | }) 62 | }, (err) => { 63 | this.setState({ 64 | mapLoaded: true, 65 | error: err.message || err 66 | }) 67 | }) 68 | }) 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /modules/Maps.js: -------------------------------------------------------------------------------- 1 | /* global fetch */ 2 | import React from 'react' 3 | import { Link, hashHistory } from 'react-router' 4 | 5 | export default class extends React.Component { 6 | constructor (props) { 7 | super(props) 8 | this.state = { items: [] } 9 | } 10 | 11 | // search arcgis online for maps 12 | handleSubmit (event) { 13 | event.preventDefault() 14 | const searchTerm = event.target.elements[0].value 15 | const path = `/maps/?q=${searchTerm}` 16 | hashHistory.push(path) 17 | } 18 | 19 | componentWillMount () { 20 | this._loadData(this._getQuery(this.props)) 21 | } 22 | 23 | _loadData (query) { 24 | const q = query && query.q 25 | const url = `//www.arcgis.com/sharing/rest/search?num=10&start=0&sortField=avgRating&sortOrder=desc&q=(${q}) (group:"c755678be14e4a0984af36a15f5b643e") type%3A%20%22Web%20Map%22 -type:"Web Mapping Application"&f=json` 26 | fetch(url) 27 | .then((response) => { 28 | return response.json() 29 | }).then((json) => { 30 | this.setState({ 31 | items: json.results 32 | }) 33 | }).catch((ex) => { 34 | console.error('AGO query failed', ex) 35 | }) 36 | }; 37 | 38 | render () { 39 | const listItems = this.state.items.map((item) => { 40 | const to = '/maps/' + item.id 41 | const infoUrl = `https://www.arcgis.com/home/item.html?id=${item.id}` 42 | return
  • 43 |

    {item.title}{ ' ' } 44 | { ' ' } 45 |

    46 |

    {item.snippet}

    47 |
    • 48 | }) 49 | return
    50 |
    51 | {' '} 52 | 53 |
    54 |

    Showing top 10 web maps

    55 |
      { listItems }
    56 |
    57 | } 58 | 59 | componentWillReceiveProps (nextProps) { 60 | const query = this._getQuery(this.props) 61 | const nextQuery = this._getQuery(nextProps) 62 | if ((query && query.q) !== (nextQuery && nextQuery.q)) { 63 | // search term was updated, re-run query 64 | this._loadData(nextQuery) 65 | } 66 | } 67 | 68 | _getQuery (props) { 69 | return props.location && props.location.query 70 | }; 71 | } 72 | -------------------------------------------------------------------------------- /modules/NavLinkItem.js: -------------------------------------------------------------------------------- 1 | // modules/NavLink.js 2 | import React from 'react' 3 | import { Link } from 'react-router' 4 | 5 | export default class extends React.Component { 6 | render () { 7 | const liClass = this.props.to === this.props['data-current-path'] ? 'active' : null 8 | return
    • 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "esri-react-router-example", 3 | "version": "0.9.0", 4 | "description": "Example of how to use the ArcGIS API for JavaScript with react-router", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "standard", 8 | "start": "webpack-dev-server --inline --content-base .", 9 | "build": "webpack -p && cp index.html dist/index.html", 10 | "deploy": "gh-pages-deploy", 11 | "clean-source": "rimraf README.md index.js modules package.json webpack.config.js" 12 | }, 13 | "author": "Tom Wayson (https://tomwayson.com)", 14 | "license": "Apache-2.0", 15 | "dependencies": { 16 | "esri-loader": "^0.3.0", 17 | "esri-loader-react": "^0.2.2", 18 | "react": "^15.4.2", 19 | "react-dom": "^15.4.2", 20 | "react-router": "^2.0.0", 21 | "whatwg-fetch": "^2.0.1" 22 | }, 23 | "devDependencies": { 24 | "babel-core": "^6.5.1", 25 | "babel-loader": "^6.2.2", 26 | "babel-preset-es2015": "^6.5.0", 27 | "babel-preset-react": "^6.5.0", 28 | "gh-pages-deploy": "^0.4.2", 29 | "http-server": "^0.8.5", 30 | "rimraf": "^2.5.4", 31 | "standard": "^8.6.0", 32 | "webpack": "^1.12.13", 33 | "webpack-dev-server": "^1.14.1" 34 | }, 35 | "gh-pages-deploy": { 36 | "staticpath": "dist", 37 | "prep": [ 38 | "build" 39 | ], 40 | "noprompt": false 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['whatwg-fetch', './index.js'], 3 | 4 | output: { 5 | path: 'dist', 6 | filename: 'bundle.js', 7 | publicPath: '' 8 | }, 9 | 10 | module: { 11 | loaders: [ 12 | // NOTE: excluding esri-loader when npm linked 13 | { test: /\.js$/, exclude: /(node_modules|esri-loader)/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } 14 | ] 15 | } 16 | } 17 | --------------------------------------------------------------------------------