topic Re: How to add a proxy to the arcgis-js-api Webpack Typescript demo app? in ArcGIS JavaScript Maps SDK Questions

How to add a proxy to the arcgis-js-api Webpack Typescript demo app?

JeffKapellas — Sat, 11 Dec 2021 12:49:40 GMT

I have created an application based upon the ArcGIS Javascript API 4.9 Webpack demo application (https://github.com/Esri/jsapi-resources/tree/master/4.x/webpack ). The application is written in Typescript and is structured in the same manner as the demo. It currently works fine with unsecured services. However, I wish to add a proxy so that the application will use secured services, but so far have been unable to get urlUtils.addProxyRule() to work in the Typescript environment.

I've tried adding the call to the demo/src/data/app.ts file:

import esri = __esri;
import urlUtils from "esri/core/urlUtils";
import MapImageLayer from "esri/layers/MapImageLayer";
...
urlUtils.addProxyRule({
    urlPrefix: "my.server.com",
    proxyUrl: "https://path.to.proxy/proxy.ashx"
});

export const myLayer = new MapImageLayer({
    url: "https://my.server.com/arcgis/rest/services/myService/MapServer",
    sublayers: [{id: 0}],
    opacity: 1.0
});

I've also tried adding the call to the demo/src/widgets/App.tsx file:

import esri = __esri;
import urlUtils from "esri/core/urlUtils";
...
private onAfterCreate(element: HTMLDivElement){
   urlUtils.addProxyRule({
       urlPrefix: "my.server.com",
       proxyUrl: "https://path.to.proxy/proxy.ashx"
   });
   import("./../data/app).then(...)
}

In both instances, the application fails on the urlUtils.addProxyRule call:
Uncaught TypeError: Cannot read property 'addProxyRule' of undefined

I have coded a number of applications in the JSAPI 3.x and 4.x, but this is my first using Typescript and Webpack, so I'm at a bit of a loss as to the error. Any assistance or guidance would be greatly appreciated. Thanks!

Re: How to add a proxy to the arcgis-js-api Webpack Typescript demo app?

JeffKapellas — Tue, 11 Dec 2018 01:30:12 GMT

So after a bit of trial-and-error, I was able to resolve the issue by changing the import statement from

import urlUtils from "esri/core/urlUtils";

import urlUtils = require("esri/core/urlUtils");

That same change also fixed a similar issue I was experiencing with promiseUtils. It's not clear to me when you use one syntax of the other, but the fix works.

Re: How to add a proxy to the arcgis-js-api Webpack Typescript demo app?

ZdeněkJankovský — Wed, 07 Oct 2020 07:49:22 GMT

Thanks for this solution it helps me with similar esri/core/promiseUtils.

After some testing, I figured out that ES6 notation of this kind work as well:

import { create } from "esri/core/promiseUtils";‍‍

or better

import { create as promiseCreate} from "esri/core/promiseUtils";‍‍‍

Zdenek J.

Re: How to add a proxy to the arcgis-js-api Webpack Typescript demo app?

HenryKo2 — Tue, 20 Apr 2021 02:09:19 GMT

We are using React and TypeScript, this works for us:

import * as urlUtils from '@arcgis/core/core/urlUtils';

urlUtils.addProxyRule({
...
});