htaccess is preventing my CSS and Javascript from loading Topic is solved

[krishunt]

I'm having some trouble with my new Joomla 4 website that I think is somehow related to my .htaccess file. Here's what I did:

• Uploaded my new site to a subdirectory ("mySubdirectoryName" in this example) on my remote server

• Enabled Search Engine Friendly URLs

• Enabled URL Rewriting

• Renamed htaccess.txt to .htaccess

• Changed "RewriteBase /" to "RewriteBase /mySubdirectoryName" in the .htaccess file

As a result, some of the CSS and all of the Javascript are not being loaded. The navbar at desktop size looks wrong, the dropdowns are fully expanded on page load, and at mobile size, clicking the navbar toggler button does nothing, etc.

If I disable the .htaccess file, then none of these issues happen, but then of course my links are all broken. Or if I disable the .htaccess file, SEF URLs and URL Rewriting, then everything is perfect, except then I don't have SEF URLs. Any idea what's going on? How is .htaccess preventing my CSS and Javascript from loading?

[krishunt]

I think I may have figured it out. When I remove this chunk of code at the end of the .htaccess file, everything works properly.

Code: Select all

## GZIP
## These directives are only enabled if the Apache mod_headers module is enabled.
## This section will check if a .gz file exists and if so will stream it
##     directly or fallback to gzip any asset on the fly
## If your site starts to look strange after enabling this file, and you see
##     ERR_CONTENT_DECODING_FAILED in your browser console network tab,
##     then your server is already gzipping css and js files and you don't need this
##     block enabled in your .htaccess
<IfModule mod_headers.c>
	# Serve gzip compressed CSS files if they exist
	# and the client accepts gzip.
	RewriteCond "%{HTTP:Accept-encoding}" "gzip"
	RewriteCond "%{REQUEST_FILENAME}\.gz" -s
	RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

	# Serve gzip compressed JS files if they exist
	# and the client accepts gzip.
	RewriteCond "%{HTTP:Accept-encoding}" "gzip"
	RewriteCond "%{REQUEST_FILENAME}\.gz" -s
	RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]

	# Serve correct content types, and prevent mod_deflate double gzip.
	RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
	RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]

	<FilesMatch "(\.js\.gz|\.css\.gz)$">
		# Serve correct encoding type.
		Header append Content-Encoding gzip

		# Force proxies to cache gzipped &
		# non-gzipped css/js files separately.
		Header append Vary Accept-Encoding
	</FilesMatch>
</IfModule>

[krishunt]

Yes, I see this message near the top of the .htaccess file now:

Code: Select all

# If your site looks strange after enabling this file, then your server is probably already
# gzipping css and js files and you should comment out the GZIP section of this file.

So Joomla 4 ships with a new version of the .htaccess file than the ones I have been dealing with for over a decade heretofore. Good to know.

[Webdongle]

site.com/mySubdirectoryName is the site root of your Joomla.
By putting 'RewriteBase /mySubdirectoryName' you are telling it to look for site root/mySubdirectoryName
Which equates to site.com/mySubdirectoryName/mySubdirectoryName

More often than not you do not need to uncomment RewriteBase so it should be #RewriteBase /
But if it is needed to be uncommented then it is simply RewriteBase /