Clean URLs and Apache httpd: use .htaccess

[Martien]

By default, Framework generates “clean” URLs by dropping the .html extension from page links.

• https://observablehq.com/framework/getting-started
• https://observablehq.com/framework/project-structure

If you want Apache’s httpd accept clean URLs, add the following to .htaccess in dist:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

Maybe add this to the tip?

[Fil]

Thanks for the suggestion, but it seems out of scope. We can't document everything that Framework interoperates with: HTML, CSS, DuckDB, node modules, etc.

Things that are adjacent to Framework and not documented in a good way anywhere else can however go into the Q&A (or tips & tricks) section of the community discussions? Do you think it's the case for this tip?

[Martien]

I agree. It’s something I ran into. Took me some time to figure out and fix. Maybe of help to others., yet don’t know if it is. Apache has 10+% market share. Maybe FAQ is best place. Discussions maybe too specific?

Anyway, put it where you think it makes most sense or just ignore it.

[Fil]

Thanks. moving this to Q&A.

[Martien]

Context – …you are creating a project in Observable Framework.
Wish – You want to host your framework using Apache, also using clean URLs.
Therefore – Inside a <VirtualHost *:80> block, add:

#-----------
# Clean URLs
# /hello can also be accessed as /hello.html, and / can be accessed as /index and /index.html.
# By default, Framework generates “clean” URLs by dropping the `.html` extension from page links.
# Not all webhosts support this.
#-----------

#LogLevel debug rewrite:trace8
#ErrorLogFormat "%M"
#ErrorLog "/log/apache-clean-urls.log"

RewriteEngine On

# Redirect URIs with trailing slashes except root `/` to remove the slash
RewriteCond %{REQUEST_URI} !^/$
RewriteRule ^(.*)/$ /$1 [R=301,L]

# Special case: rewrite root `/` to `/index.html`
RewriteRule ^/?$ /index.html [L]

# Skip rewriting if the requested resource is an existing file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# Skip rewriting if the URI contains a file extension
RewriteCond %{REQUEST_URI} !\.[^/]+$ [NC]

# Skip rewriting for the root URI `/`
RewriteCond %{REQUEST_URI} !^/$

# Rewrite any URI (e.g., /example or /example/) to /example.html
RewriteRule ^(.*?)/?$ /$1.html [L]

Put these rewrite rules in http.conf – requires root access to the server – rather than .htacces for:

• better performance and centralized management;
• stricter control over configuration changes; and
• better security.

[Martien]

Afterburner: npm run build seems to completely remove dist and generate a new dist, losing any other files you may have put in there manually, like .htaccess. Also, a .htaccess in src does not get copied to dist during build. Therefor, better rewrite in http.conf.

[Fil]

yes; alternatively, add .htaccess to the dynamicPaths option.