Using node js as a simple web server

Question

I want to run a very simple HTTP server  Every GET request to example com should get index html served to it but as a regular HTML page  i e   same experience as when you read normal web pages    Using the code below  I can read the content of index html  How do I serve index html as a regular web page   var http   require  http    var fs   require  fs    var index   fs readFileSync  index html     http createServer function  req  res      res writeHead 200    Content-Type    text plain       res end index      listen 9615       One suggestion below is complicated and requires me to write a get line for each resource  CSS  JavaScript  images  file I want to use    How can I serve a single HTML page with some images  CSS and JavaScript

User · Answer

Simplest Node js server is just     npm install http-server -g   Now you can run a server via the following commands     cd MyApp    http-server     If you re using NPM 5 2 0 or newer  you can use http-server without installing it with npx  This isn t recommended for use in production but is a great way to quickly get a server running on localhost     npx http-server     Or  you can try this  which opens your web browser and enables CORS requests     http-server -o --cors   For more options  check out the documentation for http-server on GitHub  or run     http-server --help   Lots of other nice features and brain-dead-simple deployment to NodeJitsu   Feature Forks  Of course  you can easily top up the features with your own fork   You might find it s already been done in one of the existing 800  forks of this project    https   github com nodeapps http-server network   Light Server  An Auto Refreshing Alternative  A nice alternative to http-server is light-server  It supports file watching and auto-refreshing and many other features      npm install -g light-server    light-server   Add to your directory context menu in Windows Explorer   reg exe add HKCR Directory shell LightServer command  ve  t REG EXPAND SZ  f  d    C  nodejs light-server cmd     -o     -s      V      Simple JSON REST server  If you need to create a simple REST server for a prototype project then json-server might be what you re looking for   Auto Refreshing Editors  Most web page editors and IDE tools now include a web server that will watch your source files and auto refresh your web page when they change    I use Live Server with Visual Studio Code   The open source text editor Brackets also includes a NodeJS static web server  Just open any HTML file in Brackets  press  Live Preview  and it starts a static server and opens your browser at the page  The browser will   auto refresh whenever you edit and save the HTML file  This especially useful when testing adaptive web sites  Open your HTML page on multiple browsers window sizes devices  Save your HTML page and instantly see if your adaptive stuff is working as they all auto refresh   PhoneGap Developers  If you re coding a hybrid mobile app  you may be interested to know that the PhoneGap team took this auto refresh concept on board with their new PhoneGap App  This is a generic mobile app that can load the HTML5 files from a server during development  This is a very slick trick since now you can skip the slow compile deploy steps in your development cycle for hybrid mobile apps if you re changing JS CSS HTML files     which is what you re doing most of the time  They also provide the static NodeJS web server  run phonegap serve  that detects file changes   PhoneGap   Sencha Touch Developers  I ve now extensively adapted the PhoneGap static server  amp  PhoneGap Developer App for Sencha Touch  amp  jQuery Mobile developers  Check it out at Sencha Touch Live  Supports --qr QR Codes and --localtunnel that proxies your static server from your desktop computer to a URL outside your firewall  Tons of uses   Massive speedup for hybrid mobile devs   Cordova   Ionic Framework Developers  Local server and auto refresh features are baked into the ionic tool  Just run ionic serve from your app folder  Even better     ionic serve --lab to view auto-refreshing side by side views of both iOS and Android

User · Answer

Check out this gist  I m reproducing it here for reference  but the gist has been regularly updated      Node JS static file web server  Put it in your path to fire up servers in any directory  takes an optional port argument    var http   require  http        url   require  url        path   require  path        fs   require  fs        port   process argv 2     8888   http createServer function request  response       var uri   url parse request url  pathname       filename   path join process cwd    uri      fs exists filename  function exists        if  exists          response writeHead 404    Content-Type    text plain           response write  404 Not Found n          response end          return             if  fs statSync filename  isDirectory    filename      index html        fs readFile filename   binary   function err  file          if err                    response writeHead 500    Content-Type    text plain             response write err     n            response end            return                 response writeHead 200         response write file   binary          response end                     listen parseInt port  10     console log  Static file server running at n    gt  http   localhost     port      nCTRL   C to shutdown      Update  The gist does handle css and js files  I ve used it myself  Using read write in  binary  mode isn t a problem  That just means that the file isn t interpreted as text by the file library and is unrelated to content-type returned in the response   The problem with your code is you re always returning a content-type of  text plain   The above code does not return any content-type  but if you re just using it for HTML  CSS  and JS  a browser can infer those just fine  No content-type is better than a wrong one   Normally the content-type is a configuration of your web server  So I m sorry if this doesn t solve your problem  but it worked for me as a simple development server and thought it might help some other people  If you do need correct content-types in the response  you either need to explicitly define them as joeytwiddle has or use a library like Connect that has sensible defaults  The nice thing about this is that it s simple and self-contained  no dependencies    But I do feel your issue  So here is the combined solution   var http   require  http        url   require  url        path   require  path        fs   require  fs       port   process argv 2     8888   http createServer function request  response       var uri   url parse request url  pathname       filename   path join process cwd    uri      var contentTypesByExtension           html    text html         css     text css         js      text javascript          fs exists filename  function exists        if  exists          response writeHead 404    Content-Type    text plain           response write  404 Not Found n          response end          return             if  fs statSync filename  isDirectory    filename      index html        fs readFile filename   binary   function err  file          if err                    response writeHead 500    Content-Type    text plain             response write err     n            response end            return                 var headers             var contentType   contentTypesByExtension path extname filename          if  contentType  headers  Content-Type     contentType        response writeHead 200  headers         response write file   binary          response end                     listen parseInt port  10     console log  Static file server running at n    gt  http   localhost     port      nCTRL   C to shutdown

