How to "run" an HTML webpage without Express, etc

My question can be pretty similar to others, but I already read a lot of answers, but I don't understand completely the details behind them.

I have to create a node.js REST API, but I don't took any lessons before. So i'm currently reading and trying tutorials to learn to create a simple node.js script.

I installed node.js, i created my script (it's just reading an input field), and when i click on a button, it's supposed to write the input in the console.

The tutorial needs only node.js, and use the .createserver. I understand that node.js is server side and can't be interpreted without it. The tutorial asks to open the .html file in the browser, directly with the path. The html webpage shows up, but... When i'm pressing "ok", here's the errors :

*app.js:1 Uncaught ReferenceError: require is not defined

Access to XMLHttpRequest at 'file:///.../ApplicationAngular/nodeProject/app.html?name=' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

GET file:///.../ApplicationAngular/nodeProject/app.html?name= net::ERR_FAILED*

All the threads on StackOverflow explains that I need a third-party to run the HTML webpage. But on the tutorial, everything is working fine and never mentions the existance of Express, Cheerio, etc..

Here's the samples of code: app.html

<input type="text" placeholder="Enter your name" id="name"/>
<input type="button" value="OK" onclick="valid()"/>
<div id="message"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="app.js"></script>
<script>
function valid() {
    $.get('', { name: $('#name').val() }, function(data) {
        $('#message').html(data.message);
    }, 'json');
}
</script>

app.js

var http = require('http');
var url = require('url');
var fs = require('fs');

var server = http.createServer(function (req, res) {
    var url_parts = url.parse(req.url, true); 
    var name = url_parts.query.name;

    if(name){
        console.log('Nom: ' + name);
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end(JSON.stringify({message: 'Hello' + name + ' !'}));
    } else {
        console.log('No name !');
        res.writeHead(200, {'Content-Type': 'text/plain'});
        fs.readFile('app.html', function (err,data)
        {
            res.end(data);
        });
    }
   
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

Is the tutorial missing something? Do I have to install Express in order to view the page web? Sorry again, english is not my native langage.

Thanks a lot for your answers.

Solution

With this line in your html

<script src="app.js"></script>    <!-- wrong! -->

you try to run your nodejs program in your browser's javascript interpreter. You need to run it on your server instead. Your browser gacks on the require() operations because those are made to work in nodejs on your server.

Try removing the line from your html, and try doing something like this on your server's command line, then visiting http://localhost:1337 from your browser.

 node app.js

The fact that browsers and nodejs support the same language is a bit confusing as you figure this all out. The language is the same but the two runtime environments are quite different. Be patient. You'll get it.

The app.js nodejs program you showed us should function correctly. In its if (name) branch it handles the request coming from the $.get() operation in the browser. In its else branch it delivers the html file to the browser.

And, it has to be said, doing more than just this kind of tutorial with nodejs alone -- without express or some other webserver framework -- gets to be a huge pain in the xxx neck, enough of a pain in the neck that you'll be tempted to develop your own framework.

Edit You have this line twice

res.writeHead(200, {'Content-Type': 'text/plain'});   /* wrong! */

Change both occurrences to

res.writeHead(200, {'Content-Type': 'text/html'});

The Content-Type: text/html header tells your browser to interpret your html file as html, not raw text.