Build apps with the @arcgis/cli
Rene Rubalcava | June 27, 2018
It's fairly easy to set up:
npm install -g @arcgis/cli
arcgis create awesome-app
it seems like just about every framework out there has a cli to use these days, starting with Ember which still has probably the most extensive cli tooling available, But plenty of others have popped up over the past couple of years, @angular/cli, create-react-app, @vue/cli and my recent favorite, @dojo/cli.
The @arcgis/cli is a little simpler than those solutions, as once you've scaffold your applciation, you don't need to keep using the cli, unless you want a little extra, I'll get to that in a second. The configuration for TypeScript, testing, and webpack are part of the output so you can update them to meet your needs. Now, this might remove some of the hand-holding and adherance you get with other CLIs, it also let's you shoot yourself in the foot if you choose to do so and break the configuration. That's just part of the game my friend!
I personally find myself a little frustrated at times when I want to modify some configuration with webpack or maybe css and I can't do it the way I want until I eject an application from the cli. But there's also comfort in knowing a cli will keep everything uniform and protect you in most cases. There are trade offs, but I can live with that.
So what exactly do you get out of the box? You get a ready to use and scalable application!
- Built with TypeScript
- Preconfigured with webpack and the @arcgis/webpack-plugin, check out my previous post for more info
- Develop with hot-module-reloading
- Deploy production builds with optimizations, Service Workers and other PWA configuration
- Unit testing with Intern
- Custom Widgets
You can see the output of a scaffoled application in this repo.
The cli doesn't stop there though. If you're interested in building custom widgets with the API, you can scaffold a widget using the
arcgis widget <widget-name> command.
This will output a simple custom widget and unit tests for the widget! You can see what the template widget looks like here.