Clear the Browser Cache of React app after every new deployment - reactjs

I have added Cache Headers but Its doesnt remove my Browser Cache. Can anyone please help how to do that??
<VirtualHost *:443>
ServerName <ip-address>
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html/build
Include conf/headers.conf
SSLEngine on
SSLCertificateFile /etc/httpd/sites-available/cert.crt
SSLCertificateKeyFile /etc/httpd/sites-available/ssl.key
<Directory /var/www/html/build/>
Options +FollowSymlinks
AllowOverride All
Require all granted
</Directory>

There are many different browsers, there is no 100% reliable way for you to control what a clients browser stores in it cache. You can set headers on your servers response which tell a web browser that it should dump old files from it's cache and request new ones after a predefined period but this is only a recommendation, the browser may choose to ignore it, after all you do not control the browser software a client is using.
Set browser cache control headers in your Apache config file something like this...
# here we are telling the browser to request new files for specific images after 604800 seconds or 7 days, i.e. dump the cache if files are more than 7 days old
<FilesMatch "bird.jpg|dog.jpg|noob.jpg|fish.jpg|rabbit.jpg|cow.jpg">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>
# here we are telling the browser to request new files for specific file types after 86400 seconds or 1 day
<FilesMatch ".(css|js|ttf|ico)$">
Header set Cache-Control "max-age=86400, public, must-revalidate"
</FilesMatch>
If you are just looking for a quick way to clear the cache on google chrome on your own pc you can install a browser plugin to to that such as https://chrome.google.com/webstore/detail/no-cache-refresh/njacldedajpdoofkhpfckdkgcahjlfkj

Related

Using Create-React-App with Apache VirtualHost

