chore(examples/web): modernize the docker compose & collector setup f…

…or this example

Also add some more notes to README to show the steps to get some traces
and view them.

examples/web/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/web/README.md

@@ -9,14 +9,26 @@ This example shows how to use [@opentelemetry/sdk-trace-web][] with different in
 npm install
 ```
 
+## Start a collector and trace viewer
+
+Optionally, you can use the provided Docker Compose file to start an OpenTelemetry Collector and a Zipkin to view collected traces.
+You can skip this step if you have your own collector already setup.
+
+```sh
+npm run docker:start
+```
+
 ## Run the Application
 
 ```sh
 # from this directory
 npm start
 ```
 
-By default, the application will run on port `8090`.
+- Open the application at <http://localhost:8090>.
+- Click around in each of the example sub-paths to create some tracing data.
+- Open Zipkin at <http://127.0.0.1:9411/zipkin/> and search for some traces (click "Run Query").
+
 
 ## More information
 

examples/web/docker/collector-config.yaml

@@ -3,9 +3,10 @@ receivers:
     protocols:
       grpc:
       http:
-        cors_allowed_origins:
-          - http://*
-          - https://*
+        cors:
+          allowed_origins:
+            - http://*
+            - https://*
 
 exporters:
   zipkin:

examples/web/docker/docker-compose.yaml

@@ -1,8 +1,6 @@
-version: "3"
 services:
-  # Collector
   collector:
-    image: otel/opentelemetry-collector:0.38.0
+    image: otel/opentelemetry-collector:0.99.0
     command: ["--config=/conf/collector-config.yaml"]
     volumes:
       - ./collector-config.yaml:/conf/collector-config.yaml
@@ -13,7 +11,6 @@ services:
     depends_on:
       - zipkin-all-in-one
 
-  # Zipkin
   zipkin-all-in-one:
     image: openzipkin/zipkin:latest
     ports:

examples/web/package.json

@@ -5,8 +5,8 @@
   "description": "Example of using web plugins in browser",
   "main": "index.js",
   "scripts": {
-    "docker:start": "cd ./docker && docker-compose down && docker-compose up",
-    "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
+    "docker:start": "cd ./docker && docker compose down && docker compose up",
+    "docker:startd": "cd ./docker && docker compose down && docker compose up -d",
     "start": "webpack-dev-server --progress --color --port 8090 --config ./webpack.config.js --hot --host 0.0.0.0"
   },
   "repository": {