User · Answer

The fast way   var express   require  express    var app   express    app use      express static   dirname        public          adjust app listen 3000  function     console log  listening          Your way   var http   require  http    var fs   require  fs     http createServer function  req  res        console dir req url           will get you      or  index html  or  css styles css                 you need to isolate extension            have a small mimetype lookup array object            only there and then reading the file             delivering it after setting the right content type      res writeHead 200    Content-Type    text html          res end  ok       listen 3001

User · Answer

var http   require  http    var fs   require  fs    var index   fs readFileSync  index html     http createServer function  req  res        res writeHead 200    Content-Type    text html            change the to  text plain  to  text html  it will work as your index page     res end index      listen 9615     I think you where searching for this   In your index html  simply fill it with normal html code - whatever you want to render on it  like    lt html gt       lt h1 gt Hello world lt  h1 gt   lt  html gt

User · Answer

Basically copying the accepted answer  but avoiding creating a js file    node  gt  var connect   require  connect    connect   use static       listen 8000    Found it very convinient  Update As of latest version of Express  serve-static has become a separate middleware  Use this to serve  require  http   createServer require  serve-static         listen 3000   Install serve-static first

User · Answer

You can just type those in your shell  npx serve   Repo  https   github com zeit serve

User · Answer

I m not sure if this is exactly what you wanted  however  you can try changing     Content-Type    text plain     to this     Content-Type    text html     This will have the browser client display the file as html instead of plain text

User · Answer

You don t need express  You don t need connect  Node js does http NATIVELY  All you need to do is return a file dependent on the request   var http   require  http   var url   require  url   var fs   require  fs    http createServer function  request  response        var requestUrl   url parse request url          response writeHead 200      fs createReadStream requestUrl pathname  pipe response      do NOT use fs s sync methods ANYWHERE on production  e g readFileSync      listen 9615        A more full example that ensures requests can t access files underneath a base-directory  and does proper error handling   var http   require  http   var url   require  url   var fs   require  fs   var path   require  path   var baseDirectory     dirname      or whatever base directory you want  var port   9615  http createServer function  request  response        try           var requestUrl   url parse request url              need to use path normalize so people can t access directories underneath baseDirectory         var fsPath   baseDirectory path normalize requestUrl pathname           var fileStream   fs createReadStream fsPath          fileStream pipe response          fileStream on  open   function                  response writeHead 200                     fileStream on  error  function e                 response writeHead 404         assume the file doesn t exist              response end                   catch e            response writeHead 500          response end          end the response so browsers don t hang         console log e stack          listen port   console log  listening on port   port

User · Answer

