<commit_before>{
  "name": "Basic Node and Express",
  "order": 2,
  "time": "5 hours",
  "helpRoom": "Help",
  "challenges": [
    {
      "id": "587d7fb0367417b2b2512bec",
        "title": "Introduction to the Basic Node and Express Challenges",
        "description": [
          [
            "",
            "",
            "Node.js is a JavaScript tool that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules--small, independent programs--that help facilitate this purpose. Some of the core modules include:<br><br><ul><li>HTTP: a module that acts as a server</li><li>File System: a module that reads and modifies files</li><li>Path: a module for working with directory and file paths</li><li>Assertion Testing: a module that checks code against prescribed constraints</li></ul><br>Express, while not included with Node.js, is another module often used with it. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. Routing directs users to the correct page based on their interaction with the application.<br><br>While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend.",
            ""
          ]
        ],
        "releasedOn": "",
        "challengeSeed": [],
        "tests": [],
        "type": "Waypoint",
        "challengeType": 7,
        "isRequired": false,
        "titleEs": "",
        "descriptionEs": [
          []
        ],
        "titleFr": "",
        "descriptionFr": [
          []
        ],
        "titleDe": "",
        "descriptionDe": [
          []
        ]
    },
    {
      "id": "587d7fb0367417b2b2512bed",
      "title": "Meet the Node console",
      "description": [
        "During the development process, is important to be able to check what’s going on in your code. Node is just a javascript environment. Like client side javascript, you can use the console to display useful debug information. On your local machine, you would see the console output in a terminal. On HyperDev you can open the logs in the lower part of the screen. You can toggle the log panel if you push the button ‘Logs’ (top-left, under the app name).",
        "To get started, just put the classic Hello World in the console. We recommend to keep the log panel open while working at these challenges. Reading the logs you can be aware of the nature of the errors that may occur."
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "<code>\"Hello World\"</code> should be in the console",
          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/hello-console').then(data => { assert.isTrue(data.passed, '\"Hello World\" is not in the server console'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "<KEY>",
      "title": "Start a working Express Server",
      "description": [
        "In the first two lines of the file myApp.js you can see how it’s easy to create an Express app object. This object has several methods, and we will learn many of them in these challenges. One fundamental method is app.listen(<port>). It tells your server to listen on a given port, putting it in running state. You can see it at the bottom of the file. It is inside comments because for testing reasons we need the app to be running in background. All the code that you may want to add goes between these two fundamental parts. HyperDev stores the port number in the environemet variable process.env.PORT. Its value is 3000.",
        "Let’s serve our first string ! In Express, routes takes the following structure: app.METHOD(PATH, HANDLER). METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched.",
        "Handlers take the form function(req, res) {...}, where req is the request object, and res is the response object. For example, the handler",
        "<code>function(req, res) {</code>",
        "<code> res.send('Response String');</code>",
        "<code>}</code>",
        "will serve the string 'Response String'.",
        "Use the app.get() method to serve the string Hello Express, to GET requests matching the / root path. Be sure that your code works by looking at the logs, then see the results in your browser, clicking the button ‘Show Live’ in the HyperDev UI."
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "Your app should serve the string 'Hello Express'",
          "testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.equal(data, 'Hello Express', 'Your app does not serve the text \"Hello Express\"'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "587d7fb0367417b2b2512bef",
      "title": "Serve an HTML file",
      "description": [
        "We can respond with a file using the method res.sendFile(<file>).",
        "You can put it inside the app.get('/', ...) route handler. Behind the scenes this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file-path. We recommend you to use the node global variable __dirname to calculate the path.",
        "e.g. absolutePath = __dirname + relativePath/file.ext .",
        "The file to send is /views/index.html. Try to ‘Show Live’ your app, you should see a big HTML heading (and a form that we will use later…), with no style applied.",
        "Note: You can edit the solution of the preceding challenge, or create a new one. If you create a new solution, keep in mind that Express evaluates the routes from top to bottom. It executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string."
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "Your app should serve the file views/index.html",
          "testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.match(data, /<h1>.*<\\/h1>/. 'Your app does not serve the expected HTML'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "587d7fb0367417b2b2512bf0",
      "title": "Serve Static assets",
      "description": [
        "An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express you can put in place this functionality using the middleware express.static(<public-dir-absolute_path>). If don’t know what a midleware is, don’t worry. We’ll discuss about it later in details. Basically middleware are function that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method app.use([optional-path], <mware function>). The first path argument is optional. If you don’t pass it, the middleware will be executed for all the requests.",
        "Mount the express.static() middleware for all the requests with app.use(). The absolute path to the assets folder is __dirname + /public.",
        "Now your app should be able to serve a CSS stylesheet. From outside the public folder will appear mounted to the root directory. Your front-page should look a little better now"
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "Your app should serve asset files from the <code>/public</code> directory",
          "testString" : "getUserInput => $.get(getUserInput('url') + '/style.css').then(data => { assert.match(data, /body\\s*\\{[^\\}]*\\}/, 'Your app does not serve static assets'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "<KEY>",<commit_msg>Fix to test string in challenge 'Serve an HTML file'<commit_after>{
  "name": "Basic Node and Express",
  "order": 2,
  "time": "5 hours",
  "helpRoom": "Help",
  "challenges": [
    {
      "id": "587d7fb0367417b2b2512bec",
        "title": "Introduction to the Basic Node and Express Challenges",
        "description": [
          [
            "",
            "",
            "Node.js is a JavaScript tool that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules--small, independent programs--that help facilitate this purpose. Some of the core modules include:<br><br><ul><li>HTTP: a module that acts as a server</li><li>File System: a module that reads and modifies files</li><li>Path: a module for working with directory and file paths</li><li>Assertion Testing: a module that checks code against prescribed constraints</li></ul><br>Express, while not included with Node.js, is another module often used with it. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. Routing directs users to the correct page based on their interaction with the application.<br><br>While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend.",
            ""
          ]
        ],
        "releasedOn": "",
        "challengeSeed": [],
        "tests": [],
        "type": "Waypoint",
        "challengeType": 7,
        "isRequired": false,
        "titleEs": "",
        "descriptionEs": [
          []
        ],
        "titleFr": "",
        "descriptionFr": [
          []
        ],
        "titleDe": "",
        "descriptionDe": [
          []
        ]
    },
    {
      "id": "587d7fb0367417b2b2512bed",
      "title": "Meet the Node console",
      "description": [
        "During the development process, is important to be able to check what’s going on in your code. Node is just a javascript environment. Like client side javascript, you can use the console to display useful debug information. On your local machine, you would see the console output in a terminal. On HyperDev you can open the logs in the lower part of the screen. You can toggle the log panel if you push the button ‘Logs’ (top-left, under the app name).",
        "To get started, just put the classic Hello World in the console. We recommend to keep the log panel open while working at these challenges. Reading the logs you can be aware of the nature of the errors that may occur."
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "<code>\"Hello World\"</code> should be in the console",
          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/hello-console').then(data => { assert.isTrue(data.passed, '\"Hello World\" is not in the server console'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "587d7fb0367417b2b2512bee",
      "title": "Start a working Express Server",
      "description": [
        "In the first two lines of the file myApp.js you can see how it’s easy to create an Express app object. This object has several methods, and we will learn many of them in these challenges. One fundamental method is app.listen(<port>). It tells your server to listen on a given port, putting it in running state. You can see it at the bottom of the file. It is inside comments because for testing reasons we need the app to be running in background. All the code that you may want to add goes between these two fundamental parts. HyperDev stores the port number in the environemet variable process.env.PORT. Its value is 3000.",
        "Let’s serve our first string ! In Express, routes takes the following structure: app.METHOD(PATH, HANDLER). METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched.",
        "Handlers take the form function(req, res) {...}, where req is the request object, and res is the response object. For example, the handler",
        "<code>function(req, res) {</code>",
        "<code> res.send('Response String');</code>",
        "<code>}</code>",
        "will serve the string 'Response String'.",
        "Use the app.get() method to serve the string Hello Express, to GET requests matching the / root path. Be sure that your code works by looking at the logs, then see the results in your browser, clicking the button ‘Show Live’ in the HyperDev UI."
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "Your app should serve the string 'Hello Express'",
          "testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.equal(data, 'Hello Express', 'Your app does not serve the text \"Hello Express\"'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "587d7fb0367417b2b2512bef",
      "title": "Serve an HTML file",
      "description": [
        "We can respond with a file using the method res.sendFile(<file>).",
        "You can put it inside the app.get('/', ...) route handler. Behind the scenes this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file-path. We recommend you to use the node global variable __dirname to calculate the path.",
        "e.g. absolutePath = __dirname + relativePath/file.ext .",
        "The file to send is /views/index.html. Try to ‘Show Live’ your app, you should see a big HTML heading (and a form that we will use later…), with no style applied.",
        "Note: You can edit the solution of the preceding challenge, or create a new one. If you create a new solution, keep in mind that Express evaluates the routes from top to bottom. It executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string."
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "Your app should serve the file views/index.html",
          "testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.match(data, /<h1>.*<\\/h1>/, 'Your app does not serve the expected HTML'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "587d7fb0367417b2b2512bf0",
      "title": "Serve Static assets",
      "description": [
        "An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express you can put in place this functionality using the middleware express.static(<public-dir-absolute_path>). If don’t know what a midleware is, don’t worry. We’ll discuss about it later in details. Basically middleware are function that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method app.use([optional-path], <mware function>). The first path argument is optional. If you don’t pass it, the middleware will be executed for all the requests.",
        "Mount the express.static() middleware for all the requests with app.use(). The absolute path to the assets folder is __dirname + /public.",
        "Now your app should be able to serve a CSS stylesheet. From outside the public folder will appear mounted to the root directory. Your front-page should look a little better now"
      ],
      "challengeSeed": [],
      "tests": [
        {
          "text" : "Your app should serve asset files from the <code>/public</code> directory",
          "testString" : "getUserInput => $.get(getUserInput('url') + '/style.css').then(data => { assert.match(data, /body\\s*\\{[^\\}]*\\}/, 'Your app does not serve static assets'); }, xhr => { throw new Error(xhr.responseText); })"
        }
      ],
      "solutions": [],
      "hints": [],
      "type": "backend",
      "challengeType": 0,
      "translations": {}
    },
    {
      "id": "<KEY>",
{'fraction_non_alphanumeric': 0.11196105702364395, 'fraction_numerical': 0.009967547519703291, 'mean_word_length': 2.8910935738444192, 'pattern_counts': {'":': 122, '<': 68, '<?xml version=': 0, '>': 92, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7589332', 'n_tokens_mistral': 4711, 'n_tokens_neox': 4512, 'n_words': 2102}