When the user visits our web application's homepage, the index.ejs template is rendered to screen. This template is actually just a simple HTML document that links to a client-side JavaScript file called notes.js.
If we take a look at the EJS template, we can see exactly where the JavaScript file is loaded:
<script src="notes.js"></script>
You maybe wondering where this file comes from. Actually, this JavaScript file is the one we saved into the public folder of our web application. This script is executed from the user's browser as soon as the HTML page has finished loading.
This script is responsible of doing a few things:
Adding drag and drop capabilities to the notes
Initializing Socket.io
Listening for updates
Updating the graphics to reflect changes