Let's learn how to use javascript to program a server based on Node.js and upload the website to Heroku. First, a simple server; write this in a file called app.js:
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
Then in a file called .gitignore we will write this:
node_modules
Lastly, let's install express, our server framework.
npm install express --save
We will also install nodemon since it makes things much easier:
npm install nodemon -g
Now we can see that message on the server. Run nodemon and open localhost:3000:
nodemon
Routing
Now let's tell our server what files and how it should display. First let's just display index.html. In app.js, write this instead of our previous 'Hello world':
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
If we reopen localhost:3000 and refresh it we can see our index.html without any style or javascript.
Then we also want our server to know where our css and (front-end) javascript is, so we will add this and put those files in there:
app.use(express.static('public'));
Now let's catch the files dynamically (routing). We will get the url fragment as the variable path and then use it:
app.get('/:name', function (req, res) {
console.log(req.params);
res.send(req.params);
});
The previous one only shows us in the terminal what file we are reading, now let's actually show it:
app.get('/:name', function (req, res) {
var file = __dirname + '/' + req.params.name + '.html';
res.sendFile(file);
});
Forms
Let's try to create a form and handle it with Node.js. First we create the form in contact.html:
<!DOCTYPE html>
<html>
<head>
<title>Página Web</title>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.1.1/picnic.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="/contacto" method="POST" class="contact">
<h1>Contacto</h1>
<input placeholder="Nombre">
<input placeholder="Apellidos">
<input placeholder="Edad">
<input type="submit" value="Enviar">
</form>
</body>
</html
And in "style.css":
.contact {
width: 500px;
margin: 100px auto;
}
.contact input {
margin-top: 0;
margin-bottom: 10px;
}
Then we install body-parser, it's a library to read easier the forms from the back-end:
npm install body-parser --save
After that, in app.js we setup the library:
var bodyparser = require('body-parser');
// ...
app.use(bodyparser.urlencoded({ extended: false }));
We add our form. For this, we will be using this form: <main> <div class="gallery"> <div class="flex three"> <div class="element" data-id="1"> <img src="/images/mandarinas.jpg"> <button class="like">Like</button> <button class="dislike error">Dislike</button> </div> <div class="element" data-id="2"> <img src="/images/naranjas.jpg"> <button class="like">Like</button> <button class="dislike error">Dislike</button> </div> <div class="element" data-id="3"> <img src="/images/mandarinas.jpg"> <button class="like">Like</button> <button class="dislike error">Dislike</button> </div> </div> </div> </main>
Ejercicio: hacer un botón de dislike que llame a la ruta "/dislike" por POST y muestre en la consola del navegador lo que devuelve el servidor.