virtual host not able to access file outside document root - apache

Question

I have setup virtual hosts for separate projects on my localhost on my macOS. Here is the httpd-vhosts.conf file:
<VirtualHost *:80>
ServerAdmin webmaster#localhost
DocumentRoot "/Users/Sammy/Sites"
ServerName 127.0.0.1
ServerAlias localhost
ErrorLog "/private/var/log/apache2/localhost-error_log"
CustomLog "/private/var/log/apache2/localhost-access_log" common
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Users/Sammy/Sites/workspace/abc/public_html"
ServerName abc
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Users/Sammy/Sites/workspace/xyz/public_html"
ServerName xyz
</VirtualHost>
I have also updated the list of hosts. The problem is, when I access my sites using this link, The sites are not able to load the css/js files & images present outside the 'public_html' directory, while it works if I open it via localhost path..
I come from an ubuntu environment, The apache directory structure is quite older on mac! can anyone help me with this..
Thanks

Answer 1

The sites are not able to load the css/js files & images present outside the 'public_html' directory
That is rather the point.
The DocumentRoot is the root of the website. Everything under it is part of the site.
By putting something in the DocumentRoot you are giving it a URL and making it available to be requested over HTTP.
An HTTP server isn't designed to expose every private file on your whole hard disk to the world. That would be awful.
If you want to give a file a URL, then put it in the DocumentRoot (or look at the Alias directives).