local-web-server is definitely worth a look  Here s an excerpt from the readme   local-web-server  A lean  modular web server for rapid full-stack development    Supports HTTP  HTTPS and HTTP2  Small and 100  personalisable  Load and use only the behaviour required by your project  Attach a custom view to personalise how activity is visualised  Programmatic and command-line interfaces    Use this tool to    Build any type of front-end web application  static  dynamic  Single Page App  Progessive Web App  React etc   Prototype a back-end service  REST API  microservice  websocket  Server Sent Events service etc   Monitor activity  analyse performance  experiment with caching strategy etc    Local-web-server is a distribution of lws bundled with a  starter pack  of useful middleware   Synopsis  This package installs the ws command-line tool  take a look at the usage guide    Static web site  Running ws without any arguments will host the current directory as a static web site  Navigating to the server will render a directory listing or your index html  if that file exists     ws Listening on http   mbp local 8000  http   127 0 0 1 8000  http   192 168 0 100 8000   Static files tutorial   This clip demonstrates static hosting plus a couple of log output formats - dev and stats     Single Page Application  Serving a Single Page Application  an app with client-side routing  e g  a React or Angular app  is as trivial as specifying the name of your single page     ws --spa index html   With a static site  requests for typical SPA paths  e g   user 1   login  would return 404 Not Found as a file at that location does not exist  However  by marking index html as the SPA you create this rule   If a static file is requested  e g   css style css  then serve it  if not  e g   login  then serve the specified SPA and handle the route client-side   SPA tutorial     URL rewriting and proxied requests  Another common use case is to forward certain requests to a remote server   The following command proxies blog post requests from any path beginning with  posts  to https   jsonplaceholder typicode com posts   For example  a request for  posts 1 would be proxied to https   jsonplaceholder typicode com posts 1     ws --rewrite   posts      - gt  https   jsonplaceholder typicode com posts  1    Rewrite tutorial   This clip demonstrates the above plus use of --static extensions to specify a default file extension and --verbose to monitor activity     HTTPS and HTTP2  For HTTPS or HTTP2  pass the --https or --http2 flags respectively  See the wiki for further configuration options and a guide on how to get the  green padlock  in your browser     lws --http2 Listening at https   mba4 local 8000  https   127 0 0 1 8000  https   192 168 0 200 8000

User · Answer

A slightly more verbose express 4 x version but that provides directory listing  compression  caching and requests logging in a minimal number of lines  var express   require  express    var compress   require  compression    var directory   require  serve-index    var morgan   require  morgan      logging for express  var app   express     var oneDay   86400000   app use compress     app use morgan     app use express static  filesdir     maxAge  oneDay      app use directory  filesdir     icons   true     app listen process env PORT    8000    console log  Ready To serve files

User · Answer

Note  This answer is from 2011  However  it is still valid  You can use Connect and ServeStatic with Node js for this   Install connect and serve-static with NPM    npm install connect serve-static   Create server js file with this content   var connect   require  connect     var serveStatic   require  serve-static      connect         use serveStatic   dirname         listen 8080       gt  console log  Server running on 8080          Run with Node js    node server js    You can now go to http   localhost 8080 yourfile html

User · Answer

You don t need to use any NPM modules to run a simple server  there s a very tiny library called  NPM Free Server  for Node    NPM Free Server on GitHub   50 lines of code  outputs if you are requesting a file or a folder and gives it a red or green color if it failed for worked  Less than 1KB in size  minified

User · Answer

Step1  inside command prompt  I hope you cd TO YOUR FOLDER     npm install express  Step 2  Create a file server js  var fs   require  fs    var host    127 0 0 1   var port   1337  var express   require  express     var app   express    app use express static   dirname     public       use static files in ROOT public folder  app get      function request  response     root dir     response send  Hello           app listen port  host     Please note  you should add WATCHFILE  or use nodemon  too  Above code is only for a simple connection server   STEP 3  node server js or nodemon server js  There is now more easy method if you just want host simple HTTP server  npm install -g http-server  and open our directory and type http-server  https   www npmjs org package http-server

User · Answer

This is one of the fastest solutions i use to quickly see web pages      sudo npm install ripple-emulator -g   From then on just enter the directory of your html files and run  ripple emulate   then change the device to Nexus 7 landscape

User · Answer

I found a interesting library on npm that might be of some use to you  It s called mime npm install mime or https   github com broofa node-mime  and it can determine the mime type of a file  Here s an example of a webserver I wrote using it   var mime   require  mime   http   require  http   fs   require  fs    http createServer function  req  resp    path    unescape   dirname   req url  var code   200  if fs existsSync path         if fs lstatSync path  isDirectory              if fs existsSync path  index html              path     index html            else               code   403             resp writeHead code    Content-Type    text plain                 resp end code     http STATUS CODES code      req url                       resp writeHead code    Content-Type   mime lookup path        fs readFile path  function  e  r        resp end r         else       code   404     resp writeHead code    Content-Type   text plain         resp end code     http STATUS CODES code      req url     console log  GET   code     http STATUS CODES code      req url     listen 9000  localhost    console log  Listening at http   localhost 9000     This will serve any regular text or image file   html   css   js   pdf   jpg   png   m4a and  mp3 are the extensions I ve tested  but it theory it should work for everything   Developer Notes  Here is an example of output that I got with it   Listening at http   localhost 9000 GET 200 OK  cloud GET 404 Not Found  cloud favicon ico GET 200 OK  cloud icon png GET 200 OK   GET 200 OK  501 png GET 200 OK  cloud manifest json GET 200 OK  config log GET 200 OK  export1 png GET 200 OK  Chrome3DGlasses pdf GET 200 OK  cloud GET 200 OK  -1 GET 200 OK  Delta-Vs for inner Solar System svg   Notice the unescape function in the path construction  This is to allow for filenames with spaces and encoded characters

