Coding

Node.js – Tutorial – Rendering HTML as Response

  • 00:00:01 everyone like amen in the last video we
  • 00:00:04 have a look at the IDE and the believer
  • 00:00:07 for DES and well we had some charge for
  • 00:00:09 basic speed for working with nodejs time
  • 00:00:12 to get back into writing actual node.js
  • 00:00:14 applications in the very first video in
  • 00:00:17 this series we created the first
  • 00:00:20 application where it just renders some
  • 00:00:22 text to the screen there's hello world
  • 00:00:25 text is easier and I just copy that code
  • 00:00:28 into a new folder for this video and I
  • 00:00:31 also created an index.html file which
  • 00:00:34 says now using HTML with an h1 header
  • 00:00:37 here and what I want to do is I want to
  • 00:00:40 output this HTML file instead of this
  • 00:00:42 text how do I do this
  • 00:00:45 well just entering index dot HTML here
  • 00:00:48 obviously won't work because that would
  • 00:00:50 just well do you think I have to show it
  • 00:00:54 but let's put charge which is shown in
  • 00:00:56 XHTML P so that's not the way to do it
  • 00:00:59 let's think about what we have to do in
  • 00:01:02 order to render this file to the screen
  • 00:01:05 user the file is currently on our server
  • 00:01:09 therefore we not only have to send it to
  • 00:01:12 the user but you also have to grab it on
  • 00:01:14 a print server first that's the first
  • 00:01:16 step we have to do right we can't send
  • 00:01:19 something which we don't have in our
  • 00:01:20 application therefore we need a way to
  • 00:01:23 access or a server file system gets the
  • 00:01:25 file and then attach it to the response
  • 00:01:28 we send the user basically or it send it
  • 00:01:31 with the response to be using so we have
  • 00:01:34 two staffs here regality
  • 00:01:35 and let's start with the first one
  • 00:01:37 fetching it on our file system for disk
  • 00:01:41 thank god no TS has number module
  • 00:01:45 somehow verse continues and i will
  • 00:01:47 import this module which will purchase
  • 00:01:49 FS for file system and the modules that
  • 00:01:52 itself is also called FX for files
  • 00:01:55 awesome
  • 00:01:55 now with this file system module we can
  • 00:01:59 perform what kind of tasks with our file
  • 00:02:01 system on server one of these tasks is
  • 00:02:04 to read a file which is what community
  • 00:02:07 because the
  • 00:02:08 file already exists and we want to read
  • 00:02:10 it and read it in two locations or to
  • 00:02:12 say so that we can send it to the user
  • 00:02:15 the client with response now more the
  • 00:02:18 way we will find well it's actually
  • 00:02:21 pretty easy we use our file system
  • 00:02:24 option here and then we call the read
  • 00:02:27 file method which takes well three
  • 00:02:32 arguments that if we you do wish to
  • 00:02:34 Table three and the first one is the
  • 00:02:37 powerful body once we've in now this is
  • 00:02:40 going to be our index.html file and the
  • 00:02:42 path is just dot slash it makes the HTML
  • 00:02:45 don't slash just to indicate ends in the
  • 00:02:47 same folder now I don't want to enter
  • 00:02:52 past any options but what I want to pass
  • 00:02:55 is a callback and this whole bag will be
  • 00:02:59 a function which should be well executed
  • 00:03:02 for once no chance has to finish reading
  • 00:03:05 in this file here i will use pass two
  • 00:03:09 arguments or these two arguments will
  • 00:03:11 automatically be passed into this
  • 00:03:13 callback function one is well if you get
  • 00:03:16 an error and the other is the data if we
  • 00:03:18 are successful inside this file what I
  • 00:03:22 want to do is I want to first check if
  • 00:03:24 we do have an error
  • 00:03:25 so if error is to check I can do here
  • 00:03:28 because we return true if we have an
  • 00:03:30 error in this case I just want you
  • 00:03:34 change the head of my response and use
  • 00:03:38 404 as a code SAVE not found because it
  • 00:03:42 got an arrow been trying to read a this
  • 00:03:44 file and then I will just output some
  • 00:03:48 text so we'll just right for a long time
  • 00:03:52 if we don't have an error in this case
  • 00:03:56 well I'll keep the head I've already
  • 00:03:59 have and I will instead use response and
  • 00:04:03 then just right but I'm not writing any
  • 00:04:06 text here I'm writing the day that we
  • 00:04:09 get and this data will be our HTML file
  • 00:04:13 some can catch it or
  • 00:04:15 render it with response by simply using
  • 00:04:18 this right method here and passing this
  • 00:04:21 data we got from reading the file and
  • 00:04:24 then I'm always done the last thing I
  • 00:04:27 want to do is call the response and
  • 00:04:30 function within this coal bag so I have
  • 00:04:33 to listen delete it here because if I'm
  • 00:04:35 calling response that and you're outside
  • 00:04:38 of the school bag then it might get
  • 00:04:41 executed before the whole bag for the
  • 00:04:44 beginning of the file has finished
  • 00:04:47 therefore we want to not pass the file
  • 00:04:49 in response because we would add
  • 00:04:51 response before we got all data we need
  • 00:04:54 therefore the right place to call
  • 00:04:56 response and it's not outside of the
  • 00:04:58 school back but inside this function now
  • 00:05:01 I'm saving this and I restart my server
  • 00:05:05 here at below this page and now you can
  • 00:05:08 see we got our HTML file here the
  • 00:05:11 problem is this is probably not the way
  • 00:05:13 we want it to render over HTML file
  • 00:05:16 writing Hawaii doesn't look like this we
  • 00:05:18 did not want to have to pure text well
  • 00:05:22 that's exactly the problem we still got
  • 00:05:24 a header of text plane to output plain
  • 00:05:27 text we're telling the browser this is
  • 00:05:29 plain text don't render it as HTML or
  • 00:05:33 we're not instructing the browser to
  • 00:05:35 render it in HTML to put it down there
  • 00:05:37 to change this I'm going going to check
  • 00:05:39 change this text plane to text HTML a
  • 00:05:43 let me save this and restart the server
  • 00:05:45 and an unloading your and now you can
  • 00:05:48 see it's correctly rendering HTML and
  • 00:05:51 this is fully multiple HTML bus with no
  • 00:05:54 js' and the next value will be finds a
  • 00:05:58 little bit and as a basic routing and
  • 00:06:00 soon enough we'll continue using frame
  • 00:06:04 rates and top no GS see limited supply