how to display a map as vector data from a url

I am studying the workshop of OpenLayers as mentioned here in this link:

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

the code when run it should display a map as vector data according to the geojson file mentioned in the URL as shown in the code below.

the problem I am encountering now is, when I run the code, no map appears only the plus and minus buttons with dark background but the vector data does not appreciate.

to solve this issue, I attempted changing the formate of the file from geojson to be json as well as attempted to manipulate the path to the file as follows:

attempts:

I also adapted the code to be as follows:

url: './data/countries.geojson',
url: '/data/countries.geojson',
url: 'data/countries.geojson',

but non of them worked nor resulted in showing the map. please let me know how to render or display a map as vector data from a URL

main.js:

   import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Fill, Stroke, Style, Text} from 'ol/style';

var style = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.6)',
  }),
  stroke: new Stroke({
    color: '#319FD3',
    width: 1,
  }),
  text: new Text({
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: '#000',
    }),
    stroke: new Stroke({
      color: '#fff',
      width: 3,
    }),
  }),
});

var vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'data/countries.geojson',
    format: new GeoJSON(),
  }),
  style: function (feature) {
    style.getText().setText(feature.get('name'));
    return style;
  },
});

var map = new Map({
  layers: [vectorLayer],
  target: 'map-container',
  view: new View({
    center: [0, 0],
    zoom: 1,
  }),
});

index.html:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
        background-color: #04041b;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
    <script src="main.js"></script>
  </body>
</html>