Community

Esri Typescript for Production

1055
2
Jump to solution
05-29-2018 08:03 AM
RichardReinicke
by
Occasional Contributor II
‎05-29-2018 08:03 AM

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
by
Frequent Contributor
‎05-29-2018 09:48 AM

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
by
Frequent Contributor
‎05-29-2018 09:48 AM

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.

RichardReinicke
by
Occasional Contributor II
‎05-30-2018 02:29 AM

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