Quick Web Servers

on

In a recent project I needed to do some coding in basic HTML and Javascript. The Javascript did include writing and reading cookies. This means I could not serve the HTML files directly from the file system, because some browsers (like Chrome) do not allow storing cookies for file:// locations. This is why I needed to start a web server with as little hassle as possible.

gulp-connect

gulp-connect is a Gulp plugin to run a web server with live reload. Instructions for installation are extremely simple:

npm install -g gulp-cli

This installs the gulp-cli command line utility tool for Gulp.

npm install gulp gulp-connect cors

This installs the gulp-connect plugin to run a web server with live reload.

In your folder you should now have the node_modules folder and the package-lock.json file. Add a file in that folder called gulpfile.js. In that file we need to write the code for the web server:

const gulp  = require('gulp'),
  connect = require('gulp-connect'),
  cors = require('cors');

gulp.task('serve-http', () => {
  return connect.server({
    port: 80,
    host: 'localhost',
    root: './public_html',
    debug: true,
    middleware: (connect, opt) => {
      return [cors()];
    }
  });
});

Create the folder you specified to be the root, in this case ./public_html. In that folder you can create an index.html file with some content.

gulp-connect

In order to start your server you need to run the following command:

gulp serve-http

And that’s it. If in your browser you go to http://localhost (or a different address depending on the host and root parameters you set), you will get your index.html served.

Even more, whenever you make a change to the index.html file, it will be automatically reloaded in the browser, due to the Live Reload functionality.

This was ideal for me and this is the route I ended up using.

Simple HTTP Server from aksakalli

Just a few days after I finished the task that I needed all this for, I ran into someone’s post sharing a simple HTTP server written in C# in one file. This was done by aksakalli and is available in his GitHub.

I just wanted to test it, being a C# guy more than a node.js guy myself. So, I created a new console application and just ran the server:

 static void Main(string[] args)
 {
   string myFolder = @"E:\Temp\Web";
   SimpleHTTPServer myServer = new SimpleHTTPServer(myFolder);
   Console.WriteLine("Server is running on this port: " + myServer.Port.ToString());
   Console.WriteLine("Press any key to stop...");
   Console.ReadKey();
   myServer.Stop();
 }

You need to run Visual Studio as an administrator, otherwise you might get an Access denied error.

When you run this application, you will get an output giving you the port the server is listening at.

SimpleHTTPServer

If you want to set this port manually, you can do so by passing the port in the constructor as an additional parameter:

SimpleHTTPServer myServer = new SimpleHTTPServer(myFolder, 8084);

Simply visit http://localhost:60966 and the index.html from the folder you specified (in my case E:\Temp\Web) will be served.

Conclusion

This blog post is more of a mental note for myself so I don’t forget about these resources. But both of these, especially aksakalli’s version which is in C# made me think about what a basic web server actually consists of and how difficult / easy is to write one. And sometimes we all need to turn a bit towards the basics and refresh (or improve) our knowledge on such subjects.

Leave a Reply

Your email address will not be published. Required fields are marked *