Tooling for your ArcGIS JS Apps
In the past few weeks I've talked about testing for your ArcGIS API for JavaScript applications, and how you might structure your ArcGIS JS Apps. Most recently on my blog I talked about a new tool I've been working on to simplify all this work for you.
You can find the tool on github.
This tool is based on yeoman, which is a scaffolding tool for web apps. It's a node based command line tool that let's you quickly build an ArcGIS JS app, with testing and build tools included.
All the code is written in ES6/ES2015.
So what do you get with this tool? Glad you asked.
You get a generator that scaffolds your entire application structure for you.
You get testing built in with intern.
You get preconfigured easy to use Dojo build scripts.
Best of all, you get a simple development workflow.
What do I need?
You'll need at minimum:
The Dojo build uses the Google Closure compiler, so you'll also need Java, sorry. But you'll also need Java for functional tests with intern, which uses a local Selenium driver.
What do I do?
Once you have everything, you can install the generator with npm install -g generator-arcgis-js-app
Once you do that, create a folder that you want to use for your application. Run a terminal/command line inside the folder and use yo arcgis-js-app to use the generator to scaffold your application.
The initial process takes a little while to install all the dependencies and do an initial build.
Once this is done, you can npm start to start a local server on your machine and navigate to http://localhost:8282/dist to see the default application. You should also probably open another browser tab or window to view the tests page at http://localhost:8282/node_modules/intern/client.html?config=tests/intern .
The scaffold will automatically inject a script in the page that will automatically activate livereload if you have the extension installed in your browser. It's also set up so that any changes you make to your code in the src directory will get updated to the dist directory and reload your web app and test page. This makes it very easy for you to develop your application and see the results right away.
When you are ready to deploy your application you can run grunt release --force. This will run the Dojo build system on your app. You need to use --force for now because of a weird error in the build. It's not really broken, but something doesn't play nice, I'll be fixing this as soon as I can. This will take a while, so you go watch some cat videos or something.
The release script is set up to scan your CSS file and copy all resources into a release/resources folder and update the references in your CSS file and places it in the release/app.css file. The built JavaScript app is copied into the release/app.js file. The index.html file is copied over with the new references and stripped of the livereload script.
And that's it. You get 3 files and a folder of resources that you can easily deploy for your application.
You're welcome.
What are you talking about?
You can read more details about this generator on my blog and check out the github repo as updates are done and fixes are applied. If you run into problems, let me know. I'll talk about how you might tweak the application structure at a later time.
For more geodev tips and tricks, check out my blog.