Hello Typescript developers,
I`ve developed a lot with Esri JavaScript both 3.x and 4.x and since developers are more and more encouraged to use TypeScript, I want to use it as well for an upcoming project.
So I`ve started to play around with
TypeScript - Setting up your development environment | ArcGIS API for JavaScript 4.7
which is very handy and easy to use for first tests.
But what I need for deployment of my app is a bundled app.js. Is there a best practice guide how I can package modular code with Esri Types for production? I cannot get this to work with the example above. In the end it misses esri modules for me and I think it has something to do with esri dojo loader.
A very simple description / build config for webpack or gulp would be absolutely amazing.
Solved! Go to Solution.
There's a few different resources.
We have a webpack-plugin - GitHub - Esri/arcgis-webpack-plugin: Webpack plugin for the ArcGIS API for JavaScript
There's also a CLI to help you scaffold an application and custom widgets - GitHub - Esri/arcgis-js-cli: CLI to build a template application and widgets using the ArcGIS API fo...
Here is a demo application in TypeScript using the webpack-plugin - jsapi-resources/4.x/webpack/demo at master · Esri/jsapi-resources · GitHub
I also put together a blog post and video on the webpack-plugin
Put ArcGIS JS API into your webpack - odoenet
Hope that helps.
There's a few different resources.
We have a webpack-plugin - GitHub - Esri/arcgis-webpack-plugin: Webpack plugin for the ArcGIS API for JavaScript
There's also a CLI to help you scaffold an application and custom widgets - GitHub - Esri/arcgis-js-cli: CLI to build a template application and widgets using the ArcGIS API fo...
Here is a demo application in TypeScript using the webpack-plugin - jsapi-resources/4.x/webpack/demo at master · Esri/jsapi-resources · GitHub
I also put together a blog post and video on the webpack-plugin
Put ArcGIS JS API into your webpack - odoenet
Hope that helps.
Hello Rene,
thank you for your explanations and links. The webpack plugin looks interesting, maybe I'll try this out in another project. For now I found another useful approach. I'm using gulp and gulp-ts-package to bundle the ts files into one js with amd modules. Then I just had to modify index.html a little bit.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7"></script>
</head>
<body>
<script src="./app.js"></script>
<script>require(["hwrm/main"]);</script>
</body>
</html>