issue

[suriyaJaay]

DataCamp Light examples available on port 3003. Error: ENOENT, stat 'C:\xxx\xxx\Desktop\cp\datacamp-light-master\example\undefined' at Error (native)

[EvertEt]

Could you verify that the example folder has all the files from the master branch? (Starting with example-)

[suriyaJaay]

yes it has. pls find the attachment . and also has've the following code in web.js

var examplePath = path.join(__dirname, '/example/'); var examples = fs.readdirSync(examplePath).filter(function (name) { return name.startsWith('example-') });

[EvertEt]

Did you run npm install ? (Followed the 'Building' Section of the README)

[suriyaJaay]

@EvertEt hi. did followed "building " section and installed once again . it shows like as bellow. also has changed this var DCL_URL = "https://cdn.datacamp.com/dcl/"; to var DCL_URL = "src/datacamp-light.js";

[EvertEt]

You should probably change it to http://localhost:3003/.

[suriyaJaay]

var port = process.env.PORT || 3003; app.listen(port, function () { console.log('DataCamp Light examples available on port ' + port + '.'); });

the port has already set to 3003. now just try to change it to 3001 . but what happens is shows only UI with loading . in chrome console it show same not found like below

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3001/src/datacamp-light.jsscript-22caf0b725.js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3001/src/datacamp-light.jsstyle-b5d7fbe3f1.css Failed to load resource: the server responded with a status of 404 (Not Found)

[EvertEt]

Sorry, I meant DCL_URL. You can see it's trying to load http://localhost:3001/src/datacamp-light.jsscript-22caf0b725.js but only needs to load http://localhost:3001/script-22caf0b725.js.

[suriyaJaay]

sorry man. remains same. just changed as you said. kindly give me solution. been working on this for 4 days.but cant find that issue

[EvertEt]

var DCL_URL = "http://localhost:3003/";

[suriyaJaay]

@EvertEt no use .. :(

web.js

`var compression = require('compression'); var express = require('express'); var path = require('path'); var fs = require('fs');

var app = express();

app.use(compression());

app.use(express.static(path.join(__dirname, 'dist')));

var examplePath = path.join(__dirname, '/example/'); var examples = fs.readdirSync(examplePath).filter(function (name) { return name.startsWith('example-'); });

app.get('/', function (req, res) { res.sendFile(examplePath + examples[Math.floor(Math.random() * examples.length)]); });

var port = process.env.PORT || 3003; app.listen(port, function () { console.log('DataCamp Light examples available on port ' + port + '.'); }); `

datacamp-light.js

`/ DataCamp Light Version {{version}} /

(function () { 'use strict';

var MIN_HEIGHT = 300; //var DCL_URL = "https://cdn.datacamp.com/dcl/"; var DCL_URL = "http://localhost:3003/";

//Logic for 'Powered By DataCamp' function checkPoweredBy() { function domainMatches(domain) { return location.hostname.match(domain) !== null }

function changeLink(url) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].getElementsByTagName('a')[0].href = url;
  }
}

function removePoweredBy() {
  while (elements[0]) {
    elements[0].parentNode.removeChild(elements[0]);
  }
}

var elements = document.getElementsByClassName('powered-by-datacamp');
if (domainMatches("r-bloggers.com")) {
  changeLink("https://www.datacamp.com?tap_a=5644-dce66f&tap_s=10907-287229");
} else if (domainMatches("datacamp.com")) {
  removePoweredBy();
}

}

//Initialises the DIV for the DCL exercise: Load HTML, sets height, etc function createContainer(exercise_DOM) { exercise_DOM.className += ' datacamp-exercise';

// Calculate height
var height;
if ("height" in exercise_DOM.dataset && exercise_DOM.dataset["height"] !== 'auto') {
  var user_height = Math.round(exercise_DOM.dataset["height"]);
  if (!isNaN(user_height)) {
    if (user_height >= MIN_HEIGHT) {
      exercise_DOM.style.height = user_height + "px";
      var style_attribute = "height:" + user_height + "px;";
      exercise_DOM.setAttribute("style", style_attribute);
    } else {
      console.log("The height attribute should be >= " + MIN_HEIGHT + ".");
    }
  } else {
    console.log("Invalid height attribute.");
  }
}

//Wrap encoded data for easier handling
if ("encoded" in exercise_DOM.dataset) {
  exercise_DOM.innerHTML = '<div class="encoded">' + exercise_DOM.innerHTML.trim() + '</div>';
}

//Load angular app HTML
exercise_DOM.innerHTML += '{{mainView}}';

//Powered By DataCamp
var htmlString = '{{poweredBy}}';
var div = document.createElement('div');
div.innerHTML = htmlString;
var element = div.firstChild;
exercise_DOM.parentNode.insertBefore(element, exercise_DOM.nextSibling);

}

function loadScriptAsync(file) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = file; script.charset = "utf-8";

insertTag('body', script);

}

function loadStyle(file) { var style = document.createElement("link"); style.type = 'text/css'; style.rel = 'stylesheet'; style.href = file;

insertTag('head', style);

}

function renderDCLightExercises() { var exercises = document.querySelectorAll("[data-datacamp-exercise]");

if (exercises.length === 0) {
  console.log("No DataCamp Light exercises found. Make sure the exercise has the 'data-datacamp-exercise' attribute.");
}

for (var i = 0; i < exercises.length; i++) {
  (function (index) {
    var exercise_DOM = exercises[index];

    if ((' ' + exercise_DOM.className + ' ').indexOf(' datacamp-exercise ') > -1) {
      // We use this check to see if the exercise is already replaced.
      return;
    }

    // Create the DCL angular app div
    createContainer(exercise_DOM);
  })(i);
}
checkPoweredBy();

}

function initDCLightExercises() { renderDCLightExercises(); loadScriptAsync(DCL_URL + '{{scriptLink}}'); }

function initAddedDCLightExercises() { renderDCLightExercises(); window.bootstrapDCLightExercises(); }

function insertAllStyles() { insertCSS();

var links = [
  DCL_URL + "{{styleLink}}",
  "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
];

for (var i = 0; i < links.length; i++) {
  loadStyle(links[i]);
}

}

function insertTag(parent, element) { document.getElementsByTagName(parent)[0].appendChild(element); }

function insertCSS() { var style = document.createElement('style'); style.type = 'text/css'; insertTag('head', style);

var css = '{{mainStyle}}';

if (style.styleSheet)
  style.styleSheet.cssText = css;
else
  style.innerHTML = css;

}

function isAlreadyExecuted() { return (typeof(window.initAddedDCLightExercises) === "function"); }

if (!isAlreadyExecuted()) { window.initAddedDCLightExercises = initAddedDCLightExercises; insertAllStyles(); if (document.readyState == "complete" || document.readyState == "loaded") { initDCLightExercises(); } else { document.addEventListener('DOMContentLoaded', initDCLightExercises); } } else { console.log('Warning: tried to load DataCamp Light multiple times.') } })();

`

[EvertEt]

Did you run gulp after changing the URL?

[suriyaJaay]

thanks @EvertEt now its working fine. have a doubt. why do we need to use Gulp instead of nodemon

[suriyaJaay]

Thanks for helping guys : ) @EvertEt : ) 👍 lemme close it .