Esri Typescript for Production

556
2
Jump to solution
05-29-2018 08:03 AM
RichardReinicke
Occasional Contributor

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. 

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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.

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

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.

View solution in original post

RichardReinicke
Occasional Contributor

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