Unable To Load Assets When Testing Website Localy

I have tested website on my server where everything works fine, its a simple html/css/js based website without any backend functionality, usually I am able to test these without an

Solution 1:

The problems you are having may be related to how you are opening your web pages in the browser.

You cannot just open them as files: c:\website\index.html

Instead, you should install a stack such as WAMP, or XAMPP, or EasyPHP. I recommend XAMPP

After installation, you just type in the browser address bar:

localhost

And you will see the rendered contents of index.html from the c:\xampp\htdocs folder. That folder (c:\xampp\htdocs) becomes your website, and it works exactly like a website. Resources will load correctly.

After installation, just clear out that folder, and copy all your web site .html and .php etc files into that folder. Use the same folder structure you have on your website. A CPANEL website's public_html folder is the c:\xampp\htdocs folder on your C: drive.

If you create a folder in there, such as dev, and put a file inside it called mytest.html, then in the browser address bar you can type:

localhost/dev/mytest.html

Another great trick is to give yourself a domain by editing the Windows hosts file. For example, you can use the ilya.com domain locally by editing this file:

c:\windows\system32\drivers\etc\hosts

Note that the file does not have an extension.

Then, inside that file, at the very very bottom, on a line of its own, type:

127.0.0.1     ilya.com

After saving that file, when you type in the browser address bar:

http://ilya.com

You will get the index.html file from your c:\xampp\htdocs folder. And if you type:

http://ilya.com/dev

You will get the index.html file from your c:\xampp\htdocs\dev folder.

It is very important to NOT FORGET about that file! It will forever prevent you from accessing the online http://ilya.com website. Of course, disabling it is as simple as commenting out that line (by putting a # in front) or by messing up the redirect, which is what I usually do:

127.0.0.1     xilya.com

(Deleting the leading x is easier than retyping the entire line). Coolest thing: the changes take place instantly, without rebooting -- or even bouncing the browser.

Resources:

Windows: XAMPP vs WampServer vs EasyPHP vs alternative

---

One other consideration that I should mention -- and it may not apply to you right now, but perhaps one day in the future -- is to try to match your online hosting account's version of PHP to the version of XAMPP (or WAMP/MAMP/LAMP/EasyPHP) that you install locally.

For example, as of this writing my hosting account serves PHP ver 5.3.29 -- but the current version of XAMPP is on PHP 5.5.19 or 5.6.3. Waaaaay to advanced. The last thing I want to do is program my site, upload it and have to debug the versionitis.

Older versions can be downloaded from the More Downloads link, which redirects to here:

http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/

To know what version of PHP your hosting account serves, just create a file on your site, such as: public_html/somefile.php. The contents just need to be these two lines:

<?php
phpinfo();

When you browse to that file: http://mydomain/somefile.php you will see a page full of PHP config info, with the PHP version prominently displayed at top, in bold. Of course, you can do the same on localhost (that is, in the c:\xampp\htdocs folder).