Loading basic HTML in Node js

Question

I m trying to find out how to load and render a basic HTML file so I don t have to write code like   response write      lt p gt blahblahblah lt  p gt

User · Answer

This would probably be some what better since you will be streaming the file s  rather than loading it all into memory like fs readFile   var http   require  http    var fs   require  fs    var path   require  path    var ext      w d -      w d       http createServer function req  res       if  req url                    res writeHead 200    Content-Type    text html             fs createReadStream  index html   pipe res         else if  ext test req url             fs exists path join   dirname  req url   function  exists                if  exists                    res writeHead 200    Content-Type    text html                     fs createReadStream  index html   pipe res                 else                   res writeHead 404    Content-Type    text html                     fs createReadStream  404 html   pipe res                     else               add a RESTful service          listen 8000

User · Answer

Adding another option - based on the excepted answer  For Typescript  import   Injectable   from   nestjs common   import   parse   from  node-html-parser   import   as fs from  fs   import   as path from  path     Injectable   export class HtmlParserService       getDocument id  string   string          const htmlRAW   fs readFileSync            path join   dirname   quot    assets files some file html quot               quot utf8 quot                   const parsedHtml   parse htmlRAW         const className        id                 Debug         console log parsedHtml querySelectorAll className           return parsedHtml querySelectorAll className  toString               Example above is using with nestjs and node-html-parser

User · Answer

we can load the html document with connect frame work   I have placed my html document and the related images in the public folder of my project where the below code and node modules present     server js var http require  http    var connect require  connect     var app   connect      use connect logger  dev       use connect static  public       use function req  res      res end  hello world n         http createServer app  listen 3000     I have tried the readFile   method of fs  but it fails to load the images  that s why i have used the connect framework

User · Answer

You can load HTML directly in end method response end      lt p gt blahblahblah lt  p gt        It s the same as response write      lt p gt blahblahblah lt  p gt       response end

User · Answer

https   gist github com xgqfrms-GitHub 7697d5975bdffe8d474ac19ef906e906  Here is my simple demo codes for host static HTML files by using Express server   hope it helps for you    x000D   x000D     simple express server for HTML pages  x000D     ES6 style x000D   x000D  const express   require  express    x000D  const fs   require  fs    x000D  const hostname    127 0 0 1   x000D  const port   3000  x000D  const app   express    x000D   x000D  let cache         Array is OK  x000D  cache 0    fs readFileSync    dirname     index html    x000D  cache 1    fs readFileSync    dirname     views testview html    x000D   x000D  app get       req  res    gt    x000D      res setHeader  Content-Type    text html    x000D      res send  cache 0     x000D      x000D   x000D  app get   test    req  res    gt    x000D      res setHeader  Content-Type    text html    x000D      res send  cache 1     x000D      x000D   x000D  app listen port       gt    x000D      console log   x000D          Server is running at http     hostname    port    x000D          Server hostname   hostname  is listening on port   port   x000D          x000D      x000D   x000D   x000D

User · Answer

use ejs instead of jade  npm install ejs  app js  app engine  html   require  ejs   renderFile   app set  view engine    html        routes index js  exports index   function req  res   res render  index     title   ejs

User · Answer

var http   require  http       var fs   require  fs       http createServer function request  response          response writeHeader 200    Content-Type    text html           var readSream   fs createReadStream  index html   utf8       readSream pipe response        listen 3000     console log  server is running on port number

User · Answer

How about using express module       var app   require  express           app get     function request response          response sendFile   dirname   XXX html                 app listen  8000      then  you can use browser to get  localhost 8000

User · Answer

I know this is an old question - here is a simple file server utility if you d prefer to not use connect or express  but rather the http module    var fileServer   require    fileServer    var http   require  http    http createServer function req  res       var file     dirname   req url     if req url                      serve index html on root         file     dirname    index html             serve all other files echoed by index html e g  style css       callback is optional    fileServer file  req  res  callback       module exports   function file  req  res  callback        var fs   require  fs             ext   require  path   extname file            type                fileExtensions                  html   text html                css   text css                js   text javascript                json   application json                png   image png                jpg   image jpg                wav   audio wav                console log  req      req url      for var i in fileExtensions           if ext     i                  type   fileExtensions i            break                    fs exists file  function exists           if exists              res writeHead 200     Content-Type   type              fs createReadStream file  pipe res            console log  served    req url            if callback     undefined  callback            else             console log file  file dne

User · Answer

I know this is an old question  but as no one has mentioned it I thought it was worth adding   If you literally want to serve static content  say an  about  page  image  css  etc  you can use one of the static content serving modules  for example node-static    There s others that may be better worse - try search npmjs org    With a little bit of pre-processing you can then filter dynamic pages from static and send them to the right request handler

