8.2 Local Web Servers

Often, we require some kind of local web server when we are developing an application in our local machine. In this video, we will explore three common ways. First one will be through the Apache Wep Server. And, we will use the default max installation of Apache. The second way will also be Apache Web Server, but we will use this program called MAMP, which is very popular with also using in an environment with PHP and MySQL. And thirdly, we will use a really simple HTTP server, which will be using Python. So, let's explore the very first option, which is basically the default Apache web server that comes with Mac operating system. Now even before we start with the web server, I would like to point out the host file that resides in the OS X system. So, let's open this up in sublime text. So to do that, we will do subl, S-U-B-L, to invoke the sublime text, and the host file resides in the folder /private/etc/hosts. And, when we open up this file, it might have been some kind of default settings, but it basically defines the URLs that you can access when starting up the Apache web server. The second file in conjunction with the host file is the virtual host file. So, let's open this up in sublime text as well. And, it resides in the folder /private/etc/apache2/extra/, and the file name is httpd-vhosts.conf. And here as you can see very simply, it will say the server name here, local host in this case, and it will say the document route. This is where our file index.html or the root file will reside, and the web server will be basically by default, serve up that page. Now just for our interest, let's open up the index.html in this folder called sites. So, I'll go onto the command line and say open, and then /index.html. So, when I open this file in the Chrome browser, you will notice that this is actually a static file and there is no protocol http here. Similarly, you can go ahead and define other server names and their corresponding document route. So, along with the host file and the virtual host file, the third file that will help us give more information about Apache server, is the Apache config file. So, to open this up it is under folder /private/etc/apache2/httpd.conf. And there you go, the file is open up and it is a pretty long file. Here, you will have lots of defaults as well as modules that are loaded. So, looks like we can go ahead and take a look at the localhost. So in order to start the default Apache server that resides in our Mac or OX system, the command to do so is sudo.apachectl, and then simply start. You can now come to the server name called local host, that was defined as the document root, and there you go. It is basically serving up the index.html that is residing in the site's folder or rather, the document root. Now if you want to stop it, you simply do sudo apachectl, and then stop. And now, when you come back to localhost and you refresh it, the browser will not be able to connect to the local host, because we are stopped to the server. Why don't we go ahead and look at the other server name, which is learn.localhost. Now obviously, my server is not running, so when I access learn.localhost, the browser will not be able to connect with it. Why don't we open up the document on the sites/learn in our sublime text. Now, it is completely empty as of now. Let's try to start the Apache server. When you start it and you go to the browser. Yes, the server is running, but because there is no start file, you will see there's an empty index. Let's quickly create a very basic index .html file. Why don't we serve a very simple jQuery file from the CDM. Now, when I refresh, it is obviously empty because we are only referring to the script file. But now, when you query jQuery with a dollar sign, yep, jQuery is available. Now notice here, when I try to open the Sites folder once again and go to the folder Learn, and then I'll open up index.html as a static file. Notice that I will get an error because it fails to load the cdnjs jQuery file. Well, this is because I am calling a protocol relative URL. And, because it is relative, it is referring to file://, instead of http://. Great, so that was very briefly, the default Apache that resides in the Mac operating system. Now, if you're not using Mac operating system, not to worry. We will go on to the second application called MAMP. Now for Windows, there is something very similar, which is WAMP. Basically, MAMP stands for Mac, Apache, MySQL the database, and the PHP the programming language. And, WAMP similarly stands for Windows operating system, a for Apache, m for miascule, and then PHP, the programming language. So, if you are on Windows operating system, do go ahead and play with WampServer. So, I have already installed the free version of MAMP. So, when you first start MAMP, it will give you this opening screen. So, why don't we go ahead and start the servers. Now before I start the servers, let me also go ahead and take a look at some of the files relevant. So, the very first file will be the same file, which is the host file. So, let me split the screen once again. This is the host file. Now, this was the virtual host file that we used for the default Apache and the Apache configuration file for a Mac operating system. Now, not to be confused, MAMP comes with its own virtual host file as well as the Apache configuration file. So firstly, let us open up the file which is the virtual host file for MAMP. So for this, I'll do sudo and subl to invoke the sublime text. And, this resides under applications and MAMP, under the folder conf/apache/extra, and then httpd, and then virtualhosts.conf. Now, if you notice, this file will. Obviously, look very much similar to the Mac operating system's virtual host file. Next, just for the sake of curiosity, let's go ahead and open up, MAMS apache configuration file, and that resides in the folder /Applications/MAMP/conf, and apache. And lastly, it is httpd.conf. And, there you go. Just like the default Apache configuration file for Mac OSX system, there is also such file for MAMP. Now, since my local host document root is also the sites folder, it should fire up the same index.html. So, I will go back to the MAMP and start the servers. Now in this case, it will run not only Apache, but also the MySQL server. Well for this video, I will not need MySQL server, but just Apache. And, there you go, the local host is running. Lastly, we will go through a very simple web server, and this is by Python programming language. It is called Simple HTTP Server. To make Simple HTTP Server run, we first have to ensure that we do have Python programming language installed in our system. And next, all you need to do is go to the right folder, and ensure that you have a file. So, let's say index.html. And inside the file index.html, let's just say Hello world! with simple SimpleHTTPServer! Now, all we need to do is come back to our desktop, and then we can invoke the server with python -m, simple HTTP server, and then the port number. Let's just try 8000. And once it is running, notice that it will say serving HTTP on port 8000. So, we can come back to our browser. And when we open local host 800, yep, the index.html is being served up. Now, this means that no matter which folder I am, I can quickly start a web server. And, if there is an index.html file, this will be displayed as a starting file. Now, let's go one step further here. That command that we saw here is a pretty verbose command. Why don't we create an alias? We can go to either our bash rc file, or ZSHRC file, whichever config file you are using for your profile. And, we will basically alias to a word call server. And, this first server will basically open up the web address, which is local host port 8000. And similarly, we will pass on the Python command. And, once we do that all we need to do is go to any folder and show that there is a file called index.html, and just paste in server as the command. And notice here automatically, it will go the webpage, localhost:8000, and it will serve up the index study HTML. So next time you want quick web server to be running, you can either use SimpleHTTPServer or MAMP