If you are new to web development, one of the things you may try is simply opening a local file with your web browser. In other words, you make a file, like cat.html, save it to your desktop, then do a File/Open in your browser to view it:
This is a common way to learn web development and it's even what Mozilla Developer Network suggests in its Learning Web Development tutorial.
This works... but what you may not be aware of is that there are multiple web features that do not work when viewing HTML files loaded via File/Open (when you see file:// in the URL). For example, geolocation is blocked in Chrome when run on a page opened this way.
I was not able to find a precise list of things that are blocked, but in general, you should probably avoid the issue as a whole and run a local web server. I understand that may be a bit daunting, but here are a few options to consider:
- Apache is probably the most well known web server out there. It's the easiest to install (and comes pre-installed on Mac), and the quickest to get up and running. To be clear, you do not need to become an expert with Apache! You can literally install it and then drop files in the folder set up to be the web root. Windows has IIS, and I believe it used to come pre-installed, but I'm not seeing it on my Win10 desktop, so maybe it isn't anymore.
- httpster is my tool of choice, but it requires npm and command-line usage that may be a bit much for someone really new. The benefit of httpster is that I can make a folder, put some random web crap in it, then fire up a web server directly from that folder. It's fast and convenient for testing. I wouldn't recommend this for a new developer on their first day of learning to build web pages, but I'd tell them to bookmark it for later.
- Another option I see mentioned quite a bit is SimpleHTTPServer for Python. Python is installed by default on Mac, but not Windows. If you have it though, you can open your terminal, change to the right directory, and then just type
python -m SimpleHTTPServer. Like the httpster suggestion though, it may be a bit overwhelming for new developers. (Although I hate to break it to you, you will need to get more comfortable with the command line. You won't need to be a wizard, but basic navigation and 'tool running' is something you'll need to become familiar with.)
Ok, so I'm going to ramble a bit. As someone who presents to and generally focuses on new developers, I'm always trying to keep things as simple as possible. I think a lot of people in our community greatly underestimate how overwhelming, confusing, and just difficult, many things are to people entering this field. Sure, you can "just Google it", but if you aren't at a point yet where you even know what to Google, you're stuck.
I 100% recommend the Mozilla Developer Network tutorial I mentioned earlier, and as far as I know, you can do the entire thing with just File/Open, but at least be aware that you're going to need to switch to using a local web server soon and prepare yourself for that install. (And heck, if you have local friends/coworkers, ask them to install it for you. Watch them, but I think it's totally fair to get some help on this step for now.)
Archived Comments
As an alternative for httpster, another simple npm-installed easy server is http-server (https://github.com/indexzer.... If one already has npm installed, simply install it globally:
> npm install -g http-server
Then run it from any directory and it will serve the contents of that directory as the root.
> npm http-server
If you are changing the files it is serving, you will probably want to disable the caching by setting the "-c" param to -1, so it always serves your changes:
> npm http-server -c-1
Also, while these other choices are all just as easy, if someone wants to activate IIS on Windows 10, they can go to "Programs and Features" of the legacy/Win32 Control Panel and then choose "Turn windows features on or off". See screen shot below:
https://uploads.disquscdn.c...
Some of those things aren't supposed to work from http neither, you need https. Not sure if self signed certificate is allowed
I've been recommending Mongoose Binary By Cesanta. It's portable (no installation required) and works w/Windows or Mac. It's very easy to use and has many built-in features (IP-based ACL, File blacklisting, Resumed downloads, Custom error pages, CGI, SSL Server Side Includes, WebDav, Experimental TLS 1.2, PHP, SQLite).
https://www.cesanta.com/pro...
Ah, there it is - thanks.
That looks cool. At first I thought you meant the Mongo wrapper for NodeJS.
For HTTPS delivery content, there's also Web Server for Chrome extension which can serves a local folder on the network. Really useful when you work with service workers, only working with HTTPS.
https://chrome.google.com/w...
Don't forget though that those things work on http://localhost.
So you say that the things that require https to work also work when using http://localhost? Do they also work if it's a local IP instead of localhost?
Afaik, just localhost, not a local IP. This is specifically so people can test on a local machine.
For simple http server like mentioned before I also like http-server and live-server. I like that live-server can spin multiple ones and use different ports where I think http-server fails if one instance is already running. Either way both are good if you are not comfortable with Apache or IIS, but then I would say, help yourself and get good with them as it is a valuable part of your tool set.
https://www.npmjs.com/packa...