Servicio de chat con Node.js y despliegue en Heroku

Preparando el cliente

Vamos a diseñar una página HTML para manejar el cliente web del chat, podemos usar bootstrap para ir rápido. Os voy a dejar el código en los apuntes ya con todo preparado, si tenéis alguna duda sobre el funcionamiento me lo decís en los comentarios de la lección.

Podemos crearlo en una carpeta llamada public haciendo referencia a los ficheros estáticos públicos:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
    body { 
      margin: 15px; font-family: sans-serif }
    h3 {
      padding: 0; margin: 0; margin-bottom: 1rem;}
    #chat { 
      background: rgb(245, 245, 245); height: 200px; width: calc(100% - 20px); 
      max-width:620px; border: 1px solid gray; margin-bottom: 10px; 
      padding: 10px; overflow-y: auto; overflow-y: scroll;}
    #controls { 
      display: grid; width: calc(100%); max-width:642px; 
      grid-template-columns: 25% 55% 20%; }
    #controls input { 
      padding: 8px 5px; }
    </style>
  </head>
  <body>
    <div id="chat"></div>
      <form autocomplete="off">
        <div id="controls">
          <input type="text" id="username" placeholder="Usuario" />
          <input type="text" id="content" placeholder="Mensaje" />
          <input type="submit" value="Enviar" />
        </div>
      </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  </body>
</html>

Bien, con esto ya lo tenemos.

Ahora tenemos que servir los ficheros estáticos con Express, para hacerlo haremos lo siguiente en nuestro servidor:

app.use(express.static(__dirname + '/public'))

Con esto ya podemos poner en marcha el servidor y si accedemos veremos como se carga la pantalla inicial de nuestro chat.