I have a site built with create-react-app and hosted on Firebase Hosting. What can I do to specify the browser cache needs to be updated after new deploys, and ideally only for pages, assets, and stylesheets that have been changed since the last deploy?
Is there a way to access the deploy id and include that (or any other unique identifier) in the headers so the browser can compare to what it has in local storage or cache and determine whether a hard refresh is necessary? I looked over the Firebase Deploying as well as Full config docs but there's no mention on how to access hosting metadata like the last deploy time.
Setting a Cache-Control value to max-age=[any number] doesn't seem ideal because it disregards when the next deployment will occur (which might be unknown to begin with unless there are regular schedules).
I figured it out. Had to update the firebase.json file according to this Github comment:
{
"hosting": {
"headers": [
{ "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
]
}
}
Please set "max-age=0" in your firebase.json.
"headers": [
{
"source": "/service-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=0"
}
]
}
]
Related
I have a question about rewrite configurations on Vercel, very similar to this vercel discussion. My problem is essentially the same but reverse:
I have a site on vercel (main.vercel.app), and I would like to rewrite different pages to other vercel sites. So what I want is:
main.vercel.app/page-a --> page-a.vercel.app
main.vercel.app/page-b --> page-b.vercel.app
When I tried this configuration, it would correctly load the page, but all the assets (page-a.vercel.app/styles.css etc.) would not be loaded:
{
"rewrites": [
{
"source": "/page-a",
"destination": "https://page-a.vercel.app/"
}
]
}
When I tried this configuration, it would redirect all the assets, but not the initial page:
{
"rewrites": [
{
"source": "/page-a(.*)",
"destination": "https://page-a.vercel.app$1"
}
]
}
So what's the correct configuration supposed to be?
What if you try merging the two rewrites?
According to you, one rewrite pattern is correct for the main page, and the other is for all other assets other than the main page. Since rewrites is a list and can hold multiple patterns, try merging the two objects and making it something like this:
{
"rewrites": [
{
"source": "/page-a",
"destination": "https://page-a.vercel.app/"
},
{
"source": "/page-a(.*)",
"destination": "https://page-a.vercel.app$1"
}
]
}
My API it's running under another domain.. and I'm trying to configure proxy with Vercel ..
The app it's making requests to /api/test.json so I tried to... on vercel configuration
"redirects": [
{
"source": "/api/test.json",
"destination": "https://myapi.com/test.json",
}
],
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
And I received 404 from /api/test.json
Use the wildcard path matching :path* syntax:
// in vercel.json:
// for example proxying /api/ → https://backend-endpoint/
{
"rewrites": [
{
"source": "/api/:path*",
"destination": "https://backend-endpoint/:path*"
},
{
"source": "/api/:path*/",
"destination": "https://backend-endpoint/:path*/"
}
]
}
NOTE: You need both very identical objects under rewrites array as above in order to make things work properly. The example in the documentation is only the one without the trailing slash and it won't convert (for example) /api/auth/login/ to https://backend-endpoint/auth/login/, that example can only convert /api/auth/login to https://backend-endpoint/auth/login (without trailing slash /)
(it took me a day to realize that trailing slash / is actually very important).
Simply use rewrites
"rewrites": [
{
"source": "/api/test.json",
"destination": "https://myapi.com/test.json",
}
]
Then in your application
httpAgent
.get('/api/test.json)
.then(res => { console.log(res) })
My objective is to write a script that promotes a "stage" application in our Heroku pipeline to production, but only if there are any changes to promote.
I can promote without issues by using:
// POST /pipeline-promotions
{
"pipeline": {
"id": "<pipeline-id>"
},
"source": {
"app": {
"id": "<stage-app-id>"
}
},
"targets": [
{
"app": {
"id": "<production-id>"
}
}
]
}
My issues is that if I execute this, without any changes are present, the release actions are still started on the production application.
In other words, how can I determine if any changes are available for promotion - just like heroku does in their GUI?
Thanks to Heroku support, I managed to figure this out.
It can be done by comparing the slug id's when looking at pipelines/<pipeline-id>/latest-releases.
If the slug-ids are the same, there are no changes to promote.
Serve static assets with an efficient cache policy. I get this if I audit my app. I added this code to nuxt.config but this would help.
render: {
static: {
maxAge: 2592000
}
},
its by default caching static assets 1h in browser. Where can I change it. or How?
You should configure your headers for your static files with Firebase:
https://firebase.google.com/docs/hosting/full-config#headers
// in firebase.json
"hosting": {
// ...
// Add the "headers" attribute within "hosting", override cache control
"headers": [ {
"source": "**/*.#(jpg|jpeg|gif|png)",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=2592000"
} ]
}
]
}
This should give you the desired cache control values, depending on what you want to set there.
I use GCE V1 rest api to launch instances. I rarely use google developer console. I created windows VM instance through rest api. I passed windows initial username and password in metadata property. Windows VM created successfully. I also able to get those credentials in response, which I sent while creating VM. But I couldn't connect the VM using that username and password. I read the doc about how to reset password from developer console. It works fine. But we would like to rest apis for all. I mean to created/manage GCE resources. So can anyone help to fix this issue?
The image I used to launch a vm is "windows-server-2012-r2-dc-v20150511"
"metadata": {
"items": [
{
"key": "gce-initial-windows-user",
"value": "administrator"
},
{
"key": "gce-initial-windows-password",
"value": "twxsFL3U-/,*"
}
]
}
Note: I created many VMs through rest api. All instances have the same issue. When reseting the password from developer console, it works.
The credentials didn't work. I am able to reset them from developer console. But that will not fix my problem. Because we have our own system to launch VMs and other services. For that I'm building a connector. Here is the sample request I send from node.js script.
Request :
***********
options : {
"host": "www.googleapis.com",
"path": "/compute/v1/projects/project-id/zones/us-central1-f/instances",
"method": "POST",
"headers": {
"Authorization": "Bearer ya29.lQGsX8hwdWKaDDwOFnDIZB49eir-c2TUBqYpaVvir7C430Quy8kIWsL4rXv7qjSVQZJKK5e1BdxNug",
"Content-Type": "application/json charset=utf-8"
}
}
body : {
"name": "rin2qvxkz-e",
"zone": "https://www.googleapis.com/compute/v1/projects/project-id/zones/us-central1-f",
"machineType": "https://www.googleapis.com/compute/v1/projects/project-id/zones/us-central1-f/machineTypes/n1-standard-2",
"metadata": {
"items": [
{
"key": "gce-initial-windows-user",
"value": "administrator"
},
{
"key": "gce-initial-windows-password",
"value": "%1zuV27$.:?*"
}
]
},
"tags": {
"items": [
"default"
]
},
"disks": [
{
"type": "PERSISTENT",
"boot": true,
"mode": "READ_WRITE",
"deviceName": "rin2qvxkz-e",
"autoDelete": true,
"initializeParams": {
"sourceImage": "https://www.googleapis.com/compute/v1/projects/windows-cloud/global/images/windows-server-2012-r2-dc-v20150511",
"diskType": "https://www.googleapis.com/compute/v1/projects/project-id/zones/us-central1-f/diskTypes/pd-standard"
}
}
],
"canIpForward": false,
"networkInterfaces": [
{
"network": "https://www.googleapis.com/compute/v1/projects/project-id/global/networks/default",
"accessConfigs": [
{
"name": "External NAT",
"type": "ONE_TO_ONE_NAT"
}
]
}
],
"description": "rin2qvxkz-e",
"scheduling": {
"preemptible": false,
"onHostMaintenance": "MIGRATE",
"automaticRestart": true
}
}
Thanks.
You are using a new Windows image "windows-server-2012-r2-dc-v20150511" with an updated GCEAgent that doesn't look at the gce-initial-windows-user/gce-initial-windows-password instance metadata keys which were used by the old authentication scheme.
Here are explanations of how the new authentication works, starting from the "windows-server-2012-r2-dc-v20150511" image and onwards.
Please note that the initial Windows authentication and GCE API v1 are two separate topics and GCE API v1 has not changed as part of the authentication update.
The earlier answer didn't really explain when this changed. I did more research and found a note in the change log for Google Windows Images.
Metadata items gce-initial-windows-user and gce-initial-windows-password will no longer work for images v20150511 and later
https://cloud.google.com/compute/docs/release-notes-archive#february_2015
June 03, 2015
Updated Windows authentication process. Windows images v20150511 and
later will use the new scheme by default. gcloud will now generate a
random password for Windows login; it is no longer possible to
manually set a Windows password through gcloud but you can set a
custom password in the instance.
Here are some links that detail how to Add users to windows Images now
You can use the gcloud command line tool
https://cloud.google.com/sdk/gcloud/reference/compute/reset-windows-password
gcloud compute reset-windows-password INSTANCE_NAME [--user=USER]
[--zone=ZONE] [GCLOUD_WIDE_FLAG …]
You can call the API, They give GO and Python examples
They also detail a Step-By-Step manual process, in case you want more details
https://cloud.google.com/compute/docs/instances/windows/automate-pw-generation