Automatically adding SourceMap headers for JavaScript requests - javascript

I've started playing around with SourceMaps and am wondering if there's a way to automatically set the appropriate header automatically if a .map file exists for a JavaScript request using .htaccess instead of having to modify the original JavaScript file.
I already do something similar to serve minified JavaScript if it exists and I'm not debugging:
RewriteCond %{REQUEST_FILENAME} \.(php|js)
RewriteRule . - [E=DEBUG:true]
RewriteCond %{ENV:DEBUG} !^true$
RewriteCond %{REQUEST_URI} ^(.+)\.js$
RewriteCond %{DOCUMENT_ROOT}%1-min.js -f
RewriteRule . %1-min.js [L]
I guess it basically boils down to: how can I add an extra HTTP header if a certain file exists for a certain type of request?
UPDATE
The solution is as follows:
# If serving minified js and a SourceMap file exists, send appropriate header
RewriteCond %{REQUEST_URI} ^(.+-min\.js)$
RewriteCond %{DOCUMENT_ROOT}%1.map -f
RewriteRule . - [L,E=SOURCE_MAP:%{REQUEST_URI}.map]
Header set X-SourceMap "%{SOURCE_MAP}e" env=SOURCE_MAP

See edit made by Nev Stokes above for the final solution
RewriteCond %{REQUEST_FILENAME} \.(php|js)
RewriteRule . - [E=DEBUG:true]
RewriteCond %{ENV:DEBUG} !^true$
RewriteCond %{REQUEST_URI} ^(.+)\.js$
RewriteCond %{DOCUMENT_ROOT}%1-min.js -f
RewriteRule [^/]+\.js$ %1-min.js [L,E=SOURCE_MAP:%{REQUEST_URI}]
Header set X-SourceMap "%{SOURCE_MAP}e" env=SOURCE_MAP
I could not test the Header part as my test server doesn't have mod_headers installed.

Related

Laravel 8 and running on the server

I have a problem with running Laravel 8 on the production server.
In the root directory I put the .httpacces file from the public directory and changed the name of the server.php file to index.php
Everything works except styles, js, and more
The contents of the .httpacces file
Options -MultiViews -Indexes
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Send Requests To Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
What do I have to change, add? Thank you very much for the hint.
You do not want to rename the server.php. Whether you are using Apache or nginx, make sure your Documents Root points to the public!! folder of your Laravel application. Never point it to the main directory. You can find configurations for nginx and apache online regarding laravel.

Dynamic Generated Folder Redirect to Php file in htaccess

I am generating a dynamic page on this dynamic "product" folder.
It is working fine category/product/heading-1
when I am visiting only the category/product/ folder it shows me an error
Not Found The requested URL was not found on this server.
#This file in the category folder
RewriteEngine on
RewriteRule ^product/([0-9a-zA-Z]+) product.php?u=&1 [NC,L]
how to redirect category/product/ to exmple.com/category/product.php
With your shown samples, could you please try following. Place your htaccess file inside category folder and make sure you clear your browser cache before testing your URLs. Also your url category/product doesn't have any further path so nothing to pass as query string, hence I have removed it from second rule in following.
RewriteEngine ON
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^product/([\w-]+)/?$ product.php?u=$1 [NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^product/?$ product.php [NC,L]

Problem when my React App is put on the web

I have created my React App, npm run build ... Put my file in filezilla,
but the problem is that I have this error
Not Found
The requested URL /main was not found on this server.
when I go to a page other than https://clickswinner.alwaysdata.net
What are you propose ?
Try creating a .htaccess file and put it at root of your server
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>
Google is your friend
Here is an article about how to fix 404 issues for Filezilla
https://medium.com/#christine_tran/deploying-a-simple-react-application-using-ftp-filezilla-dreamhost-1e5ff6b8abd6

.htaccess file won't work on my node.js app

I have the following .htaccess file located in the root directory of my node.js app:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+)$ $1.html [L,QSA]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*\.html\ HTTP/
RewriteRule ^(.*)\.html$ /$1 [R=301,L]
My website runs at www.mywebsite.com. When a form is submitted, the page is redirected to a success page:
res.redirect("/success.html");
The problem is, my .htaccess file isn't working properly. I am redirected to www.mywebsite.com/success.html, instead of www.mywebsite.com/success.
I have tried changing my node.js script to:
res.redirect("/success");
But then I get an error page. What am I doing wrong?
.htaccess is only for Apache servers, but you can try something like this:
nodejs equivalent of this .htaccess

In angular js after reloading page it say error on server 404 can not found the page after using $locationProvider.html5Mode(true);

I use
$locationProvider.html5Mode(true); to remove # from url
http://seagullinteractive.com/#/about :-its work after reload
to
http://seagullinteractive.com/about :- its not work dont now the problem
You need to create .htaccess file in your root directory.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
Need to put above rewrite rules. Then it will be fine. When you call http://seagullinteractive.com/about then your server will look for directory with name "about" which actually will not exist and you will get 404 as a result. You need to redirect to index.html(or whichever is your page that contains ng-app) if there is no resource found on server with requested URI.

Categories