I’ll try to give you a little tutorial.
On the difference of URLs and file system paths
You first need to know that there is a difference between URLs and file system paths. While both can describe the location of a file, the server uses primarily file system paths while the client does only work with URLs. So the client has no clue about the actual file system and how the server processes a requested URL. And it doesn’t need to, because that’s what URLs are for.
So any location expression in HTML documents, CSS and JavaScript files is treated by the client as an URL reference. Relative URL references (any URL that does not start with the URL scheme) need to be resolved to absolute URLs. That’s done on the base of a base URL which is the current resource’s URL if not specified otherwise.
See the chapter Reference Resolution of URIs for more information.
How to properly reference external resources
So clients operate on URLs while the server operates on file system paths. Keeping that in mind we need to use proper URL references that describe the location of a resource independent from the location they are used in.
Assuming that we want to turn the platform dependent URL path /article?id=12345
into the independent URL path /articles/12345
, we need to make sure that we use URL references that work on both URLs best. Let’s see how common URL references like one that refernces our style sheet file are resolved:
base URL path | URL reference | resolved URL path
------------------+------------------+------------------------
/article?id=12345 | css/style.css | /css/style.css
/articles/12345 | css/style.css | /articles/css/style.css
/article?id=12345 | ../css/style.css | /css/style.css
/articles/12345 | ../css/style.css | /css/style.css
/article?id=12345 | /css/style.css | /css/style.css
/articles/12345 | /css/style.css | /css/style.css
So it seems that ../css/style.css
and /css/style.css
both are suitable in this case. But when change the base URL path of our project to /foobar/article?id=12345
and /foobar/articles/12345
, we get a complete different result:
base URL path | URL reference | resolved URL path
-------------------------+------------------+------------------------
/foobar/article?id=12345 | css/style.css | /foobar/css/style.css
/foobar/articles/12345 | css/style.css | /foobar/articles/css/style.css
/foobar/article?id=12345 | ../css/style.css | /css/style.css
/foobar/articles/12345 | ../css/style.css | /foobar/css/style.css
/foobar/article?id=12345 | /css/style.css | /css/style.css
/foobar/articles/12345 | /css/style.css | /css/style.css
Comparing both results, we see that the relative URL with an absolute URL path (beginning with /
) is the best choice for both. But we need to adjust the URL reference by prepending the base URL path to our project (/foobar/
), using /foobar/css/style.css
.
How to construct a RewriteRule
Now that we want to rewrite request of /articles/
<article ID>
to /article?id
<article ID>
, we need to write a rule that does this:
RewriteRule ^articles/([0-9]+)$ article?id=$1
For more information see for example A Deeper Look at mod_rewrite for Apache that explains the technical details of mod_rewrite in more detail.