diff --git a/examples/datasource-http-backend/server/Dockerfile b/examples/datasource-http-backend/server/Dockerfile
index 7169b9d65..7207392bf 100644
--- a/examples/datasource-http-backend/server/Dockerfile
+++ b/examples/datasource-http-backend/server/Dockerfile
@@ -1,11 +1,11 @@
-FROM node:18
+FROM node:20
 
 WORKDIR /usr/src/app
 
 COPY . .
 
 ENV NODE_ENV production
-RUN npm install
+RUN npm ci
 
 EXPOSE 8080
 
diff --git a/examples/datasource-http-backend/server/index.js b/examples/datasource-http-backend/server/index.js
index dc959f4be..9d4ace9ef 100644
--- a/examples/datasource-http-backend/server/index.js
+++ b/examples/datasource-http-backend/server/index.js
@@ -2,10 +2,16 @@ const express = require('express');
 const app = express();
 const port = 10000;
 
+
+app.options('/metrics', (req, res) => {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Headers', '*');
+  res.send();
+});
 app.get('/metrics', (req, res) => {
   const pointsN = 1024;
   const dataPoints = [];
-  const multiplier = parseInt(req.query.multiplier) || 1;
+  const multiplier = parseInt(req.query.multiplier, 10) || 1;
 
   for (let i = 0; i < pointsN; i++) {
     const ts = new Date(Date.now() - i * 1000);
@@ -16,6 +22,7 @@ app.get('/metrics', (req, res) => {
   }
 
   res.setHeader('Content-Type', 'application/json');
+  res.setHeader('Access-Control-Allow-Origin', '*');
   res.send(JSON.stringify({ dataPoints }));
 });
 
diff --git a/examples/datasource-http-backend/src/types.ts b/examples/datasource-http-backend/src/types.ts
index 8c845f552..df3fa9aa3 100644
--- a/examples/datasource-http-backend/src/types.ts
+++ b/examples/datasource-http-backend/src/types.ts
@@ -1,4 +1,5 @@
-import { DataQuery, DataSourceJsonData } from '@grafana/data';
+import { DataSourceJsonData } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
 
 export interface MyQuery extends DataQuery {
   multiplier: number;
diff --git a/examples/datasource-http/src/DataSource.ts b/examples/datasource-http/src/DataSource.ts
index b9fb32d97..416cfd234 100644
--- a/examples/datasource-http/src/DataSource.ts
+++ b/examples/datasource-http/src/DataSource.ts
@@ -6,6 +6,7 @@ import {
   DataSourceApi,
   DataSourceInstanceSettings,
   FieldType,
+  createDataFrame,
 } from '@grafana/data';
 import { getBackendSrv, isFetchError } from '@grafana/runtime';
 import { DataSourceResponse, defaultQuery, MyDataSourceOptions, MyQuery } from './types';
@@ -35,14 +36,13 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
 
     // Return a constant for each query.
     const data = options.targets.map((target) => {
-      const df: DataFrame = {
-        length: 2,
+      const df: DataFrame = createDataFrame({        
         refId: target.refId,
         fields: [
           { name: 'Time', values: [from, to], type: FieldType.time, config: {} },
           { name: 'Value', values: [target.constant, target.constant], type: FieldType.number, config: {} },
         ],
-      };
+      });
       return df;
     });
 
diff --git a/examples/datasource-http/src/types.ts b/examples/datasource-http/src/types.ts
index a561fa7a1..01aec667c 100644
--- a/examples/datasource-http/src/types.ts
+++ b/examples/datasource-http/src/types.ts
@@ -1,4 +1,5 @@
-import { DataQuery, DataSourceJsonData } from '@grafana/data';
+import { DataSourceJsonData } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
 
 export interface MyQuery extends DataQuery {
   queryText?: string;