Converting traditional js include to require JS - requirejs

I want to convert below html code to requireJS. In this code, I am trying to use JQuery Querybuilder component, however I am getting issues because some of js files are older than requireJS
<!DOCTYPE html>
<html>
<head>
<title>jQuery QueryBuilder</title>
<script src="scripts/dot/doT.js"></script>
<script src="js/libs/jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script src="scripts/jquery-extendext.js" type="text/javascript"></script>
<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/query-builder.js" type="text/javascript"></script>
</head>
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
</html>


I was able to figure this out, issue was mainly with 'dot/doT' call in query-builder.js file
Below is the code that works for me:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/require/require.js" type="text/javascript"></script>
<script src="require_config.js" type="text/javascript"></script>
</head>
<body>
<div id="elmId">TODO write content</div>
<div id="builder">TODO write content</div>
</body>
<script>
require(['dot/doT','jquery','jquery-extendext','bootstrap','query-builder'], function (dot,$) {
console.log("loaded jquery!!!",$("#elmId"));
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
});
</script>
</html>
require_config.js file contains below code:
requirejs.config({
paths: {
jquery: 'js/libs/jquery/jquery-3.4.1.min',
dot:'scripts/dot',
'jquery-extendext': 'scripts/jquery-extendext',
bootstrap:'scripts/bootstrap.min',
'query-builder': 'scripts/query-builder.min'
},
shim: {
jquery: {
exports: ['jQuery', '$']
},
//https://requirejs.org/docs/api.html#config
bootstrap : { "deps" :['jquery'] }
}
});
Hope this helps someone in future.

Related

Chrome Extension: Inject content_scripts into blob URL

Problem Setup
This example html:
<html>
<head>
<script>
let blob = new Blob(["<html>Blob content!</html>"], {type: 'text/html'});
let blobUrl= URL.createObjectURL(blob);
window.location.href = blobUrl;
</script>
</head>
<body>
Initial Page
</body>
</html>
Produces a new html page with the content: <html>Blob content!</html>.
The page URL is: blob:null/c608e557-cacb-4bec-bce2-1f68c6315415
I have a chrome extension with the manifest.json looking something like this:
"content_scripts": [{
"matches": ["<all_urls>"],
"match_origin_as_fallback": true,
"run_at": "document_idle",
"js": ["getPage.js"],
"all_frames": true
}]
Question
Why does the content_script getPage.js not get injected into the blob URL?

express handlebars template wont render partial

