I'm working on a React app hosted on Firebase, and a Wordpress blog hosted on Godaddy.
Is it possible to have the Wordpress blog rendering under /blog ?
I tried something like this in firebase.json (handeling multiple targets):
"hosting": [
{
"target": "site1",
"public": "site1/public",
"rewrites": [
{
"source": "/blog/**",
"destination": "myblog.example.com"
}
]
},
...
]
But I'm getting the 404 page from the React app.
I know I can rewrite to a Cloud Function, but how to "proxy" to the external blog, preventing the app to "catch" the request ?
You can't rewrite to arbitrary URLs -- to accomplish this you'd need to deploy a Cloud Function that proxied to the Wordpress blog using e.g. node-http-proxy. You could also use Cloud Run to host the Wordpress blog directly and rewrite to the Cloud Run service.
Related
Context: I'm working in a monorepo, I've setup architecture using NX. I've been trying to build micro frontend apps and I've managed to do so using module federation on local environment. For that purpose I've to start both of my apps locally. So host app runs at http://localhost:4200/ which can load my remote app which is running on http://localhost:4201/
Question
Now I wants to load my remote app where it is hosted (it's hosted on S3 bucket as a static web) instead of my localhost, but I'm getting CORS issue even though I've defined rule for that on my S3 bucket to allow cross origin.
Any help would be much appreciated.
Attaching screenshot of my error below:
I've defined CORS policy as below snippet:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"http://localhost:4200/"
],
"ExposeHeaders": []
}
]
I'm trying to update a react.js site that has been deployed to firebase. The updated content cannot be accessed without using an incognito window or using Dev Tools > Application > Clear Storage > Clear Site Data.
I'm sure this is a problem more strongly related to Firebase Hosting than React, but there seems to be potential interference between React's service-worker.js file and Firebase. Therefore, I have tagged React for completeness.
React Version: 16.8.6
Firebase CLI Version: 7.1.0
My steps are:
change code
$ npm run build
$ firebase serve --only hosting || firebase deploy --only hosting
visit .web.app or localhost:5000
Expectation: I will see the site with the new changes
Reality: I see the old site, without the new changes
Research and attempted solutions:
Setting the Cache-Control Headers
I have tried setting the Cache-Control headers to "no-cache" for service-worker.js in my firebase.json file.
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]},
This is clearly mentioned in the Create React App deployment documentation here:
https://facebook.github.io/create-react-app/docs/deployment
And in numerous Stack Overflow questions, such as the one here:
Firebase hosting - force browser to reset cache on new deploys?
Unfortunately, the problem persists, even when my firebase.json file is as shown below. This has led me to believe that there may be a new, more recent issue.
Fiddling with the Service Worker:
I have also done research around the service worker itself. It is currently set to 'unregister', but I have set it to 'register' and deployed multiple times with no noticeable change.
I am unsure whether it must be set to 'register', given the advice in #1 above.
****firebase.json****
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
}
}
****/src/index.js****
.....
const store = configureStore();
....
serviceWorker.unregister();
****directory structure****
/
firebase.json
firebase.src
build/
/static
service-worker.js
index.html
....
....
In the end neither Reactjs nor Firebase Hosting was the source of the problem. I'm just posting this incase someone is in a similar situation and doubts the configuration above, its the correct one, use it.
Redux-Persist's Persist Gate was not working as expected, causing the app to have mini-crashes every time it was redeployed. The crashes occurred before things like the version number could be updated, making the site look like it hadn't received the update.
Clearing the cache would solve the Redux-Persist problem, as it clears the data in the local storage, but this made me think it was a browser cache issue when it wasn't.
If you're using Redux-Persist & Persist Gate and seeing a very similar issue, take a good look at whether Persist Gate is allowing components to render before rehydration. I solved it by using the _persist object in Redux as a flag
In case someone has the issue. I resolve it by removing the .firebase folder at my root folder and add it to my .gitignore.
It keep in cache the previously build version for making deployment faster.
I got some trouble with multi-sites configuration.
I developed a reactJS project (front-end) on AWS which has it RESTFUL API coming from heroku. They are completly separated i.e the frontend and backend.
I have successfully uploaded my files to S3, and have activated my CloudFront Distributions, but I can't really figure out what is wrong because I can't see my react app when I hit the URL generated from the Domain name.
I have checked this SO answer, but it doesn't help.
Please any help will be greatly appreciated.
Firstly, it is perfectly fine to deploy them on different servers/cloud. Can you give the URL ? I feel it is not issue of different clouds but configuration issue. Can you first put a simple html file on same S3 bucket and see if you can access that via your domain name.
Suppose you have your react app example.com hosted in bucket named ant. So, go ahead and put additional test.html in bucket ant. Then try example.com/test.html .. This will make sure your domain setting etc. are proper
I have experienced similar issues trying to run a react.js app through cloudront, here are a few things you should check:
Make sure that your s3 hosting bucket has public read access, or that you have set up your cloudfront origin access policy with the s3 bucket by first creating an origin access identity in cloudfront, then associating the identity with your s3 bucket through the access policy:
{
"Version": "2012-10-17",
"Id": "MyPolicy",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity YOUR_CLOUDFRONT_ORIGIN_ACCESS_ID"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_S3_BUCKET/*"
}
]
}
Make sure your s3 bucket has a cors policy allowing requests from any domain similar to:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>
If your package.json file in the react.js app has a homepage, you should remove it as this the application expects to be hosted from that url and not the cloudfront domain. Example package.json with homepage:
{
"name": "your-package-name",
"version": "1.0.0",
"description": "",
"author": "",
"homepage": "https://somepage.com/home",
"repository": {},
"dependencies": {}
}
Make sure that your root object in the cloudfront distribution is index.html
Make sure that after you run "npm run build" in the react app, you are only syncing your build folder with the s3 bucket.
Make sure that if you use the aws cli to move your build files to the s3 bucket, you use the command "aws s3 sync build/ s3://YOUR_DEPLOY_BUCKET/ --acl public-read --delete", this ensures that only the most recent build files are uploaded to s3, and that any old files are deleted.
After pushing files to s3, it is a good idea to run a cloudfront invalidation to ensure that your old files are removed from the cache and any new requests serve up the new files. you can run "aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths '/*'" to accomplish this.
Because react.js uses the virtual dom, and the only html document actually served is the index.html document, you need to add custom error responses to your cloudfront distribution as cloudfront will expect to serve up web pages like about.html or contact.html depending on the route in your react app. I recommend adding custom error responses for http codes 400-404 and mapping the response to status code 200 with a redirect to the "/" route. This ensures that if cloudfront cant find a file such as about.html, it will stay on the index.html file (where your react app is) and react router will virtually route to your /about route. see below for example configuration:
have you tried making setting S3 bucket to “public”?
you can either set a policy for the entire bucket or to to make certain objects available publicly.
here’s an AWS manual
chances are, your react app needs something like that
We're using custom domains on firebase hosting: our app, served from index.html, runs nicely on app.example.com. We've also connected www.example.com, which serves the app as well.
The problem is: on www.example.com I want to be able to host a simple static page. Is there a way to configure this in the rewrites? We can easily output an extra html file in the deploy, next to index.html.
Any ideas?
Our firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Firebase Hosting does not support multiple sites in a single project at this time. However, you can create a second project for your static landing page and deploy it there, connecting it to the www domain while leaving the app domain connected to the other project.
As of August of 2018, Firebase Hosting supports multiple sites on a single project! See the docs for more info.
My stack is React/Redux as frontend together with React Router v4 and Firebase Hosting as backend.
Like many others, I also faced the issue of meeting the 404 page not found when users refreshed at a page other than the root URL like https://example.com/about or manually key in the URL https://example.com/about.
I researched many websites and HashBrowser seem to be a workaround for this problem but it is not a complete solution. It does not bring the user to the correct page but instead render the root URL component. Not good enough. Using historyApiFallback: true for production environment seemed to be a bad idea too.
I saw this package, connect-history-api-fallback but it seems to be for a express app.
How can I implement this package in my React app while using Firebase to host my website?
Or are there other solutions?
I found the solution. This only applies to people deploying React App, using Firebase Hosting to host your single page application. (should work for Angularjs/Vuejs too)
When you first run firebase init, they ask if you want to configure as a single-page app, make sure you select yes. The end result is that they will write this portion to your firebase.json file,
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}
it works the same as having
devServer: {
historyApiFallback: true
},
in your webpack.config.js file to redirect all URLs to the root URL of your application. ("/")
Full implementation of the firebase.json file may look like this,
{
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
More information may be found in the Firebase Deployment Configuration Documentation.