Added capability to choose an ESRI API version

`create-esri-react-app app_name -v 3` ESRI API v4 is now default
gis-tools · Aug 2, 2017 · 9d06809 · 9d06809
1 parent 36fc61a
commit 9d06809
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 117 deletions.
diff --git a/build/index.js b/build/index.js
@@ -1,30 +1,47 @@
 #!/usr/bin/env node
+
 'use strict';
 
 var fs = require('fs');
 var path = require('path');
-var bootstrapAppJs = __dirname + '/resources/App.js';
-var bootstrapAppHtml = __dirname + '/resources/index-api-3.html';
+var program = require('commander');
+
+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 redColor = '\x1b[32m';
+var greenColor = '\x1b[32m';
 var resetColor = '\x1b[0m';
 var currentWorkingDirectory = path.resolve('./');
+var bootstrapAppJs;
+var bootstrapAppHtml;
 
-// Input from command line
-var appName = process.argv.slice(2);
+program.version('0.1.0').option('-a, --api [number]', 'Add API version', 4).parse(process.argv);
+
+// Input app name from command line
+var appName = program.args[0];
+
+if (program.api === '3') {
+  bootstrapAppJs = bootstrapAppJs3;
+  bootstrapAppHtml = bootstrapAppHtml3;
+} else {
+  bootstrapAppJs = bootstrapAppJs4;
+  bootstrapAppHtml = bootstrapAppHtml4;
+}
 
 if (process.argv.length <= 2) {
-  console.log('Run' + redColor + ' create-esri-react-app app_name' + resetColor);
+  console.log('Run' + greenColor + ' create-esri-react-app app_name' + resetColor);
 } else {
 
-  /*
-   * Move JS file
+  /**
+   *  Move to App.js
    */
   var moveAppJS = function moveAppJS(bootstrapFile, appName) {
     var source = fs.createReadStream(bootstrapFile);
-    var dest = fs.createWriteStream('./' + appName + '/src/App.js');
+    var destination = fs.createWriteStream('./' + appName + '/src/App.js');
 
-    source.pipe(dest);
+    source.pipe(destination);
     source.on('end', function () {
       /* copied */
     });
@@ -33,11 +50,9 @@ if (process.argv.length <= 2) {
     });
   };
 
-  /*
-   * Move CSS file
+  /**
+   *  Move to App.css
    */
-
-
   var moveAppCSS = function moveAppCSS(bootstrapFile, appName) {
     var source = fs.createReadStream(bootstrapFile);
     var dest = fs.createWriteStream('./' + appName + '/src/App.css');
@@ -51,11 +66,9 @@ if (process.argv.length <= 2) {
     });
   };
 
-  /*
-   * Move HTML file
+  /**
+   *  Move index.html file
    */
-
-
   var moveAppHTML = function moveAppHTML(bootstrapFile, appName) {
     var source = fs.createReadStream(bootstrapFile);
     var dest = fs.createWriteStream('./' + appName + '/public/index.html');
@@ -70,24 +83,25 @@ if (process.argv.length <= 2) {
   };
 
   /**
-   * Execute commands
+   * Execute CLI commands
    */
   var exec = require('child_process').exec;
 
   // Create react App
-  console.log('Creating a new ESRI React App in ' + redColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
+  console.log('Creating a new ESRI React App in ' + greenColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
+  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';
     exec(addModule, function (error, stdout, stderr) {
       console.log('');
-      console.log('Success! ESRI React App ' + redColor + appName + resetColor + ' is created at ' + redColor + currentWorkingDirectory + resetColor + ' ');
+      console.log('Success! ESRI React App ' + greenColor + appName + resetColor + ' is created at ' + greenColor + currentWorkingDirectory + resetColor + ' ');
       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('    ' + redColor + 'cd' + resetColor + ' ' + appName);
-      console.log('    ' + redColor + 'yarn start' + resetColor);
+      console.log('    ' + greenColor + 'cd' + resetColor + ' ' + appName);
+      console.log('    ' + greenColor + 'yarn start' + resetColor);
       moveAppJS(bootstrapAppJs, appName);
       moveAppHTML(bootstrapAppHtml, appName);
       moveAppCSS(bootstrapAppCss, appName);

diff --git a/build/resources/App.js → build/resources/App3.js b/build/resources/App.js → build/resources/App3.js
@@ -10,26 +10,23 @@ if (!esriLoader.isLoaded()) {
       createMap();
     }
   }, {
-    url: 'https://js.arcgis.com/3.21/'
+    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'
-        });
-        window.map = map;
-
-      });
+  esriLoader.dojoRequire([
+    'esri/map'
+  ], (Map) => {
+    let map = new Map('mapNode', {
+      center: [-100, 30],
+      zoom: 3,
+      basemap: 'gray-vector'
+    });
+    window.map = map;
+  });
 }
 
 class App extends Component {
@@ -39,7 +36,7 @@ class App extends Component {
           <div className="App-header">
             <h1>Welcome to ESRI React App</h1>
           </div>
-          <div id="mapNode" />
+          <div id="mapNode"/>
         </div>
     );
   }

diff --git a/build/resources/App4.js b/build/resources/App4.js
@@ -0,0 +1,51 @@
+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);
+    } else {
+      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
+    });
+  });
+}
+
+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>
+    );
+  }
+}
+
+export default App;
diff --git a/build/resources/index-api-3.html b/build/resources/index-api-3.html
@@ -1,35 +1,41 @@
-<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <meta name="author" content="Bojan Zivkovic">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
-    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
+<head>
+  <meta charset="utf-8">
+  <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/
+  -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+    Notice the use of %PUBLIC_URL% in the tags above.
+    It will be replaced with the URL of the `public` folder during the build.
+    Only files inside the `public` folder can be referenced from the HTML.
 
-    <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    work correctly both with client-side routing and a non-root public URL.
+    Learn how to configure a non-root public URL by running `npm run build`.
+  -->
+  <title>Esri React App</title>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Esri React App</title>
-  </head>
-  <body>
-  <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start`.
-      To create a production bundle, use `npm run build`.
-    -->
-  </body>
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
 </html>
diff --git a/build/resources/index-api-4.html b/build/resources/index-api-4.html
@@ -0,0 +1,41 @@
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <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/
+  -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+    Notice the use of %PUBLIC_URL% in the tags above.
+    It will be replaced with the URL of the `public` folder during the build.
+    Only files inside the `public` folder can be referenced from the HTML.
+
+    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    work correctly both with client-side routing and a non-root public URL.
+    Learn how to configure a non-root public URL by running `npm run build`.
+  -->
+  <title>Esri React App</title>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
+
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
+
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "ESRI",
     "React",
     "ReactJS",
-    "ESRI",
+    "esri-loader",
     "loader"
   ],
   "author": "Bojan Zivkovic",
@@ -36,6 +36,7 @@
   "dependencies": {
     "babel-cli": "^6.24.1",
     "babel-preset-latest": "^6.24.1",
+    "commander": "^2.11.0",
     "np": "^2.16.0"
   }
 }