rewrite friendly url with .htaccess issue - .htaccess

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" / >

Related

vite base path doesnt respect dist-directory

I am using vite purely as dev server with a backend server that does the file serving for me and has no connection to vite itself. My vite application lives under nested path. Thats why I set the base-url as specified in the config to '/my/path/'. This works well and everything is served correctly.
Once I run build, it creates a dist folder with a manifest file. My index HTML that is served by the backend server either includes the vite devserver in dev more or loads the main.ts as specified by the maninifest.json { "src/main.ts": { "file": "assets/main.b3ed3483.js", ...}}. Therefore my index HTML looks somewhat like this:
<?php if($dev): ?>
<script type="module" src="http://localhost:3000/#vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.ts"></script>
<?php else: ?>
<?php $entry = parseJson('dist/manifest.json'); /* pseudocode */ ?>
<link rel="stylesheet" href="/my/path/dist/<?= $entry.css[0] ?>" />
<script type="module" src="/my/path/dist/<?= $entry.file ?>"></script>
<?php endif ?>
Now, I have the problem, that whenever a module is imported, it tries to load it from /my/path/assets instead of my/path/dist/assets. I tried changing the basepath to /my/path/dist/ but now obviously the path arent resolved in dev correctly. What do I have to do to make this work?
I am not sure if I completely understand the src paths in your script tags but I think this should work, though you might need to make some changes to make your src paths match.
Option one: If you are using linux, I would create a symbolic link from /my/path/ to/dist/assets/ e.g. ln -s -r ./dist/assets/ assets (-s for symbolic link and -r for relative links). This will provide two paths to the same directory, one from /my/path/assets and one from /my/path/dist/assets/.
Option two: use a relative base path i.e. set base in your vite config to ''. Note: in vite 2.x there is an issue where if you have multiple entry points the asset path will be incorrect. There is a fix merged for vite 3.0.

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?

website directory structure and file paths

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">

Resources