This website uses Google Analytics and Advertising cookies, used to generate statistical data on how visitors uses this website (with IP anonymization) and to deliver personalized ads based on user prior visits to this website or other websites. [read more]
These cookies are disabled by default until your Accept/Reject Consent.
The Consent can be changed at any time by accesing the ePrivacy button located at the bottom of every page. Enjoy your visit!



How to prevent 404 not found for css and javascript .map files

When creating web apps or even websites, errors happens, and we need to debug and solve them.
Usually, for a standard Apache server, the server errors are logged and we have access to this log. And we need this file empty (no errors at all), don't we?

One of these errors can be the 404, the not found one. It informs us that the server tries to access a file that doesn't exist. And is fine, if it's a file, we can upload it to the server and the problem is solved. Also, we can instruct the server to load another location for the missing file or resource (rewrite procedures).

The 404 not found for some "strange" .map files (.css.map, .js.map)

Why the server can't find them (and generate the 404 error), what are these used for and when the error appear?

The server can't find them because these are not on the server :)
What are these files? JavaScript/CSS source maps for code created with preprocessors like Saas, Less, etc. and used by the Chrome DevTools for debugging, live editing on the Saas/Less source code.

A lot of code vendors (jQuery, Bootstrap, Font Awesome, etc.) regularly used in web development, used the technique above, so when we use them, we should also add the corresponding .map file alongside the primary css/javascript one. If you include bootstrap.min.css in your project, the corresponding bootstrap.min.css.map should also be available. If not, the 404 not found error will be logged for bootstrap.min.css.map every time we make debugging using Chrome DevTool.

No more 404 not found for javascript/css source maps

To prevent the 404 error for javascript/css source maps, even if bootstrap.min.css.map (anyfile.map) doesn't exist, this simple trick will do the job:

1. Create an empty file on the document root, named 404.map
2. Add these lines to the .htaccess file:

RewriteEngine On
Options +FollowSymlinks

# Prevent 404 Not Found for javascript/css source maps
RewriteCond %{REQUEST_URI}  (\.map)$
RewriteRule (.*)  404.map [QSA]

That way, every time the Chrome Dev Tools tries to access the corresponding map file, the empty 404.map file will be provided, no more errors, no glitches in DevTools or server/app functionality.

label_outline

Share this post on your favorite networks.
© Copyright 2017 b247.eu.org | Just another information technology blog - All Rights Reserved