Welcome to Cause Coders
Join a growing community of coding enthusiasts like you. Sign up today!
Sign Up

Get Your Text Editor to Display Project Files On Localhost Like PHPStorm and other IDEs

TopSilver

web designer
Administrator
Joined
Mar 10, 2017
Messages
244
Likes
37
#1
Hi guys. This is a simple tutorial to do just what the title says, get your project files to display on localhost and not just serve the file through your hard drive. When I downloaded and used the text editor "Sublime Text" which is now becoming very popular with it's new release of Sublime Text 3, I was disappointed that the files were not served over localhost because I was used to full fledged IDEs like PHPStorm and WebStorm.

Well this tutorial will solve that.

First you need to download NodeJS so you can use the NPM package manager. This is just a simple way of downloaded useful tools and packages from the GIT Bash or other command bash you may use that is compatible with the node package manager. I also suggest installing the GIT Bash as it works just like CMD except that are tons of extras it has like NPM compatibility and other useful features for installing dependencies and items like NPM packages. CMD is not compatible with NPM unless you put in your exact nodejs path and environment variables which is not covered in this tutorial. GIT Bash is a much better command line interface for you to use.

Here are the downloads to them:

http://www.nodejs.org | NodeJS

https://git-scm.com/downloads | Git Bash

After you download these you are now set to install any package like the one I'm about to teach you to install for your web development projects. A lot of people use NPM for javascript libraries and dependencies for their applications but it serves a much greater purpose.

Okay enough of the small talk.

Now simply run this command in git bash:

Code:
npm install -g simplehttpserver
After you do this it will take a couple moments so be patient but will tell you it was successfully installed. The -g flag is to install it globally so it can be used anywhere or in any directory you set it to in the future. The package is called "simplehttpserver". There's another one that also works and is the same except it's called simple-http-server and has the dashes included in the package name. You can also use this one too. Either one works fine (just keep in mind if your following this tutorial were using the one without the dashes). But here's the NPM reference page for both:

https://www.npmjs.com/package/simplehttpserver
https://www.npmjs.com/package/simple-http-server

Now you will need to 'cd' into the project directory on your computer. Do that by opening git bash and typing this command. Be sure to replace /path/to/project/folder with the path to your project you want to server over localhost:

Code:
cd path/to/project/folder
Once you are inside your projects directory the rest is very simple.

Just type in this command:

Code:
simplehttpserver
You simply type the name of the package being 'simplehttpserver' inside your projects directory. If done correctly it will say it's listening for your project over port 8000.

If you want to kill the process simply use these 2 keys:

Code:
CTRL + C
That will kill the process and open your port back up for use.

If you want to use a different port than the one listed type this command inside your projects directory. In this example I'm using port 1500. Just replace with your desired port:

Code:
simplehttpserver -p 1500
To view your project is very simple. Now you just type in localhost with the port your using. So if were using port 1500 this is what we type in our browser window.

Code:
http://localhost:1500
That will bring up our project index.html file. If you have other files that need to be served you would simply use a back slash after the port number and type the files name in conjunction with your project. So if we have a file named "p1.html" under the directory "/pages", we type in this:

Code:
http://localhost:1500/pages/p1.html
You would repeat the process for any other file other than index.html

And there you have it. Note that this will not enable live reload like liveserver some people use. This is actually used mostly for those who want the same thing as "live server" but don't want live reloading.

If you want live reloading install live server by typing in this command in git bash.

Code:
npm install -g liveserver
Then cd to your project directory like previously instructed and type in the name of the package just like previously with simple http server. So you would type inside the project directory:

Code:
liveserver
That's literally all you'd have to type. Unlike the previous simplehttpserver this one will actually load the browser automatically once typing this command. For the simplehttpserver you need to navigate by default to the localhost:8000 for index.html and put the directory files name in for other files.

Also liveserver automatically reloads the file being served and shows you the changes you've made to your document as well as css changes live. Some people like me prefer not to debug their file live all the time so both our great options.

Anyways good luck with setting this up. It's very simple to do and may seem like a lot but it's a piece of cake if you used the npm package manager before. Just having to install that and git bash is the only issue that may take you a couple moments to go fetch.

If you need any help just ask and I'll be sure to help you. Some text editors like Visual Studio Code have live server as a package you can install and will server the file by right clicking and selecting an option to open the file with live server.

I recommend simplehttpserver if you don't want live reload and liveserver if you do.

You can leave questions below.

EDIT: If you use sublime text they have a neat plugin called Sublime Server that does the same thing as simplehttpserver from the text editor. Check it out if you want.
 
Last edited: