Front end development with Static-server (Nodejs)

Static server is a simple file server which serves html, css or javascript contents (or any other file for that matter). It is built on top of nodejs and distributed as npm package.

Most of the time, for frontend mobile development, you just need a simple file server (to serve your HTML and javascript files) and a text editor, for that simple task you would end up using bulky Integrated Development environments like Eclipse, Visual Studio, or Intel XDK. As most of the debugging can be done on browser for example using google chrome developer tool, I don't think there is a necessity of these IDE's. I am sure these IDE's are not just used for debugging purpose and provides many more features like emulating, code completion so on, but if you are anything like me and want to use bare minimum tool set that can help you achive your task quickly and set up the environment easily, then you can use static server for your development activities.

With increase in nodejs popularity, npm is becoming a go to tool for package distribution, and I think every developer must have nodejs installed in there system. So go ahead, download nodejs from here https://nodejs.org/en/ and install it.

Once nodejs is installed, go to command prompt and execute

node -v  
or  
npm -v  

You should see the version number of nodejs. This confirms nodejs is installed in your system properly. Open the command prompt (Note- these instructions works on mac system too.), execute following command

npm install -g static-server  

static-server Above code fetches latest version of "static-server" package and installs globally in your system. With this installtion you are ready to server any folder as a web server.

Create "workspace" folder in one of your drive and create a folder called "myApp". Navigate to myApp folder and create an index.html and paste this below code into index.html .

Execute the command "static-server" from myApp folder, you should see following out put in command prompt.

serving

Head over to your chrome browser and open url http://localhost:9080 You should see the following screen.

static_server_demo

Congratulations, you have created a web server and serving your content from that server. Don't worry if you dont understand the code in index.html, it is a simple html code added with Material design lite components to give more aesthetic appeal. We will be covering material design lite in up coming blog. I will also cover debugging and developing front end with "chrome developer tool" in upcoming blog.
Go ahead and explore the app!!.