coordinate system - Vector Tiles in Openlayers 3

I am struggling to understand how to render vector tiles in Openlayers 3. this is probably due to me not understanding Z/X/Y tiles.

I have created an mbtile source and am serving it using tileserver-gl-light from a geojson data source using the EPSG:4326 projection.

tileserver-gl-light tiles.mbtiles

Works fine when I view them at (tileserver-gl-client):-

https://server:8080

And I get a tile downloaded with:-

http://server:8080/data/tiles/0/0/0.pbf

How can I now display this layer in openlayers? I have looked at the example here but there is no mention of projection. I tried the following code

var map = new ol.Map({
    layers: [
      new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
            url: 'http://SERVER:8080/data/tiles/{z}/{x}/{y}.pbf'
        })
      })

    ],
    target: 'map',
    view: new ol.View({
      center: [125,83],
      zoom: 8
    })
  });

But have no idea how to centre it to the area I want which is -4.2376,52.0528 Zoom level 8 in EPSG:4326

When I zoom or pan I get errors like:-

GET http://SERVER:8080/data/sn_all/8/128/123.pbf 404 (Not Found)
GET http://80.229.34.247:8080/data/sn_all/8/129/123.pbf 404 (Not Found)

Which makes me think my projection is not right?

Answer

A complete example of using vector tiles hosted by TileServerGL (from MBTiles) in OpenLayers viewer is prepared here:

https://openmaptiles.org/docs/website/openlayers3/

Technically, the default projection of the tiles inside the MBTiles is Mercator EPSG:3857.

For demo of different viewers of OpenMapTiles see https://openmaptiles.org/viewers/