Why would I want to do that?

Well due to security concerns and restrictions in modern browsers it is preferred to access files with http:// protocol instead of the file:// protocol.

Let’s see how to do that in a local development environment.

 

Node.js

First thing is first, install Node.js, you can find all necessary info online.

Node.js is a server framework/runtime used to run JavaScript applications on Google Chrome’s JavaScript V8 Engine.

The framework runs JavaScript applications on a server, basically, you get JavaScript on the backend.

It’s free, open source and runs on various platforms  (Windows, Linux, Unix, Mac OS X, etc.).

So why do we need it? Well, for its node package manager (NPM) which comes bundled with Node.js.

 

Node Package Manager (NPM)

Node Package Manager (NPM) is two things, repositories for Node.js packages/modules and a command line utility to install Node.js packages, do version management and dependency management of Node.js packages.

NPM is bundled with the Node.js installation.

The NPM online repositories can be accessed here.

 

Http-server

This is a simple command line HTTP server for local development, testing, and learning.

To get started you first install the server with the following command:

npm install http-server -g

Then run the server in the root of your project from the command line:

http-server

This is all you need to do to run your project locally in an HTTP server.

Now you can access your project files with this URL:

http://localhost:8080

More info here.

Httpserver

This is another option for a local HTTP server.

To get started you first install the server with the following command:

npm install -g httpserver

Then run the server in the root of your project from the command line:

httpserver

This is all you need to do to run your project locally in an HTTP server.

Now you can access your project files with this URL:

http://localhost:8080

More info here.

 

Lessons learned

Modern web development is pretty awesome. There are tons of new things to learn and obviously tons of new issues to resolve.

One of those issues is file:// vs http:// access to files on a local development environment.

The solution is obviously simple, to use an embedded server,  this way you get as close as possible to a real HTTP server environment.

However, it took some time to figure out the issue ergo the existence of this article 🙂

Spread the knowledge