Simple HTTP server for rapid prototyping

Sometimes you want to serve your web project over a simple server, You might want to test your responsiveness of your webapp on your mobile phone, you want to serve a little json content using http that needs you to run your webapp on a server or rapidly test your webVR project on your mobile device. This blogpost shows you two ways to include a simple http server into your web application.

First: Using devserver budo

Budo is a easy to use development server with live reloading and a lot more highlevel features useful for rapid prototyping. More information about budo can be found here.

  • Setup your project using npm: Create your project folder,say ‘server-blogpost’ and navigate to that directory using command prompt on windows or terminal on MacOS or LinuxOS.
$mkdir server-blogpost
$cd server-blogpost
  •  Now run ‘npm init’ (PS: you should have npm installed in your system) and give all the details of your webapp and complete the setup.
$npm init

Here goes my terminal log. If you don’t want to change any default option provided by npm in the circle brackets ‘()’ then just press enter.

photo1

  • Now that you have your project setup done, install the npm package ‘budo’ in your project.
$npm install budo --save
  • after the package is installed open your ‘package.json’ and you will find the budo package listed under dependencies.
  • under scripts remove the default ‘test’ script(if you have one) and add “start”: “budo –live –verbose –port 3210 –open”  and your final package.json looks like
{
 "name": "server-blogpost",
 "version": "1.0.0",
 "description": "test app to run on server",
 "main": "index.html",
 "scripts": {
 "start": "budo --live --verbose --port 3210 --open"
 },
 "keywords": [
 "server",
 "budo"
 ],
 "author": "santosh viswanatham",
 "license": "ISC",
 "dependencies": {
 "budo": "^10.0.3"
 }
}
  • Create a html file say ‘index.html’ in the same project folder. This will be the entry point of your webapp.
  • Now run ‘npm start’ on your command prompt to run your http server. This should automatically open your webapp hosted on a local http server on your default browser. If both your machine and mobile device are connected to the same wifi then you can view your webapp using the same url that is running on your machine. http://192.xxx.x.x:3210/ in my case.

Next: Using Python HTTP Server

  • Navigate to your project folder and run the following command ‘python -m SimpleHTTPServer 3210’ (PS: You should have python installed on your machine)
$cd server-blogpost
$python -m SimpleHTTPServer 3210

This initializes a simple HTTP server using python. You can view the output on your machine using the url http://0.0.0.0:3210’ or http://yourip:3210’ (can be used on both your mobile device and the machine) where yourip is the IP address of your machine.

Now your server is up and running in two different ways.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s