Having an angular2 app on heroku, I would like to activate gzip compression. As outlined here, I add a .htaccess at the root of my project with the following
AddOutputFilterByType DEFLATE text/plain
...
I compiled my app with ng build --prod so I have all the gz needed. I also put the .htaccess in the dist folder created by the build in the case it should be there. My app runs well but the gzip compression does not work (checked with this link).
Some of you have faced this issue before?
EDITED: Heroku does not accept .htaccess. To activate gzip compression, you only have to add the following lines to your web.js:
var compression = require(‘compression’);
app.use(compression());
Related
TLDR: How to use static brotli compression on Vercel for static angular app? Is there a way to add rewrites like apache to a Vercel app?
Maybe any other way to implement static brotli?
Moving from (apache/ Ubuntu EC2) to Vercel to host my static Angular application with no backend. I used static brotli and pre-generated .br files alongside the normal .js,.csv,.json etc. files. With this my application goes from 12.7MB to 1.5MB but using dynamic compression is not feasible as I have some huge csv,json files in my PokeDex Application and compressing for every request increases the Waiting for server response delay by a lot.
For apache, it was easy as I just used rewrites to serve .br files using the mod_rewrite module as explained here in mod_brotli (Serving pre-compressed content) documentation page.
<IfModule mod_headers.c>
# Serve brotli compressed CSS files if they exist
# and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.css" "$1\.css\.br" [QSA]
# Serve brotli compressed JS files if they exist
# and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.js" "$1\.js\.br" [QSA]
# Serve correct content types, and prevent double compression.
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli:1]
RewriteRule "\.js\.br$" "-" [T=text/javascript,E=no-brotli:1]
<FilesMatch "(\.js\.br|\.css\.br)$">
# Serve correct encoding type.
Header append Content-Encoding br
# Force proxies to cache brotli &
# non-brotli css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
While trying to create a hybrid nodejs app I came across the need to redirect all file requests to localhost:8080 during development. After some work with .htaccess I came up with this code that seems to work for files called in the header or footer of the page, but when a script calls a file the rules are not applied.
Here is the .htaccess code
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !/(wp-)/*
RewriteRule \.(?:jpe?g|gif|bmp|png|css|js|ttf|woff|woff2|otf)$ http://localhost:8080%{REQUEST_URI} [L,R=302,NC]
</IfModule>
Thanks in advance for any guidance that can be given!
You can use environmental variables to use different url base in development vs production
here is a description on env variables from vue docs
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
essentially, you setup two files, .env and .env.production for production
in your .env
BASE_URL=http://localhost:8080/
and in env.production
NODE_ENV=production
BASE_URL=//
then in your code use something like
const instance = axios.create({
baseURL: `${process.env.BASE_URL}some-api/`,
// baseURL: process.env.BASE_URL + 'some-api/',
});
Then, when you're building for production, use
vue-cli-service build --mode production
otherwise, you can run the usual way to get the dev environment.
These values get parsed into the build, so in your production build, you won't see any localhost:8080 in the source code.
I am currently running Magento 2.1.14 and have enable gzip per the Magento documentation as well as the other well visited posts on this site. I have also doubled checked with my hosting provider that Mod_deflate is enabled on the server side.
In addition, I have a copy of my site on my local machine with same htaccess files as what resides on our live server.
On my local machine, simply enabling the apache module and then adding the htaccess code in the main htaccess file of the public_html directory works. All requests on my local site show headers that contain “Content Encoding: gzip”.
However, when live using https on our server, the gzip encoding seems to stop at the pub directory. NO content coming from the pub directory (pub/static and pub/media) shows and gzip encoding. The files on my local machine and live server are the same. According to my hosting provider, gzipped is enabled on their side and they believe that is has to do with one of the htaccess files in my file tree that is stopping the gzip encoding from happening.
I did a small test recommended by our hosting provider as well, and tried to set up an extra directory in the public_html directory on both my local machine and the live server to test if the gzip encoding would work. On my local machine, I can visit the directory and the file in it shows gzip compression, but on my live server, when adding the file to my public_html directory and attempting to visit it through the browser, Magento throws a 404 error!
Does anyone out there have any idea why gzip would not waterfall through my file tree and properly gzip the js, minified js, css and minified css files that are located in the pub folder?
After days of debugging it turns out that on my live server, the RequestHeader for Set-Encoding was being stripped. This was not happening on my Apache setup on my local machine. My web host still has not give me an explanation why this was happening, nor do I know if it has to do with the htaccess file in the pub/static directory, but adding the RequestHeader set below:
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
Header set Connection keep-alive
#THE LINE BELOW THIS COMMENT
RequestHeader set Accept-Encoding "gzip, deflate, br"
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
to the htaccess file in the root of my magento site fixed the issue with the compression.
If this is a server issue, I would like someone to comment below on what I might bring up with my webhost to address this. Otherwise, I'm going to submit an issue to the Magento github.
Very strange issue,
deflate mode included in .htaccess of pub/static
bat not for all file types,
javascript files not added to setting
so,
just edit pub/static/.htaccess
and edit row with start - AddOutputFilterByType DEFLATE
and add content type -
text/javascript application/javascript application/x-javascript application/json image/svg+xml
now, all static content will with gzip.
Strange, why was missed this,
maybe for other features ?
I am trying to optimize serving my static bundles generated from my React Webpack app. In this process, I noticed that for same files, when serving the content through an Express server, the file sizes were comparatively lower than when served through nginx.
Here is my express code to serve the bundle:
app.use(express.static(project.paths.dist()));
Here is my nginx config:
server {
listen 80;
root /home/test/dist/;
index index.html index.htm app.js;
server_name www.ranodom.com;
location / {
try_files $uri /index.html;
}
error_log /var/log/nginx/test/website-error_log error;
access_log /var/log/nginx/test/website-access_log;
}
When served through express:
When served through nginx:
As visible from above screenshots, the file sizes differ drastically. The actual file sizes as present in the folder is equal to the one being served from Nginx server.
My question is, what can be the reason for this difference? Does express static optimizes/compresses the served files or is there a catch? If there is so much difference, would it be better to serve these files via express server and routing to index page via nginx?
PS. The above files are already uglified and minified using webpack.
Just realized that the compression middleware was enabled in my express server and hence the reduction in size.
If anyone else stumbles on this post, do notice that you can obtain similar results using nginx by using the below mentioned configs.
gzip on;
gzip_min_length 1000;
gzip_types text/html text/css application/javascript text/javascript text/plain text/xml application/json;
I'm quite newbie in react , and, even I have seen similar answers in stackoverflow and google, I can't make it work.
I have created an application via 'react-scripts' , and it worked awesome (just npm start . Nothing fancy).
My problem arrives when I try to deploy this application in my Apache server .
1) I execute 'npm build' . Build folder is created with (I guess ) a deployable version .
2) I copy this build folder to my Apache server and, when I try to access, I see the head and the tittle, but no content. Everything white .
I receive this message after 'npm run build' :
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage": "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
I guess 'serve' is a http server, but I want to deploy my app in Apache . As I understand, should be enough to copy to Apache folder . There's something I'm missing . Could you help me, please ?
step 1: create a .htaccess file in public folder with the following content
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
step 2: execute npm run build
step 3: copy files from build folder to document root of Apache
you need to make sure mod_rewrite is enabled, before using a .htaccess file.
In ubuntu, execute the command sudo a2enmod rewrite
In CentOS 7, open /etc/httpd/conf/httpd.conf file, Locate the <Directory /var/www/html> section and change the AllowOverride directive from None to All
Check here https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2
reloading pages, besides root, and deep linking will cause 404
errors... The reason is that all Angular2 routes should be served via
the index.html file.