I don't go by the title web developer. I'm just a GIS guy using Developer tools to develop stuff. I say this because if you read my prose, you will, no doubt, on countless occasions, find yourself exclaiming: "Dude, don't you know that?!" or "Man, every developer understands that!". A lot of times, I may not. 'Cause I'm just a GIS guy... if it talks like a developer and quacks like a developer, it can still just be a GIS guy who... you get the picture.
My goals at this point are ...
- To learn the API to build custom tools and widgets.
- Pick up enough React to build apps that are more than an html template with a mapdiv sandwiched in the middle.
Below are my steps for launching this educational effort. You can find all of this elsewhere. This is merely a collection of what's worked for me and a summary of what I have. I'm always glad to hear what's missing from my setup! And do let me know about anything I got wrong.
i. Installed Visual Studio Code
For my IDE I chooise Visual Studio Code, of course. Everyone seems to be doing so these days. You can get it here. It has a clean interface and seems endlessly extensible if you need more functionality that you get out of the box. Not nearly as overwhelming as some of the other IDE's I've looked at over the years. Comes with plugins (extensions) galore.
ii. Installed Git
Download load it here. This time I was going to get this right. I've never done much development as part of a team, so source control has too often been an afterthought, and at times I've paid dearly. Plus, using Git with Code is so easy and seamless. <F1> and then <g> gives you all the Git commands at your fingertips. Most of what I do is just stage, commit, undo, checkout... the basics.
Right now, I have Git installed locally but I have it on the to-do list to implement it for multiple users. -- As a good habit, I've started including configuration files (see below, e.g. package-lock.json, tsconfig) in my version control. These change a lot when working with node/npm.
iii. Installed node/npm
This helps you manage all your JS modules. There are plenty of places where you can read up on npm commands, such as
npm install <modulename>@latest -g
For example, here. When deciding what to install locally and what to install in your project, I found the suggestion helpful: if it's needed for the project to run, install locally; if you need it for your development environment, install globally. As for the arcgis types, they went in my project.
But I get the sense people are very flexible about this and install much more locally than they may need here.
iv. Installed Typescript
In Visual Studio terminal run
npm install -g typescript
To learn all about tsconfig, see here. An ESRI example is here. Getting the compilerOptions set right might be a bit of a learning curve and require trial and error. It was for me. Documentation is here.
v. Installed arcgis-js-api types
This is documented at length in places such as here or here. Once you've created a project folder, run "npm init --yes" to set up the project by creating a package.json file. All about package.json. Then you run:
npm install --save @types/arcgis-js-api
This installs the typescript types for JSAPI in your directory.
This gives you great intellisense and debugging help when compiling or linting.
vi. Installed Live Server
Installing this extension will synch VS Code with your browser either inside of Code or in the stand-alone browser. Every time you save your project, the browser refreshes the page.
Here is a good link that explains the use of live server with typescript compiler.
vii. Installed Eslint
Linters help you "analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs...." (wikipedia). Visual Studio Code may suggest that you install tslist or complain if you don't. But in fact, tslint got folded into eslint. (I know, I know...) So go ahead and run...
npm install eslint@latest -g
To execute, navigate to your app's directory and do:
eslint main.ts //or whatever your ts file is called
viii. "Runners" - Automatic Compile
If you don't want to constantly save you typescript files and then have to recompile the code. You can automate this. It used to be you had to configure a task runner. Now you just ad the following to your compiler options in tscnfig file:
and start "watching". You use <Ctrl><Shift><b> to start that...
Now as soon as you save your typescript file(s), the compilation runs, too.
Okay, that was Part 1. I'll do my best to continue with Part 2 shortly.