User · Answer

from w3schools  it is pretty easy to create a node server to serve any file that is requested  and you dont need to install any packages for it  var http   require  http    var url   require  url    var fs   require  fs     http createServer function  req  res      var q   url parse req url  true     var filename         q pathname    fs readFile filename  function err  data        if  err          res writeHead 404    Content-Type    text html           return res end  404 Not Found                res writeHead 200    Content-Type    text html         res write data       return res end             listen 8080     http   localhost 8080 file html  will serve file html from disk

User · Answer

Rather than dealing with a switch statement  I think it s neater to lookup the content type from a dictionary   var contentTypesByExtension          html    text html        js      text javascript               var contentType   contentTypesByExtension fileExtension      text plain

User · Answer

Express function sendFile does exactly what you need  and since you want web server functionality from node  express comes as natural choice and then serving static files becomes as easy as     res sendFile   path to your index html     read more here   https   expressjs com en api html res sendFile  A small example with express web server for node   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 8080     run this  and navigate to http   localhost 8080  To expand on this to allow you to serve static files like css and images  here s another example    var express   require  express    var app   express    var path   require  path     app use express static   dirname     css      app get      function req  res        res sendFile path join   dirname     index html          app listen 8080     so create a subfolder called css  put your static content in it  and it will be available to your index html for easy reference like     lt link type  text css  rel  stylesheet  href   css style css    gt    Notice relative path in href   voila

User · Answer

if you have node installed on you PC probably you have the NPM  if you don t need NodeJS stuff  you can use the serve package for this   1 - Install the package on your PC   npm install -g serve   2 - Serve your static folder   serve  lt path gt   d  gt  serve d  StaticSite   It will show you which port your static folder is being served  just navigate to the host like   http   localhost 3000

User · Answer

Is very easy with the tons of libraries presents today  Answers here are functional  If you want another version for start faster and simple   Of course first install node js  Later    gt    module with zero dependencies  gt  npm install -g  kawix core latest   gt    change  path to static with your folder or empty for current  gt  kwcore  https   raw githubusercontent com voxsoftware kawix-core master example npmrequire express-static js   path to static   Here the content of  https   raw githubusercontent com voxsoftware kawix-core master example npmrequire express-static js   you don t need download it  i posted for understand how works behind      you can use like this     kwcore  https   raw githubusercontent com voxsoftware kawix-core master example npmrequire express js   path to static    kwcore  https   raw githubusercontent com voxsoftware kawix-core master example npmrequire express js       this will download the npm module and make a local cache import express from  npm   express  4 16 4  import Path from  path   var folder  process argv 2         folder  Path resolve process cwd    folder  console log  Using folder as public      folder   var app   express    app use express static folder    app listen 8181  console log  Listening on 8181

User · Answer

The simpler version which I ve came across is as following  For education purposes  it is best  because it does not use any abstract libraries    var http   require  http    url   require  url    path   require  path    fs   require  fs     var mimeTypes        html    text html      mp3   audio mpeg      mp4   video mp4      jpeg    image jpeg      jpg    image jpeg      png    image png      js    text javascript      css    text css     http createServer function req  res        var uri   url parse req url  pathname      var filename   path join process cwd    uri       fs exists filename  function exists            if  exists                console log  not exists      filename               res writeHead 200    Content-Type    text plain                 res write  404 Not Found n                res end                return                    var mimeType   mimeTypes path extname filename  split      1            res writeHead 200    Content-Type  mimeType             var fileStream   fs createReadStream filename           fileStream pipe res              end path exists    listen 1337     Now go to browser and open following   http   127 0 0 1 image jpg   Here image jpg should be in same directory as this file   Hope this helps someone

User · Answer

var http   require  http    var fs   require  fs    var index   fs readFileSync  index html     http createServer function  req  res    res writeHead 200    Content-Type    html     res end index      listen 9615      Just Change The CONTENT TYPE to  html

User · Answer

I think the part you re missing right now is that you re sending   Content-Type  text plain   If you want a web browser to render the HTML  you should change this to   Content-Type  text html

User · Answer

