website directory structure and file paths - web

I am attempting to make a small website with a directory structure like this:
rootURL/
landing/
aboutME/
common/
app1name/
app2name/
etc...
Within each of the sub folders are the directories css/ , js/ and html/ so I keep my pages and apps separate and my file types separate within them, which seems sensible to me.
My root page I want to load when some one goes to rootURL.com is
rootURL/landing/html/landing.htm
1) Is this something which can be typically configured on a web server?
2) And is it possible to reference paths to css and script files in different directories? For example my lanidng page rootURL/landing/html/landing.htm , can it use the line
<script type="text/javascript" src="rootURL/common/jQuery.js"></script>
and if not is there anothr way to access files in other directories?
Thanks

All of that is possible. For your landing page, will either have to have a redirect page in the root directory, use URL rewriting, or simply put your home page in the root directory.
To reference paths you can use
<script type="text/javascript" src="/path/to/file.js">
or
<script type="text/javascript" src="../relative/path/to/file.js">
or
<script type="text/javascript" src="http://rootURL.com/path/to/file.js">

Related

My html cant find my linked javascript event though its in the correct directory, very stumped here

where I link index.js
<script src="/assets/js/index.js"></script>
Folder Directory is such
assests
-css
--style.css
-js
--index.js
enter image description here
Error Im getting
index.html:25 GET file:///assets/js/index.js net::ERR_FILE_NOT_FOUND
I guess you are using an express app(by the tag in question). The static resources such as your javascript, css, images, etc. should be inside the public folder which gets served on running the application. Could you try moving the assets folder inside the public folder and then have a script tag pointing to that resource.
Maybe it helps to remove the first slash:
<script src="assets/js/index.js"></script>
Or startend with a dot
<script src="./assets/js/index.js"></script>

Connecting to stylesheet that is several directiories above

I am making a Web Project using NodeJS and in which I'm linking to the stylesheet in the header file, which I've included in all of my EJS files
The location of the header file is as follows
root -> views -> partials -> header.ejs
The location of the stylesheet is as follows
root -> public -> style.css
I've used this line to link with the stylesheet in the header.ejs file
<link rel="stylesheet" href="../style.css">
Now, this stylesheet is being rendered in all pages, except for one.
Path of page where the stylesheet isn't working :-
/campgrounds/:id/edit
Other pages (where style.css is working properly) :-
/campgrounds
/campgrounds/new
/campgrounds/:id
What is the reason behind this and how to solve this
Best practice for linking to resources is to use absolute pathing which means start at the root and work up the structure.
By using / it will start at the root of your application directory.
<link rel="stylesheet" href="/public/style.css">

htaccess make alias and rewrite rule

I have html in /html/test-html/index.html here. There are also css and images like this one: /html/test-html/css/style.css
When I open index.html in browser styles and images are loaded correctly.
When I'm trying to render it's contents by php echo function I get problems with 404 error, because paths in index.html and style.css are relative, like this one:
<link src="css/style.css" rel="stylesheet" type="text/css" />
So when I echo index.html contents in my script (i.e. by url like http://localhost/product1) browser tries to find style.css by this url:
http://localhost/css/style.css
But actually file is located in
/html/test-html/css/style.css
I think that good idea is to simulate URL like browser in http://localhost/html/test-html/, but actually we are in http://localhost/product1 (with RewriteRule), but without a redirect.
In other words, I want browser to think that http://localhost/product1 is http://localhost/test-html and server to think that http://localhost/product1 is http://localhost/index.php?r=product/view&id=1
Is it possible?

Node.js server files above root directory

I have the following directory structure:
limejs/
closure/
closure/
goog/
base.js
projects/
myGame/
myGame.html
server.js
I call "node server.js" in "cd limejs/projects/myGame". When I serve myGame.html, I want base.js to be included. Here's the script include from myGame.html:
<script type="text/javascript" src="../../closure/closure/goog/base.js"></script>
The GET attempt is on localhost:8080/closure/closure/goog/base.js. I know that if I put my server code a couple of directories higher, I can access the base.js via:
<script type="text/javascript" src="/closure/closure/goog/base.js"></script>
But I'd like to keep all of the "myGame" related code in the same folder while experimenting. Is this possible?
You're probably using express.static(dir). Files are only served from dir down, everything else is invisible. Same goes for any other static file server (Apache, ningx, etc).
You need to either serve files from higher in the directory tree, so that closure/closure/goog/base.js is accessible (from limejs in this case), or copy/link the files into your game folder.
If you're on linux/mac, ln -s closure/closure projects/myGame/closure should do the trick, then you can include <script src="closure/goog/base.js">.

rewrite friendly url with .htaccess issue

I want to make Friendly URLs, but when I try my PHP code works correctly but my CSS and JS files are not loaded correctly. It tries to get these files from different path.
I'm using WAMP, and I've created bsp directory for my project.
There are two folders for js and css files and I've used the css and js files in my php pages like
< script type="text/javascript" src="js/menu_config.js">< / script >
< link rel="stylesheet" type="text/css" href="css/menu.css" / >
and the .htaccess file code is here:
RewriteEngine On
RewriteRule ^products/([0-9]+)_([0-9]+).html$ products.php?maid=$1-$2 [L]
But when I browse through url http://localhost/bsp/products/2_7.html,
It does not load the js and css files.. at that time the path of js and css files becomes
http://localhost/bsp/products/css/menu.css etc
the css and js path should be http://localhost/bsp/css/menu.css.
I hope anybody will understand this problem as soon as possible.
This is just to do with your paths when including the files. You're currently using relative links, which means that "js/menu_config.js" will be appended onto the current URL.
Instead, you need an absolute path. By prepending your URLs with a /, you denote that you want to specify the path relative to the document root (rather than the current subdirectory). I'll leave out what the paths should be for now, filling them in is an exercise for you.
This should work
< script type="text/javascript" src="/js/menu_config.js">< / script >
< link rel="stylesheet" type="text/css" href="/css/menu.css" / >

Resources