I am trying to develop a project for a company. This company has an API that only allows requests from two sources: Their own host, and xyz.localhost.
At first, I developed the project with jQuery only (loaded in via CDN). With an Apache VirtualHost setup, this worked -- I could access the API.
Now, I want to refactor the project and use React with it. I used create-react-app to create a react directory.
The problem is: I can get create-react-app to use xyz.localhost, but I am still getting the CORS error message in Chrome:
Access to fetch at 'http://api.thatcompany.com/search?search=a'
from origin 'http://xyz.localhost:3000' has been blocked by CORS policy
Has anybody any ideas how to make it work?
Thank you in advance.
/private/etc/apache2/httpd.conf:
# Virtual hosts
#Include /private/etc/apache2/extra/httpd-vhosts.conf
Include /private/etc/apache2/vhosts/*.conf
/private/etc/hosts:
127.0.0.1 xyz.localhost
255.255.255.255 broadcasthost
::1 xyz.localhost
/private/etc/apache2/vhosts/xyz.localhost.conf:
<VirtualHost *:80>
DocumentRoot "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public"
ServerName xyz.localhost
<Directory "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public">
AllowOverride All
Require all granted
</Directory>
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
</VirtualHost>
My create-react-app start script:
"scripts": { "start": "HOST=xyz.localhost react-scripts start" }
I found a workaround.
I simply pointed the VirtualHost to the build folder of Create React App, this worked and served me the static files.
Editing the code was pretty tiresome, as I had to run npm run Build after every update.
Luckily, I found the npm watch module. With that, create react App would rebuild on every save. I still have to wait a second between save and refreshing the browser, and it’s absolutely not comparable to using create react app on its own, but it was a good enough solution!

Enable server-side includes in Apache2 for selected domains

I'm running Apache2 (2.4.29-lubuntu4.11) on Ubuntu Server 18.04.
I see documentation for enabling server-side includes (SSI) when I google, but it's always done in httpd.conf (modern apache2.conf), etc. I suspect these are older posts. I manage my domains out of /etc/apache2/sites-available/some-domain.conf (individual vhost configuration) files and I don't wish to enable server-side includes except for a couple of domains.
Can the effect of enabling SSI be limited to only selected domains?
How is this done specifically? I've tried, for example,
<VirtualHost *:80>
...
AddType text/html .shtml
AddHandler server-parsed .shtml
AddOutputFilter INCLUDES .shtml
Options Includes
</VirtualHost>
How do Options, AddType, AddHandler, AddOutputFilter, etc., done in some-domain.conf, interact with what's in /etc/apache2/apache2.conf?
You can do it in your . htaccess as well as just enabling it in a container.
For more information please take a look at this documentation: https://httpd.apache.org/docs/current/howto/ssi.html
To permit SSI on your server, you must have the following directive
either in your httpd.conf file, or in a .htaccess file:
Options +Includes
This tells Apache that you want to permit files to
be parsed for SSI directives.
To enable SSI for a specific domain or directory you can also put it in a container inside a virtualhost configuration:
<Directory /example/dir>
...
Options ...someOtherOptions... +Includes
...
</Directory>
I think your last question (site conf or Apache conf) was already answered here.

Apache2/Tomcat8 virtual host JSF application returning incorrect urls (the app name is duplicated)

I have a website (http://www.goodfoodwaiheke.org) configured as a virtual host on Apache2. The virtual hosting configuration redirects traffic from apache2 to tomcat8 via these conf parameters:
<VirtualHost *:80>
ServerName www.goodfoodwaiheke.org
ServerAlias goodfoodwaiheke.org
ProxyRequests Off
ProxyPreserveHost On
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://localhost:8080/coop/
ProxyPassReverse / http://localhost:8080/coop/
</VirtualHost>
On tomcat, the /coop/ part of the address invokes the JSF application in coop.war. This seems to work. The correct welcome page is served except for one problem. The url for static resources are being served incorrectly. For example, the url of the background image on the welcome page, which is actually in http://www.goodfoodwaiheke.org/coop/resources/images/GoodFoodWaiheke4.png is served to the browser as http://www.goodfoodwaiheke.org/coop/coop/resources/images/GoodFoodWaiheke4.png (i.e. the coop app name is duplicated in the url). This is causing static resources to not work. Although I can sort of understand why this may be happening I am unsure of how to fix it. I know I could offload the static resources onto the Apache2 server but for various reasons I would like the war file to be self-contained and for tomcat to be responsible for serving the whole site.
I'd be very grateful for any suggestions as to what I need to change.

Apache2 conf file redirecting requests for other enabled sites

I'm running apache2 on ubuntu 16.04. I've configured apache2 to run multiple sites. One of the sites has https setup and to help support this I've added the following rule to redirect http requests to use https:
<VirtualHost *:80>
ServerName http://example.com
Redirect permanent / https://example.com/
</VirtualHost>
This has been too much of a blanket rule as it's redirecting other site's https requests to the domain above.
How can I re-configure the conf above to only redirect http requests for example.com and not the other sites on the same server?
The first listed virtualhost for each host:port acts as the default, catching all unmatched ServerNames. Make sure you don't define your special-case first.
See apachectl -S output for a summary of where your vhosts are loaded from and which one is the default.

Local domain simulation with Apache2 and Yii

I'm trying to convert http://localhost/website to http://website.loc, but I'm not able to do that. Here's what I could do:
I edited /etc/hosts (I'm on Ubuntu) by changing 127.0.0.1 localhost to 127.0.0.1 localhost website.loc and saved changes
I created a new file named website inside /etc/apache2/sites-available with this content:
<virtualhost website.loc>
ServerName website.loc
DocumentRoot /home/myuser/projects/website/
<directory /home/myuser/projects/website/>
AllowOverride all
Options Indexes FollowSymLinks MultiViews
Order allow,deny
allow from all
</directory>
</virtualhost>
And I created a softlink to sites-enabled to enable this. After that, I restarted Apache.
By the way, I am using the Yii framework with any request to / redirected to /index.php, so index.php is not needed in the query.
So, when I write website.loc/ into chrome, it moves me to http://website.loc/site/login (the login index page, that's almost expected even if I was logged in as localhost, because the site url "changed" to website.loc, so the cookies are not shared), but the content is:
Not Found
The requested URL /website/index.php was not found on this server.
Apache/2.2.16 (Ubuntu) Server at website.loc Port 80
Am I doing something wrong? Thanks in advance, mates
Edit: It was all about the .htaccess inside /home/myuser/projects/website. It's RewriteBase was pointing to /website. Changing this to / and it worked like charm. Thanks #Chux for reminding me to check the .htaccess!
First, http://website.loc/index.php, check if that work. If that work, means that you need to create an .htaccess in your website root folder to enable that route format

Resources