Edit   Node js sample app Node Chat has the functionality you want  In it s README textfile 3  Step is what you are looking for      step1         create a server that responds with hello world on port 8002         step2         create an index html and serve it         step3         introduce util js   change the logic so that any static file is served   show 404 in case no file is found         step4         add jquery-1 4 2 js   add client js   change index html to prompt user for nickname      Here is the server js    Here is the util js

User · Answer

There are already some great solutions for a simple nodejs server   There is a one more solution if you need live-reloading as you made changes to your files   npm install lite-server -g   navigate your directory and do   lite-server   it will open browser for you with live-reloading

User · Answer

This is basically an updated version of the accepted answer for connect version 3   var connect   require  connect    var serveStatic   require  serve-static     var app   connect     app use serveStatic   dirname    index     index html       app listen 3000     I also added a default option so that index html is served as a default

User · Answer

Most of the answers above describe very nicely how contents are being served  What I was looking as additional was listing of the directory so that other contents of the directory can be browsed  Here is my solution for further readers    use strict    var finalhandler   require  finalhandler    var http   require  http    var serveIndex   require  serve-index    var serveStatic   require  serve-static    var appRootDir   require  app-root-dir   get    var log   require appRootDir     log bunyan js     var PORT   process env port    8097      Serve directory indexes for reports folder  with icons  var index   serveIndex  reports      icons   true        Serve up files under the folder var serve   serveStatic  reports         Create server var server   http createServer function onRequest req  res       var done   finalhandler req  res       serve req  res  function onNext err        if  err          return done err       index req  res  done                server listen PORT  log info  Server listening on     PORT

User · Answer

The way I do it is to first of all install node static server globally via   npm install node-static -g   then navigate to the directory that contains your html files and start the static server with static   Go to the browser and type localhost 8080  yourHtmlFile

User · Answer

I can also recommend SugoiJS  it is very easy to set up and gives an option to start writing fast and has great features   Take a look here to get started  http   demo sugoijs com    documentation  https   wiki sugoijs com   It has request handling decorators  request policies and authorization policies decorators    For example   import  Controller Response HttpGet RequestParam  from   sugoi server      Controller   dashboard   export class CoreController      constructor            HttpGet    role       test  RequestParam  role   role string            RequestHeader  role   headerRole string           if role     headerRole               return  authorized           else              throw new Error  unauthorized

User · Answer

Node js webserver from scratch  No 3rd-party frameworks  Allows query string  Adds trailing slash  Handles 404  Create a public html subfolder and place all of your content in it   Gist  https   gist github com veganaize fc3b9aa393ca688a284c54caf43a3fc3 var fs   require  fs     require  http   createServer function request  response      var path    public html   request url slice 0         request url indexOf      1    request url length 1  - 1            fs stat path  function bad path  path stat        if  bad path  respond 404       else if  path stat isDirectory    amp  amp  path slice -1                   response setHeader  Location   path slice 11              respond 301         else fs readFile path slice -1          path  index html    path            function bad file  file content          if  bad file  respond 404         else respond 200  file content                     function respond status  content        response statusCode   status      response end content          listen 80  function   console log  Server running on port 80

User · Answer

I use below code to start a simple web server which render default html file if no file mentioned in Url   var http   require  http    fs   require  fs    url   require  url    rootFolder     views    defaultFileName     views 5 Tips on improving Programming Logic   Geek Files htm     http createServer function req  res        var fileName   url parse req url  pathname         If no file name in Url  use default file name     fileName    fileName           defaultFileName   rootFolder   fileName       fs readFile   dirname   decodeURIComponent fileName    binary  function err  content           if  content    null  amp  amp  content                      res writeHead 200   Content-Length  content length                res write content                     res end                listen 8800     It will render all js  css and image file  along with all html content   Agree on statement  No content-type is better than a wrong one

User · Answer

Crazy amount of complicated answers here  If you don t intend to process nodeJS files database but just want to serve static html css js images as your question suggest then simply install the pushstate-server module or similar   Here s a  one liner  that will create and launch a mini site  Simply paste that entire block in your terminal in the appropriate directory   mkdir mysite    cd mysite    npm install pushstate-server --save    mkdir app    touch app index html    echo   lt h1 gt Hello World lt  h1 gt    gt  app index html    touch server js    echo  var server   require  pushstate-server   server start   port  3000  directory     app        gt  server js    node server js   Open browser and go to http   localhost 3000  Done   The server will use the app dir as the root to serve files from  To add additional assets just place them inside that directory

[node.js] Using node.js as a simple web server

Examples related to node.js

Examples related to server

Examples related to webserver