How to run a local server and more!
A local server is a program used to serve local content to be accessible over HTTP (Hypertext Transfer Protocol), just like a web server does for an online website.
When you try to open a website project locally or start developing a new web project and open the index.html file in your browser, the URL on the address bar is something like file://address-of-the-file.html. note that it says the project is served using file protocol instead of http as a normal web page.
In this case, the web page’s contents and functionalities like images or styles and scripts don't load and run as expected. It happens because there is no program (a web server) to accept requests from the page and respond to them. in these cases, if you open the browser console, because the page can’t access files using absolute paths (as javascript only can access relatively addressed files over file protocol) you may see errors like this:
or like this one, because the page also can not access contents from other origins (other systems e.g. CDNs) or send Ajax calls, cause there is no HTTP server running:
so we need to serve pages over HTTP using local server programs to be able to send requests and get responses.
To access the content on the web, over HTTP, we need an IP address to present the system which serves the content. Local server programs accept requests and respond to them on the same system they are running on, so they use a special address on the system at
http://localhostwhich is actually a pre-defined address for system’s loopback IP athttp://127.0.0.1. Also, there can be more than one server running on a system, so each local server program uses a unique port on the system likelocalhost:3000for accessing the content. You can consider IP (127.0.0.1) as the address of the system and the port (:3000) as the id of the server we want to access.
Running a local server
There are several ways to start a local server, you may have heard of XAMP, WAMP or AMPPS stacks. They are software bundles for backend development and running actual web servers. We don't need them. Here are some small and light ways to start a local server using different languages:
javascript
serve
if you have Nodejs installed on your system, serve is the simplest option to use. install it using:
$ [sudo] npm i -g servechange directory to your project and run this in terminal:
$ serveyour project will start at localhost:5000 (address will be copied to your clipboard!).
features
- multiple servers at the same time (changes port automatically)
- index directory (list files and sub-directories in a directory)
lite-server
another simple one-command local server is lite-server which you can install using npm again:
$ [sudo] npm i -g lite-serverand use like:
$ lite-serverit will serve the project at localhost:3000 (and opens browser automatically).
features
- multiple servers at the same time (changes port automatically)
- watch files for changes
- using browser-sync to sync active clients
also, there are other javascript options like
http-server
python
SimpleHTTPServer
SimpleHTTPServer module comes built-in with Python 2 and 3, and is easy to use by just running:
# python 2
$ [sudo] python -m SimpleHTTPServer <port># python 3
$ [sudo] python3 -m http.server <port>
PHP
like Python, PHP ships with a built-in local server runner:
$ php -S localhost:8000these were command-line, easy to use, one-command programs to start a local server. but what about some GUI?
Fenix
it is a simple, free software to start a local server on windows and mac.
easyPHP
is another easy to use GUI tool to start a web server.
Remote access to a locally served project!
So now we know how to serve a local project, but what if we want to access it remotely? For example, we need to preview the project or give access to a colleague for debugging help.
these are the tools we can use:
ngrok
ngrok makes it possible to expose a local port to the internet so that it’s accessible for others. with SSL support, it creates a secure URL to your locally served project whether you are using a VPN or behind a NAT.
Using ngrok is actually pretty simple. first, signup free, then download ngrok. after that, for exposing a port, for example 3000, run this in the terminal:
$ ngrok http 3000localtunnel
localtunnel is a Nodejs alternative you can use and is easily installed using npm:
$ npm install -g localtunnellikewise, for exposing a port run this in the terminal, where 3000 is the desired port:
$ lt --port 3000Publishing a static web project
say we are done with developing and preview/debugging our project, and we want to deploy it to the internet, in other words, we want to upload it somewhere and get a URL to access the project.
there are several Freemium awesome tools and services to do this, like now.sh, netlify or surge.sh. here I explain surge, since I like it more than the others!
surge.sh
for publishing static sites using surge, we need to use their CLI available in npm(note that Nodejs is required to be installed):
$ npm install --global surgethen, change the directory to your project and run:
$ surgeit asks to verify the project path, then it suggests a randomly generated name for the project’s address. change it to your desired name in this format:
[your-chosen-name].surge.shPress enter, and after uploading is finished, it’s up and running in the address you chose. that simple!
personally I use serve, ngrok and surge in my works, so I hope you find this article useful. if there are other excellent tools out there to run a local server, expose it, or publish a web project, let me know in the comments. cheers.
