I'm using gulp-rev-all for my Angular based WebApp and I don't want to revision index.html. All other files are revisioned by gulp-rev-all, so they will change their names after each deploy.
How to tell Apache to not cache index.html (always fetch index.html from the server), but all other files in my WebApp must never be expired until I deploy new revision?
Take a look over here, it's some config that will turn off caching based on a pattern:
How to prevent http file caching in Apache httpd (MAMP)
Related
How does WebPack serve different chunks when your user is on your website?
Because we have one GET request to server at the beginning - which would serve all of our main.js.
So then we go to a different page... We're not doing another GET request, but the server is able to serve this information?
When I updated my site, run npm run build and upload the new files to the server I am still looking the old version of my site.
Without React, I can see the new version of my site with cache-busting. I do this:
Previous file
<link rel="stylesheet" href="/css/styles.css">
New file
<link rel="stylesheet" href="/css/styles.css?abcde">
How can I do something like this or to achieve cache busting with create react app?
There are many threads in the GitHub of create react app about this but no one has a proper/simple answer.
EDIT: create-react-app v2 now have the service worker disabled by default
This answer only apply for CRA v1
This is probably because of your web worker.
If you look into your index.js file you can see
registerServiceWorker();
Never wondered what it did? If we take a look at the file it got imported from we can see
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.
If you want to delete the web worker, don't just delete the line. Import unregister and call it in your file instead of the register.
import { unregister } from './registerServiceWorker';
and then call
unregister()
P.S. When you unregister, it will take at least one refresh to make it work
I had the same issue when I use create-react-app ( and deploy to heroku). It keeps showing the old version of my app 😡.
I found the problem seems to be on the browser side, it caches my old index.html with its outdated js bundle
You may want to add the following to your server side response header
"Cache-Control": "no-store, no-cache"
or if you are also using heroku create-react-app-buildpack, update the static.json file
"headers": {
"/**": {
"Cache-Control": "no-store, no-cache"
}
}
I think in this way you can still keep that poor service worker 😂, and the latest content will be shown on the N+1 load (second refresh)
Hope this helps...
As mentioned by some of the previous answers here, both the service worker and the (lack of) cache headers can conspire against you when it comes to seeing old versions of your React app.
The React docs state the following when it comes to caching:
Using Cache-Control: max-age=31536000 for your build/static
assets, and Cache-Control: no-cache for everything else is a safe
and effective starting point that ensures your user's browser will
always check for an updated index.html file, and will cache all of
the build/static files for one year. Note that you can use the one
year expiration on build/static safely because the file contents
hash is embedded into the filename.
As mentioned by #squarism, older versions of create-react-app defaulted to opt-out of service worker registration, while newer versions are opt-in. You can read more about that in the official docs. It's quite a straightforward process to match you configuration to the latest template if you started with an older version of create-react-app and you want to switch to the new behaviour.
Related questions:
How to avoid caching for create-react-app
ReactJS: How to prevent browser from caching static files?
how to clear browser cache in reactjs
If your problem is with resources statically referenced in index.html, such as .css files or additional .js files (e.g. configuration files), you can declare a React environment variable, assign a unique value to it and reference it in your index.html file.
In your build script (bash):
REACT_APP_CACHE_BUST={e.g. build number from a CI tool} npm run build
In your index.html:
<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />
The variable name has to start with REACT_APP_. More about environment variables in React: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables.
It appears that they changed from opt-out to opt-in with regards to the service worker. Here's the commit that changed the README and it has examples similar to Kerry G's answer:
https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad
Coming from a PHP background, I used to have an index.php which does two things:
serve the webpage if no parameters were set;
or serve JSON data when a specific POST parameter was included in the request.
Something like this:
// -- index.php
<?php
if ($_POST["some_parameter"]) {
...
echo json_encode(someArrayData);
exit(0);
}
?>
<html>
...
</html>
I have built the complete frontend application with npm, webpack, webpack-dev-server, and react. Having completed the first part, how can I effectively serve JSON data instead of HTML when a request includes a specific POST parameter?
I can see 2 ways of doing this:
Build the frontend as usual and everytime I build the bundle, modify index.html, inject my PHP code in it, and rename it to index.php. I then would have to run this folder via apache or nginx, so I'd be able to run the index.php script. This method is downright ugly and is probably the worst way to do it.
Run a separate PHP server which just serves data or redirects to the static webpack-generated build. All requests should then start from this server, and this server determines whether to serve data or redirect to the frontend. The problem comes to neatly passing the POST data received from the request to the static react app. As far as I know, the only way to do this would be to include a URL (GET) parameter to the redirect and manually parse it with javascript on the frontend. This is a dirty solution, in my opinion.
So, to summarize:
I need an efficient way to get POST data in a react/webpack/webpack-dev-server environment.
It should work with my hot-module-replacement dev setup.
I'm fine with switching to a node-based backend like express.
There shouldn't be any ajax involved in the static react app.
Any ideas? There has to be a way to do this properly.
UPDATE: I solved this by simply copying an index.php from my source directory to my build directory via the webpack config. I serve the build folder to a PHP server and keep a webpack --watch building my source.
I lose built-in features like auto-reload and css injection, but it's worth the convenience of not having to implement SSR for a very simple task (getting a single POST variable).
For anyone interested, I also added 2 npm scripts:
npm run start runs my original webpack-dev-server with hot-reload, serving static content including a static index.html file
npm run static runs the webpack --watch which copies the index.php file to the build directory
This lets me have hot-reloading when developing frontend, and allows POST data fetching when programming logic.
It's easy, convenient, and works on most web hosting providers.
structure of my application looks like:
myapp
--backend
--env
--frontend
-- .idea
-- app
-- assets
-- bower_components
-- views
-- .htaccess
-- index.html
-- node_modules
flag
I used Django as an API and returned the JSON objects from the API and use the data in my AngularJS app in front-end.Both frontend and backend are running on different ports. In the development server, I used start the django server using the following command:
cd backend
./manage.py runserver 127.0.0.1:8000
and start the webserver using:
cd frontend
grunt serve
Now I want to move my application on production server.. So please suggest me how to do it. I have setup the production server (django with apache2 and mod_wsgi). But I dont know how to integrate angularjs with that..
I am currently running few projects in which i use django at the backend and angularjs at the front end.This is what i did.
1.All my javascript files are served from static folder.
2.Returns an html from django on initial load.
3.The html file loads scripts required including angular.js mymodule.js and mycontroller.js from static folder.
4.data required for the page is loaded by sending ajax requests inside controller.js to django server for which django returns json response.
5.The response is renderd in page using angularjs
similar questions have been asked before, regarding grails 2(.3, .4). I find it strange that i could not find a way to do this, as it seems a standard use-case to me.
I simply want to serve html-pages, including their linked .css and .js (angular and jquery content) when i run grails run-app.
I want to check if my http-calls are handeled correctly on both sides - without needing to deploy a .war and configuring a database.
afaik grails run-app simply starts a jetty/tomcat - both of which can obviously serve .html pages. What do i have to do to make the grails development-tooling deploy my files?
I need to make http-requests,
so using a different Server would violate JS-SOP,
while deploying the .war would greatly slow down the development process
I've so far only found clunky jsonp, proxy, .war deployment solutions, or solutions for grails 2.x
I tried placing the files literally everywhere in the projects' structure (/src/main, /src/main/resources, /src/main/public, the assets folder and its subfolders, created web-app directories in every subdirectory, the Init, domain, conf directories - you name it)
Add the index.html to src/main/resources/public
Then add this to UrlMappings.groovy:
"/"(redirect:"/index.html")
For grails >= 3.0.12
Location of static resources
In order to resolve an issue around how POST requests are treated for
REST applications on non-existent resources, static resources located
in src/main/resources/public are now resolved under the /static/** URI
by default, instead of the base URI /**. If you wish to restore the
previous behaviour add the following configuration:
grails.resources.pattern = '/**'
https://github.com/grails/grails-core/releases/tag/v3.0.12
Contrary to the accepted answer, you don't need a redirect. I have made able to make this work with the following config:
UrlMappings.groovy
"/"(uri: "/index.html")
application.yml
grails:
resources:
pattern: '/**'
Finally, you just need to have your index.html file located under src/main/webapp