topic Esri Typescript for Production in ArcGIS JavaScript Maps SDK Questions

Esri Typescript for Production

RichardReinicke — Tue, 29 May 2018 15:03:03 GMT

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.

Re: Esri Typescript for Production

ReneRubalcava — Tue, 29 May 2018 16:48:08 GMT

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 for JavaScript

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.

Re: Esri Typescript for Production

RichardReinicke — Sat, 11 Dec 2021 12:48:36 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