this problem has got me almost depressed..
not so long ago this whole app worked but recently (probably more than 3 months, perhaps 6) one of my routes refuses to render any handlebars template I pass it, including ones that are rendering successfully via other routes.
this is the offending route:
app.get('/ListContentItems', function (req, res, next) {
try{
getAuthToken().then(authToken =>{
axios({
method:"get",
// url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page="+req.params.page+"&size="+req.params.size,
url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page=0&size=2",
headers:{
"Authorization": "Bearer " + authToken
}
})
.then(response => {
var contentGraph = response.data;
var stringContent = JSON.stringify(response.data,null,'\t');
console.log(stringContent);
res.render("list-content-items",{
static_path:'/static',
theme:process.env.THEME || 'flatly',
pageTitle : "List Content Items",
pageDescription : "List Content Items",
reqParams : req.query,
contentGraph : contentGraph._embedded,
stringContent : stringContent
})
// res.render('list-content-items',{static_path:'/static','pageTitle':'List Content Items - Success','contentGraph': contentGraph._embedded, 'stringContent' : stringContent, 'reqParams': req.query});
})
.catch(error => {
console.log(error);
res.render('list-content-items',{'pageTitle':'List Content Items - Fail','reqParams': req.query, 'error':error});
});
})
.catch(error => {
console.log(error);
next(error);
})
}
catch (e) {
next(e)
}
/* res.render('list-content-items',{title:"List Content Items",error:"figure out how to authorize so that i can list the content items and create links.."}) */
})
this is the template:
{{> header }}
{{#each contentGraph }}
{{#each this}}
{{log this}}
{{this.id}}
{{#each this}}
{{#if (eq this._meta.schema 'http://www.coops.net/draping-config')}}
{{this.label}}<br />
{{else if (eq this._meta.schema 'http://c1-qa.adis.ws/c/cmslabs/content-stack')}}
{{this.label}}<br />
{{else}}
{{this.label}}<br />
{{/if}}
{{/each}}
{{/each}}
</div>
{{/each}}
{{> footer }}
this is the log output:
{ id: '3fae61b6-56ef-4c31-9c53-40f45131b435',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'Image Block 2',
schema: 'http://c1-qa.adis.ws/c/cmslabs/image-block' },
image:
{ _meta: [Object],
id: 'b7a1bced-e921-42ab-baef-b5aa43cd3701',
name: 'Fashion_Womens_Collection_SSS',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
editorial:
{ callToAction: [Object],
useParentAsCtaHotspot: false,
title: 'This coat is far too big',
text: 'but it\'s trendy',
overlayAlignment: 'Top Left',
overlayTheme: 'Darken',
alignCopyText: 'center' },
aspectRatio: { w: 4, h: 3 } },
version: 1,
label: 'Image Block 2',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2020-08-11T13:45:50.420Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2020-08-12T19:39:12.261Z',
lastPublishedVersion: 1,
lastPublishedDate: '2020-08-12T19:39:11.301Z',
deliveryId: '3fae61b6-56ef-4c31-9c53-40f45131b435',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=3fae61b6-56ef-4c31-9c53-40f45131b435',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=3fae61b6-56ef-4c31-9c53-40f45131b435{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=3fae61b6-56ef-4c31-9c53-40f45131b435' } } }
{ id: '66436a40-eea3-414e-9036-98580220787a',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'draping---sofa',
schema: 'http://c1-qa.adis.ws/c/cmslabs/draping-demo' },
SVG:
{ _meta: [Object],
id: '1200180d-7332-4228-8e88-1919906e44b8',
name: 'test_sofa',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
Textures: [ [Object], [Object], [Object] ] },
version: 1,
label: 'Draping - Sofa',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2019-03-12T23:20:41.925Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2019-03-12T23:20:41.925Z',
deliveryId: '66436a40-eea3-414e-9036-98580220787a',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=66436a40-eea3-414e-9036-98580220787a',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=66436a40-eea3-414e-9036-98580220787a{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=66436a40-eea3-414e-9036-98580220787a' } } }
this is visually what appears:
and the HTML output:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Amplience Demo: List Content Items">
<meta name="author" content="">
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">
<title>Amplience Demo - List Content Items </title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css"/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/?id=&store=">
<span class="d-lg-block d-none">Amplience - Content Simplified</span>
<span class="d-block d-lg-none">Amplience</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link" href="/showJSON?id=&store=">ShowJSON</a></li>
<li class="nav-item"><a class="nav-link" href="/carousel?id=&store=">Carousel</a></li>
<li class="nav-item"><a class="nav-link" href="/panels?id=&store=">Panels</a></li>
<li class="nav-item"><a class="nav-link" href="/ListContentItems/5/1">List Content Items</a></li>
</ul>
</div>
</nav>
<main role="main" class="container">
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body>
</html>
I think it's quite clear that the body of the template simply isn't rendering.
but other more complex routes render as expected..
let me know if you need further information.

After starting a brand new project and pulling this one route in I had a moment of enlightenment - here's the answer for anybody who hits a similar problem:
I was using the express-handlebars package which defaulted to main.hbs as it's layout.
I'd written a bunch of conditionals in there (bit of a noob error on reflection) which was preventing the body ever rendering - must've been a bit of a fluke that only this route was broken.
Lesson: don't put any complicated logic in your main.hbs file if your using express-handlebars.

How to generate an SVG of Highcharts graphics with images on the bars and show on the canvas tag?

I need get chart with images in bars (i using pattern and script Highstocks) and put in a tag Canvas, but when i send SVG to tag Canvas the images in bar disappear. Do you can help me? Follow bellow that i did until here:
http://jsfiddle.net/Posture/7aLzdej4/
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill in Canvas</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Highcharts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<!-- Canvg -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body>
<br>
<div style="background-color: #ffffff;">
<div id="graf-teste" style="min-width: 80%; height: 200px; max-width: 100%; margin: 0 auto"></div>
<button id='btn_capt'>Capturar Gráfico</button>
</div>
<script type="text/javascript">
var redrawEnabled = true,
ctr = 0;
ctr1 = 1;
Highcharts.chart('graf-teste', {
// $('#graf-teste').highcharts({
chart: {
events: {
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var chart = this,
renderer = chart.renderer;
chart.series[0].points.forEach(function(p) {
console.log(p);
var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
id = 'pattern-' + p.index + '-' + ctr;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://i.pinimg.com/originals/6c/38/66/6c38667a1977cbcac6f94b92decd7927.png', 0, 0, 1, widthRatio).attr({
}).add(pattern);
p.update({
color: 'url(#' + id + ')'
}, false);
});
chart.series[1].points.forEach(function(q) {
console.log(q);
var widthRatio = q.shapeArgs.width / q.shapeArgs.height,
id = 'pattern-' + q.index + '-' + ctr1;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://s2.glbimg.com/GFHUa5KeFPDTmwtAVjWl1A7oqTQ=/695x0/s.glbimg.com/po/tt2/f/original/2014/07/14/imagem0.jpg', 0, 0, 1, widthRatio).attr({
}).add(pattern);
q.update({
color: 'url(#' + id + ')'
}, false);
});
ctr++;
ctr1++;
chart.redraw();
redrawEnabled = true;
}
}
}
},
title: {
text: 'Gráfico Teste'
},
exporting: {
enabled: false
},
xAxis: {
categories: ['']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'percent',
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
//point.percentage:.1f
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'bar',
name: 'Serie 1',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [250]
}, {
type: 'bar',
name: 'Serie 2',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [100]
}],
credits: {
enabled: false
}
});
</script>
<canvas id="graf"></canvas>
<script type="text/javascript">
$("#btn_capt").on('click',function(e){
var svg = $('#graf-teste').highcharts().getSVG();
canvg(document.getElementById('graf'),svg);
var img = graf.toDataURL("image/png"); //img is data:image/png;base64
img = img.replace('data:image/png;base64,', '');
});
</script>
</body>
</html>
Comments: It's totally necessary use highstock, because of others charts in page.

