Develop

build/index.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
+
 'use strict';
 
 var fs = require('fs');
@@ -10,30 +11,33 @@ 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 bootstrapAppCss = __dirname + '/resources/App.css';
-var greenColor = '\x1b[32m';
-var resetColor = '\x1b[0m';
+var bootstrapAppCss3 = __dirname + '/resources/App3.css';
+var bootstrapAppCss4 = __dirname + '/resources/App4.css';
+var colorGreen = '\x1b[32m';
+var colorReset = '\x1b[0m';
 var currentWorkingDirectory = path.resolve('./');
 var bootstrapAppJs;
 var bootstrapAppHtml;
+var bootstrapAppCss;
 
-program.version('0.1.0').option('-a, --api [number]', 'Add API version', 4).parse(process.argv);
+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);
 
 // Input app name from command line
 var appName = program.args[0];
 
 if (program.api === '3') {
   bootstrapAppJs = bootstrapAppJs3;
   bootstrapAppHtml = bootstrapAppHtml3;
+  bootstrapAppCss = bootstrapAppCss3;
 } else {
   bootstrapAppJs = bootstrapAppJs4;
   bootstrapAppHtml = bootstrapAppHtml4;
+  bootstrapAppCss = bootstrapAppCss4;
 }
 
 if (process.argv.length <= 2) {
-  console.log('Run' + greenColor + ' create-esri-react-app app_name' + resetColor);
+  console.log('Run' + colorGreen + ' create-esri-react-app app_name' + colorReset);
 } else {
-
   /**
    *  Move to App.js
    */
@@ -88,20 +92,20 @@ if (process.argv.length <= 2) {
   var exec = require('child_process').exec;
 
   // Create react App
-  console.log('Creating a new ESRI React App in ' + greenColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
+  console.log('Creating a new ESRI React App in ' + colorGreen + currentWorkingDirectory + '/' + appName + colorReset + '.');
   console.log('    - ESRI api v%s', program.api);
   var createEsriApp = 'create-react-app ' + appName;
   exec(createEsriApp, function (error, stdout, stderr) {
-    var addModule = 'cd ' + appName + ' && yarn add esri-loader';
+    var addModule = 'cd ' + appName + ' && npm install esri-loader';
     exec(addModule, function (error, stdout, stderr) {
       console.log('');
-      console.log('Success! ESRI React App ' + greenColor + appName + resetColor + ' is created at ' + greenColor + currentWorkingDirectory + resetColor + ' ');
+      console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' ');
       console.log('Inside that directory, you can run several commands:');
       console.log('');
       console.log('We suggest that you begin by typing:');
       console.log('');
-      console.log('    ' + greenColor + 'cd' + resetColor + ' ' + appName);
-      console.log('    ' + greenColor + 'yarn start' + resetColor);
+      console.log('    ' + colorGreen + 'cd' + colorReset + ' ' + appName);
+      console.log('    ' + colorGreen + 'npm start' + colorReset + ' or ' + colorGreen + 'yarn start' + colorReset);
       moveAppJS(bootstrapAppJs, appName);
       moveAppHTML(bootstrapAppHtml, appName);
       moveAppCSS(bootstrapAppCss, appName);

build/resources/App3.css

@@ -0,0 +1,28 @@
+@import "https://js.arcgis.com/3.22/esri/css/esri.css";
+
+html, body, #root, .App {
+  height: 100%;
+  width: 100%;
+  background-color: #cfcfd4;
+}
+
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #222;
+  height: 80px;
+  padding: 20px;
+  color: white;
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 0.25em;
+}
+
+/* Map view */
+#mapContainer {
+  height: calc(100% - 80px);
+}

build/resources/App3.js

@@ -2,41 +2,53 @@ import React, {Component} from 'react';
 import './App.css';
 import * as esriLoader from 'esri-loader';
 
-if (!esriLoader.isLoaded()) {
-  esriLoader.bootstrap((err) => {
-    if (err) {
-      console.error(err);
+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 {
-      createMap();
+      this.createMap();
     }
-  }, {
-    url: 'https://js.arcgis.com/3.21/' // Here you can change API version
-  });
-} else {
-  createMap();
-}
 
-function createMap() {
-  esriLoader.dojoRequire([
-    'esri/map'
-  ], (Map) => {
-    let map = new Map('mapNode', {
-      center: [-100, 30],
-      zoom: 3,
-      basemap: 'gray-vector'
+    this.state = {
+      map: null
+    }
+  }
+
+  createMap = () => {
+    esriLoader.dojoRequire([
+      'esri/map'
+    ], (Map) => {
+      let map = new Map('mapContainer', {
+        center: [-100, 30],
+        zoom: 3,
+        basemap: 'gray-vector'
+      });
+      window.map = map;
+
+      this.setState({
+        map
+      })
     });
-    window.map = map;
-  });
-}
+  };
 
-class App extends Component {
   render() {
     return (
         <div className="App">
           <div className="App-header">
             <h1>Welcome to ESRI React App</h1>
           </div>
-          <div id="mapNode"/>
+          <div id="mapContainer"/>
         </div>
     );
   }

build/resources/App.css → build/resources/App4.css

@@ -1,6 +1,9 @@
+@import "https://js.arcgis.com/4.5/esri/css/main.css";
+
 html, body, #root, .App {
   height: 100%;
-  font: menu;
+  width: 100%;
+  background-color: #cfcfd4;
 }
 
 .App {
@@ -20,6 +23,6 @@ h1 {
 }
 
 /* Map view */
-#mapNode {
+#mapContainer {
   height: calc(100% - 80px);
 }

build/resources/App4.js

@@ -1,48 +1,62 @@
 import React, {Component} from 'react';
-import './App.css';
 import * as esriLoader from 'esri-loader';
+import './App.css';
+
+class App extends Component {
+  constructor() {
+    super();
 
-if (!esriLoader.isLoaded()) {
-  esriLoader.bootstrap((err) => {
-    if (err) {
-      console.error(err);
+    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 {
-      createMap();
+      this.createMap();
     }
-  }, {
-    // url: 'https://js.arcgis.com/4.4/' // Here you can change API version
-  });
-} else {
-  createMap();
-}
 
-function createMap() {
-  esriLoader.dojoRequire([
-    "esri/Map",
-    "esri/views/MapView"
-  ], function(Map, MapView){
-    let map = new Map({
-      basemap: "gray-vector"
-    });
-    window.map = map;
-    let view = new MapView({
-      map: map,
-      container: "mapNode",
-      basemap: 'gray-vector',
-      center: [-100, 30],
-      zoom: 3
+    this.state = {
+      map: null,
+      view: null
+    }
+  }
+
+  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
+      });
+
+      this.setState({
+        map,
+        view
+      })
     });
-  });
-}
+  };
 
-class App extends Component {
   render() {
     return (
         <div className="App">
           <div className="App-header">
             <h1>Welcome to ESRI React App</h1>
           </div>
-          <div id="mapNode" />
+          <div id="mapContainer" />
         </div>
     );
   }

build/resources/index-api-3.html

@@ -4,7 +4,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <meta name="author" content="Bojan Zivkovic">
-  <link rel="preload stylesheet" href="https://js.arcgis.com/3.21/esri/css/main.css">
   <!--
     manifest.json provides metadata used when your web app is added to the
     homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

build/resources/index-api-4.html

@@ -4,7 +4,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <meta name="author" content="Bojan Zivkovic">
-  <link rel="preload stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
   <!--
     manifest.json provides metadata used when your web app is added to the
     homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "build": "babel src -d build",
     "prepublish": "npm run build",
+    "publish": "npm publish",
     "release": "np"
   },
   "babel": {
@@ -21,12 +22,16 @@
     "url": "git+https://github.com/gis-tools/create-esri-react-app.git"
   },
   "keywords": [
+    "ArcGIS",
+    "ArcGIS JS",
+    "ArcGIS loader",
+    "dojo",
     "ESRI",
+    "loader",
+    "esri-loader",
     "React",
     "ReactJS",
-    "esri-loader",
-    "loader",
-    "dojo"
+    "React JS"
   ],
   "author": "Bojan Zivkovic",
   "license": "MIT",