skip to Main Content

Let me start by saying that my knowledge of Apache is almost none, so I apologize if I am not using the correct terminology.

I have a website written in Vue, and the routing is taken care by Vue Router. In their documentation, they specify that in order for the router to work correctly, you have to put this in the .htaccess file of your website:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

From what I have been able to understand, all requests are sent back to the index.html file which will take care of loading the correct component based on the path.

My goal is to now allow my website to have a path (let’s say /documents) which is not picked up by Vue, but instead shows the contents of the directory and allows you to both navigate and download the contents (Like this).

I have tried a few ways, but they all return a 403 or 500 (possibly due to a mistake in my config). I understand that I need to add a RewriteRule but all of those that I tried return weird errors.

Thanks in advance

3

Answers


  1. Chosen as BEST ANSWER

    In the end, after looking through the docs, I was not able to understand how to set it up. I found this page, and using option #2 I was able to get the directory to at least show up.

    I then added the auth to the folder through the .htaccess file and added the .htpasswd file with the username/password combo

    TLDR

    1. Create the folder in the location you want. In my case it was in httpdocs/documents
    2. Create a .htaccess file where you put the following contents:
    # Omit this section if you do not need the auth
    AuthType Basic
    AuthName "restricted area"
    AuthUserFile /path/to/your/.htpasswd
    require valid-user
    
    Order allow,deny
    Allow from all
    Options +Indexes
    
    1. Create the .htpasswd file in the location you specified above. To generate the username/password combo I used this

    Any corrections are welcome!


  2. You can have multiple rewrite rules based on what the RewriteBase is . In your current set, the rule is applying to the root of the host.

    You can add another rule with RewriteBase /documents/. More info: What does RewriteBase do and how to use it?

    Login or Signup to reply.
  3. I recommend reading the docs: https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html

    The RewriteCond directive defines a rule condition.

    So here a dirty explanation:

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    

    So your RewriteConds says that if the given path/url isn’t a file (!-f) and not a directory (!-d) then the next rewrite rule (RewriteRule . /index.html [L]) takes action.

    RewriteRule . /index.html [L]
    

    “.” is a wildcard, so all urls will be redirect to index.html.
    The [L] flags stops the execution (https://httpd.apache.org/docs/2.4/rewrite/flags.html#flag_l)

    The RewriteRule ^index.html$ - [L] stops the execution if the url is index.html.

    So, your rewrite rule fulfill your requirements and seems correct.

    When you get a 403 you maybe need to add Options +Indexes to your config or htaccess.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search