Take a look at this demo: http://jsfiddle.net/BlackLabel/u20c8vhL/
I created a new div for the chart and render the SVG there by this method:
$("#btn_capt").on('click', function(e) {
var svg = chart.getSVG();
$('#containerContainer').prepend(svg);
});

Getting Started with React-Hot-Loader

I am trying to use React Hot Loader in React. I installed react hot loader by running "npm install --save-dev react-hot-loader". I tried to follow the http://gaearon.github.io/react-hot-loader/getstarted/ but couldn't understand. I am attaching my webpack.config.js and package.json. I made changes as listed in document. But I am not able to see the changes I make in components on the fly. What is wrong?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./dev/js/index.js' // Your appʼs entry point
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot','babel'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
scripts from package.json
"scripts": {
"dev": "webpack",
"start": "webpack-dev-server"
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack</title>
</head>
<body>
<div id="root"></div>
<script src="js/bundle.min.js"></script>
</body>
</html>

Ok, now you need to add the hot loading script to your html file, right before bundle like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack</title>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:3000/webpack-dev-server.js"></script>
<script src="js/bundle.min.js"></script>
</body>
</html>
It's under localhost:3000 because I see that in your webpack config. I usually just leave it under :8080, but I think it needs to be like this based on your config.

Telerik Kendo UI with SharePoint List Items

I am trying to create a grid with the help of Telerik Kendo UI which will show SharePoint data. To fetch data I am using SharePoint oData service.
I got an example of similer functionality here http://demos.telerik.com/kendo-ui/grid/remote-data-binding
And tried below code
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://server/_api/Web/Lists(guid'guid of list')/Items"
},
schema: {
model: {
fields: {
Title: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"Title"
}
]
});
});
</script>
</div>
</body>
</html>
And got below error
Refused to execute script from
'http://server/_api/Web/Lists(guid'listguid50387715207_1459178447636&%24inlinecount=allpages&%24format=json&%24top=20'
because its MIME type ('application/atom+xml') is not executable, and
strict MIME type checking is enabled.

You might want to change the transport-property to
transport: {
read: {
url: "http://server/_api/Web/Lists(guid'guid of list')/Items",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose")
}
}
}
in order to force sharepoint to return json-data instead of atom+xml (which is the default if you ommit the accept-header).

Resources