From 0dbf7929100cc6d72bc9b180b85fa7dc46a2f97a Mon Sep 17 00:00:00 2001 From: Bojan Zivkovic Date: Fri, 8 Dec 2017 23:44:11 -0500 Subject: [PATCH 1/3] Optimizing index.html import --- build/index.js | 18 ++++----- build/resources/index-api-4.html | 40 ------------------- .../{index-api-3.html => index.html} | 0 package.json | 2 +- src/index.js | 18 ++++----- 5 files changed, 19 insertions(+), 59 deletions(-) delete mode 100644 build/resources/index-api-4.html rename build/resources/{index-api-3.html => index.html} (100%) diff --git a/build/index.js b/build/index.js index 0d9cd56..7e540d6 100644 --- a/build/index.js +++ b/build/index.js @@ -7,17 +7,19 @@ var fs = require('fs'); var path = require('path'); var program = require('commander'); +var colorGreen = '\x1b[32m'; +var colorReset = '\x1b[0m'; + var bootstrapAppJs3 = __dirname + '/resources/App3.js'; -var bootstrapAppJs4 = __dirname + '/resources/App4.js'; -var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html'; -var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html'; var bootstrapAppCss3 = __dirname + '/resources/App3.css'; + +var bootstrapAppJs4 = __dirname + '/resources/App4.js'; var bootstrapAppCss4 = __dirname + '/resources/App4.css'; -var colorGreen = '\x1b[32m'; -var colorReset = '\x1b[0m'; + +var bootstrapAppHtml = __dirname + '/resources/index.html'; + var currentWorkingDirectory = path.resolve('./'); var bootstrapAppJs; -var bootstrapAppHtml; var bootstrapAppCss; program.version('0.1.0').option('-a, --api [number]', 'Add API version ' + colorGreen + '-v 3' + colorReset + ' or ' + colorGreen + '-v 4' + colorReset + '. Default version of ESRI API is v4', 4).parse(process.argv); @@ -27,11 +29,9 @@ var appName = program.args[0]; if (program.api === '3') { bootstrapAppJs = bootstrapAppJs3; - bootstrapAppHtml = bootstrapAppHtml3; bootstrapAppCss = bootstrapAppCss3; } else { bootstrapAppJs = bootstrapAppJs4; - bootstrapAppHtml = bootstrapAppHtml4; bootstrapAppCss = bootstrapAppCss4; } @@ -96,7 +96,7 @@ if (process.argv.length <= 2) { console.log(' - ESRI api v%s', program.api); var createEsriApp = 'create-react-app ' + appName; exec(createEsriApp, function (error, stdout, stderr) { - var addModule = 'cd ' + appName + ' && npm install esri-loader'; + var addModule = 'cd ' + appName + ' && npm install esri-loader --save'; exec(addModule, function (error, stdout, stderr) { console.log(''); console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' '); diff --git a/build/resources/index-api-4.html b/build/resources/index-api-4.html deleted file mode 100644 index 4efcc34..0000000 --- a/build/resources/index-api-4.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - Esri React App - - - -
- - - diff --git a/build/resources/index-api-3.html b/build/resources/index.html similarity index 100% rename from build/resources/index-api-3.html rename to build/resources/index.html diff --git a/package.json b/package.json index 2b833a8..21bfdb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-esri-react-app", - "version": "0.2.1", + "version": "0.2.2", "description": "Creating ESRI applications with React included", "main": "./src/index.js", "bin": { diff --git a/src/index.js b/src/index.js index 9d8d453..022fc69 100644 --- a/src/index.js +++ b/src/index.js @@ -6,17 +6,19 @@ var fs = require('fs'); var path = require('path'); var program = require('commander'); +var colorGreen = '\x1b[32m'; +var colorReset = '\x1b[0m'; + var bootstrapAppJs3 = __dirname + '/resources/App3.js'; -var bootstrapAppJs4 = __dirname + '/resources/App4.js'; -var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html'; -var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html'; var bootstrapAppCss3 = __dirname + '/resources/App3.css'; + +var bootstrapAppJs4 = __dirname + '/resources/App4.js'; var bootstrapAppCss4 = __dirname + '/resources/App4.css'; -var colorGreen = '\x1b[32m'; -var colorReset = '\x1b[0m'; + +var bootstrapAppHtml = __dirname + '/resources/index.html'; + var currentWorkingDirectory = path.resolve('./'); var bootstrapAppJs; -var bootstrapAppHtml; var bootstrapAppCss; program @@ -29,11 +31,9 @@ var appName = program.args[0]; if (program.api === '3') { bootstrapAppJs = bootstrapAppJs3; - bootstrapAppHtml = bootstrapAppHtml3; bootstrapAppCss = bootstrapAppCss3; } else { bootstrapAppJs = bootstrapAppJs4; - bootstrapAppHtml = bootstrapAppHtml4; bootstrapAppCss = bootstrapAppCss4; } @@ -98,7 +98,7 @@ if (process.argv.length <= 2) { console.log(' - ESRI api v%s', program.api); var createEsriApp = 'create-react-app ' + appName; exec(createEsriApp, function (error, stdout, stderr) { - var addModule = 'cd ' + appName + ' && npm install esri-loader'; + var addModule = 'cd ' + appName + ' && npm install esri-loader --save'; exec(addModule, function (error, stdout, stderr) { console.log(''); console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' '); From de8250a23b6fc3c5970e161477268dc376261abd Mon Sep 17 00:00:00 2001 From: Bojan Zivkovic Date: Fri, 8 Dec 2017 23:45:03 -0500 Subject: [PATCH 2/3] Optimizing App.js for API v3 and v4 --- build/resources/App3.js | 61 +++++++++++++------------------- build/resources/App4.js | 77 +++++++++++++++++------------------------ package.json | 2 +- 3 files changed, 56 insertions(+), 84 deletions(-) diff --git a/build/resources/App3.js b/build/resources/App3.js index 6bd7756..2030ccf 100644 --- a/build/resources/App3.js +++ b/build/resources/App3.js @@ -1,46 +1,35 @@ import React, {Component} from 'react'; +import esriLoader from 'esri-loader'; import './App.css'; -import * as esriLoader from 'esri-loader'; -class App extends Component { +const options = { + url: `https://js.arcgis.com/3.22/` +}; + +export default class App extends Component { constructor() { super(); - if (!esriLoader.isLoaded()) { - esriLoader.bootstrap((err) => { - if (err) { - console.error(err); - } else { - this.createMap(); - } - }, { - url: 'https://js.arcgis.com/3.22/' // Here you can change API version - }); - } else { - this.createMap(); - } - - this.state = { - map: null - } - } - - createMap = () => { - esriLoader.dojoRequire([ + esriLoader.loadModules([ 'esri/map' - ], (Map) => { - let map = new Map('mapContainer', { - center: [-100, 30], - zoom: 3, - basemap: 'gray-vector' - }); - window.map = map; + ], options) + .then(([Map]) => { + let map = new Map('mapContainer', { + basemap: 'gray-vector', + center: [-100, 30], + zoom: 3 + }); - this.setState({ - map - }) - }); - }; + window.map = map; + + this.setState({ + map + }) + }) + .catch(err => { + console.error(err); + }); + } render() { return ( @@ -53,5 +42,3 @@ class App extends Component { ); } } - -export default App; \ No newline at end of file diff --git a/build/resources/App4.js b/build/resources/App4.js index 511b4e3..6754020 100644 --- a/build/resources/App4.js +++ b/build/resources/App4.js @@ -1,54 +1,41 @@ import React, {Component} from 'react'; -import * as esriLoader from 'esri-loader'; +import esriLoader from 'esri-loader'; import './App.css'; -class App extends Component { +const options = { + url: 'https://js.arcgis.com/4.5' +}; + +export default class App extends Component { constructor() { super(); - if (!esriLoader.isLoaded()) { - esriLoader.bootstrap((err) => { - if (err) { - console.error(err); - } else { - this.createMap(); - } - }, { - // url: 'https://js.arcgis.com/4.4/' // Here you can change API version - }); - } else { - this.createMap(); - } - - this.state = { - map: null, - view: null - } - } + esriLoader.loadModules([ + 'esri/Map', + 'esri/views/MapView' + ], options) + .then(([Map, MapView]) => { + let map = new Map({ + basemap: "gray-vector" + }); - createMap = () => { - esriLoader.dojoRequire([ - "esri/Map", - "esri/views/MapView" - ], (Map, MapView) => { - let map = new Map({ - basemap: "gray-vector" - }); - window.map = map; - let view = new MapView({ - map: map, - container: "mapContainer", - basemap: 'gray-vector', - center: [-100, 30], - zoom: 3 - }); + let view = new MapView({ + map: map, + container: "mapContainer", + basemap: 'gray-vector', + center: [-100, 30], + zoom: 5 + }); - this.setState({ - map, - view - }) - }); - }; + this.setState({ + map, + view + }) + }) + .catch(err => { + console.error(err); + }); + } render() { return ( @@ -56,10 +43,8 @@ class App extends Component {

Welcome to ESRI React App

-
+
); } } - -export default App; \ No newline at end of file diff --git a/package.json b/package.json index 21bfdb7..e466d5e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-esri-react-app", - "version": "0.2.2", + "version": "0.2.3", "description": "Creating ESRI applications with React included", "main": "./src/index.js", "bin": { From 018bb6a5735223efd84850a671474dbf0cee7c9d Mon Sep 17 00:00:00 2001 From: Bojan Zivkovic Date: Fri, 8 Dec 2017 23:45:37 -0500 Subject: [PATCH 3/3] Updating documentation --- README.md | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index be081cd..6a94ad3 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Goal of Create ESRI React App is to connect ESRI and React application with mini A prerequisite for this application is Create React App already installed in your development environment. If Create React App is not installed on your system run: ``` -npm install -g create-react-app +npm install create-react-app -g ``` @@ -50,7 +50,7 @@ You can specify version of ESRI ArcGIS JS api during creation process. If you do ``` $ create-esri-react-app esri_app_v4 - or - -$ create-esri-react-app esri_app_v3 -v 3 +$ create-esri-react-app esri_app_v3 -a 3 ``` ### Information's related to Create React App diff --git a/package.json b/package.json index e466d5e..91e31c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-esri-react-app", - "version": "0.2.3", + "version": "0.2.4", "description": "Creating ESRI applications with React included", "main": "./src/index.js", "bin": {