User · Answer

It s just really simple if you use pipe  The following is the server js code snippet    x000D   x000D  var http   require  http    x000D  var fs   require  fs    x000D   x000D  function onRequest req  res   x000D   x000D      console log  USER MADE A REQUEST     req url   x000D      res writeHead 200    Content-Type    text html     x000D      var readStream   fs createReadStream   dirname     index html   utf8     x000D       x000D    include your html file and directory name instead of  lt  lt   dirname     index html  gt  gt    x000D   x000D      readStream pipe res   x000D   x000D    x000D   x000D  http createServer onRequest  listen 7000   x000D  console log  Web Server is running       x000D   x000D   x000D

User · Answer

This is a pretty old question   but if your use case here is to simply send a particular HTML page to the browser on an ad hoc basis  I would use something simple like this   var http   require  http           fs   require  fs     var server   http createServer function req  res     var stream   fs createReadStream  test html      stream pipe res       server listen 7000

User · Answer

use app get to get the html file  its simple    const express   require  express    const app   new express     app get      function request  response       response sendFile  absolutePathToYour htmlPage html          its as simple as that  For this use express module  Install express  npm install express -g

User · Answer

The easy way to do is  put all your files including index html or something with all resources such as CSS  JS etc  in a folder public or you can name it whatever you want and now you can use express js and just tell app to use the  dirname as    In your server js using express add these  var express   require  express    var app   express    app use express static   dirname     public       and if you want to have seprate directory add new dir under public directory and use that path   public YourDirName   SO what we are doing here exactly   we are creating express instance named app and we are giving the adress if the public directory to access all the resources   Hope this helps

User · Answer

It s more flexible and simple way to use pipe method   var fs   require  fs    var http   require  http     http createServer function request  response      response writeHead 200    Content-Type    text html        var file   fs createReadStream  index html      file pipe response       listen 8080    console log  listening on port 8080

User · Answer

try this one  var http   require  http    var fs   require  fs    var PORT   8080   http createServer  req  res    gt        fs readFile        req url   err  data    gt            if   err                var dotoffset   req url lastIndexOf                   var mimetype   dotoffset    -1    text plaint                        html    text html                     css    text css                     js    text javascript                     jpg    image jpeg                     png    image png                     ico    image x-icon                     gif    image gif                 req url substr dotoffset                 res setHeader  Content-Type   mimetype               res end data               console log req url  mimetype             else               console log  File not fount      req url               res writeHead 404   quot Not Found quot                res end                          listen PORT    With this  you can include js  css source-codes when linking them and you can load icons  imgs  gifs  And if you want  you can add more if you need

User · Answer

I just found one way using the fs library  I m not certain if it s the cleanest though   var http   require  http        fs   require  fs      fs readFile    index html   function  err  html        if  err            throw err                    http createServer function request  response              response writeHeader 200    Content-Type    text html               response write html             response end             listen 8000         The basic concept is just raw file reading and dumping the contents  Still open to cleaner options  though

User · Answer

I think this would be a better option as it shows the URL running the server   var http   require  http        fs   require  fs     const hostname     lt your machine IP gt    const port   3000   const html fs readFile    index html   function  err  html        if  err            throw err                 http createServer function request  response              response writeHeader 200    Content-Type    text html               response write html             response end             listen port  hostname       gt                console log  Server running at http     hostname    port

User · Answer

You can echo files manually using the fs object  but I d recommend using the ExpressJS framework to make your life much easier       But if you insist on doing it the hard way   var http   require  http    var fs   require  fs     http createServer function req  res       fs readFile  test html  function  err  data           res writeHead 200    Content-Type    text html   Content-Length  data length            res write data           res end               listen 8000

User · Answer

You could also use this snippet   var app   require  express    app get      function req res      res sendFile   dirname    dir yourfile html       app listen 3000

User · Answer

This is an update to Muhammed Neswine s answer  In Express 4 x  sendfile has been deprecated and sendFile function has to be used  The difference is sendfile takes relative path and sendFile takes absolute path  So    dirname is used to avoid hardcoding the path   var express   require  express    var app   express    var path   require  path     app get      function  req  res        res sendFile path join   dirname     folder name filename html

User · Answer

Best way i learnt is using express with html files as express gives lots of advantage  Also you can extend it to a Heroku platform if you want  Just saying     var express   require  express    var app       express    var path      require  path      app get     function req res     res sendFile path join   dirname   index html          app listen 3000      console log  Running at Port 3000      Clean and best

[html] Loading basic HTML in Node.js

Examples related to html

Examples related to node.js