How to render or display a map from url

in the below code which i copy it from:

https://openlayers.org/workshop/en/vector/geojson.html

as shown below, it needs the url:

url: './data/countries.json'

when i run the code no map appears inly plus and minus sign for zooming in and out with a dark blue background please let me know how to find countries .json

code:

const map = new Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      })
    })
  ],
  view: new View({
    projection: 'EPSG:4326',
    center: [13.063561,52.391842],
    zoom: 2
  })
});

attempts:

i also adapted the code to be as follows:

const vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: './data/countries.geojson',
    format: new GeoJSON(),
    defaultProjection :'EPSG:4326', projection: 'EPSG:3857'
  })
})

const map = new Map({
  target: 'map-container',
  layers: [vectorLayer],
  view: new View({
    projection: 'EPSG:4326',
    center: [0,0],
    zoom: 2
  })
});
sync(map)

also tried

countries.json
         .geojson 
         .geo.json
         

but nothing gets displayed

from How to render or display a map from url