We are doing pretty much exactly this using 4.12. We start with the style json, which comes from our server but could equally well be created on the client. It looks something like:
{
"version": 8,
"sources": {
"oursource": {
"type": "vector",
"url": "https://ourhost/oursource"
}
},
"sprite": "https://ourhost/sprite",
"glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
"layers": [
{ ...
}
]
We create our vector tile layer using this style and add it it to the map:
map.add(new VectorTileLayer({style: ourstyle}));
The source url (https://ourhost/oursource) needs to return a chunk of json that looks like an ArcGIS vector tile service. We serve up something like this:
{
"name": "OurName",
"capabilities": "TilesOnly",
"type": "indexedVector",
"tiles": [
"/{z}/{x}/{y}.pbf"
],
"fullExtent": {
"xmin": -20037507.067161845,
"ymin": -20037507.067161845,
"xmax": 20037507.067161845,
"ymax": 20037507.067161845
},
"minScale": 591657527.591555,
"maxScale": 70.5310735,
"tileInfo": {
"rows": 512,
"cols": 512,
"dpi": 96,
"format": "pbf",
"origin": {
"x": -20037508.342787,
"y": 20037508.342787
},
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
},
"lods": [
{
"level": 0,
"resolution": 78271.516964,
"scale": 295828763.79577729
},
{
"level": 1,
"resolution": 39135.75850391389,
"scale": 147914381.98071263
},
.......
{
"level": 20,
"resolution": 0.07464553627067128,
"scale": 282.1242972457275
}
]
}
}
I have omitted most of the lods but you can find them online. Possibly you could omit the tileinfo part and instead create a tileinfo using the TileInfo.create method (TileInfo | ArcGIS API for JavaScript 4.12) and then set the tileinfo property of the VectorTileLayer directly - I haven't tried this. Note that a 512x512 pixel tile is specified, which is the MapBox standard.
You now need to serve your actual (pbf) tiles using the url pattern specified. In this example, that would be https://ourhost/oursource/{z}/{x}/{y}.pbf.
You also need to serve sprite.png and sprite.json and their high-res variants, sprite@2x.png and sprite@2x.json