From 9d06809c9c38faeffc8022c840a258cdd061f52e Mon Sep 17 00:00:00 2001 From: Bojan Zivkovic Date: Tue, 1 Aug 2017 23:40:07 -0400 Subject: [PATCH] Added capability to choose an ESRI API version `create-esri-react-app app_name -v 3` ESRI API v4 is now default --- build/index.js | 60 +++++++++------ build/resources/{App.js => App3.js} | 27 +++---- build/resources/App4.js | 51 ++++++++++++ build/resources/index-api-3.html | 66 ++++++++-------- build/resources/index-api-4.html | 41 ++++++++++ package.json | 3 +- src/index.js | 115 ++++++++++++++++------------ yarn.lock | 2 +- 8 files changed, 248 insertions(+), 117 deletions(-) rename build/resources/{App.js => App3.js} (63%) create mode 100644 build/resources/App4.js create mode 100644 build/resources/index-api-4.html diff --git a/build/index.js b/build/index.js index bdd9040..72c7cc4 100644 --- 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 b/build/resources/App3.js similarity index 63% rename from build/resources/App.js rename to build/resources/App3.js index 79e6feb..b29ea3a 100644 --- a/build/resources/App.js +++ b/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 {

Welcome to ESRI React App

-
+
); } diff --git a/build/resources/App4.js b/build/resources/App4.js new file mode 100644 index 0000000..e724a08 --- /dev/null +++ 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 ( +
+
+

Welcome to ESRI React App

+
+
+
+ ); + } +} + +export default App; \ No newline at end of file diff --git a/build/resources/index-api-3.html b/build/resources/index-api-3.html index 5bbdff3..7f3d23f 100644 --- a/build/resources/index-api-3.html +++ b/build/resources/index-api-3.html @@ -1,35 +1,41 @@ - - - - - - - - + + + + + + + + + + + Esri React App + + + +
+ - Esri React App - - -
- - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. +--> + diff --git a/build/resources/index-api-4.html b/build/resources/index-api-4.html new file mode 100644 index 0000000..158f1d2 --- /dev/null +++ b/build/resources/index-api-4.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + Esri React App + + + +
+ + + diff --git a/package.json b/package.json index fcc7c15..9b6709c 100644 --- 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" } } diff --git a/src/index.js b/src/index.js index a0352f1..bb1a0eb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,68 +1,63 @@ #!/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); -if (process.argv.length <= 2) { - console.log(`Run${redColor} create-esri-react-app app_name${resetColor}`); -} else { - /** - * Execute commands - */ - var exec = require('child_process').exec; +// Input app name from command line +var appName = program.args[0]; -// Create react App - console.log(`Creating a new ESRI React App in ${redColor}${currentWorkingDirectory}/${appName}${resetColor}.`); - 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(`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}`); - moveAppJS(bootstrapAppJs, appName); - moveAppHTML(bootstrapAppHtml, appName); - moveAppCSS(bootstrapAppCss, appName); - }); - }); +if(program.api === '3' ){ + bootstrapAppJs = bootstrapAppJs3; + bootstrapAppHtml = bootstrapAppHtml3; +} else { + bootstrapAppJs = bootstrapAppJs4; + bootstrapAppHtml = bootstrapAppHtml4; +} +if (process.argv.length <= 2) { + console.log('Run' + greenColor + ' create-esri-react-app app_name' + resetColor); +} else { - /* - * Move JS file + /** + * Move to App.js */ - function moveAppJS(bootstrapFile, appName) { + 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 */ }); source.on('error', function (err) { /* error */ }); - } + }; - /* - * Move CSS file + /** + * Move to App.css */ - function moveAppCSS(bootstrapFile, appName) { + var moveAppCSS = function moveAppCSS(bootstrapFile, appName) { var source = fs.createReadStream(bootstrapFile); - var dest = fs.createWriteStream(`./${appName}/src/App.css`); + var dest = fs.createWriteStream('./' + appName + '/src/App.css'); source.pipe(dest); source.on('end', function () { @@ -71,14 +66,14 @@ if (process.argv.length <= 2) { source.on('error', function (err) { /* error */ }); - } + }; - /* - * Move HTML file + /** + * Move index.html file */ - function moveAppHTML(bootstrapFile, appName) { + var moveAppHTML = function moveAppHTML(bootstrapFile, appName) { var source = fs.createReadStream(bootstrapFile); - var dest = fs.createWriteStream(`./${appName}/public/index.html`); + var dest = fs.createWriteStream('./' + appName + '/public/index.html'); source.pipe(dest); source.on('end', function () { @@ -87,5 +82,31 @@ if (process.argv.length <= 2) { source.on('error', function (err) { /* error */ }); - } + }; + + /** + * Execute CLI commands + */ + var exec = require('child_process').exec; + + // Create react App + 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 ' + 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(' ' + greenColor + 'cd' + resetColor + ' ' + appName); + console.log(' ' + greenColor + 'yarn start' + resetColor); + moveAppJS(bootstrapAppJs, appName); + moveAppHTML(bootstrapAppHtml, appName); + moveAppCSS(bootstrapAppCss, appName); + }); + }); } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9614e8c..356c432 100644 --- a/yarn.lock +++ b/yarn.lock @@ -797,7 +797,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" -commander@^2.8.1: +commander@^2.11.0, commander@^2.8.1: version "2.11.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"