I just started to build a Single-Page App on Firebase Hosting using AngularJS framework. I have run firebase init and chosen to rewrite all urls to /index.html as shown below:
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
I have my partial view templates stored in the following folders:
public/templates/home/dashboard.html
public/templates/courses/default.html
My Angular routings are working correctly and have my public/index.html checks for authorized access, including those partial views, and redirect the user to login view if the user has not been authenticated.
However, when I try to paste the URL of my template HTML files directly onto the browser address bar, Firebase does not redirect it to /index.html:
http://localhost:5000/templates/home/dashboard.html
http://localhost:5000/templates/courses/default.html
All the above template files are loaded on the browser and viewable by any unauthorized users who know the URLs of these template files. I have tried to add the following rules to my firebase.json file but none of them work:
Test #1:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/templates/**/.*",
"destination": "/index.html"
}
]
Test #2:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/templates{,/**}",
"destination": "/index.html"
}
]
NOTE: I did restart firebase serve for every attempt, but I'm not sure if the cache will affect this type of testing. I also don't know how to clear the server cache either.
My questions are:
What is the correct way to write the url rewrite rule in order to redirect users to /index.html when direct accessing to these partial view templates?
If there is no way to prevent direct access to partial view templates through the Firebase url rewrite rules, is there any other way that I can prevent this for security purposes?
Firebase hosting will serve static content with priority above dynamic rewrites. See this hosting order.
If you don't want those views accessed directly, you could move them to a cloud function and setting up your hosting to reroute "templates" to serve that cloud function. Then you can configure your cloud function to provide/deny access as needed.
Use redirects instead of rewrites
"hosting": {
"redirects": [ {
"source": "/foo",
"destination": "/bar",
"type": 301
} ]
}
Add ** to source to append destination with additional URL string.
E.g.
"hosting": {
"redirects": [ {
"source": "/foo**",
"destination": "/bar",
"type": 301
} ]
}
Results in /foo?var=bar redirecting to /bar?var=bar
See Configure redirects for more info.
Related
I've built a nextjs app, with npm run build && npm run export and deployed to firebase using firebase deploy command. Prior to that, I've used firebase init in my project folder with just using the default options eg. not a single page application.
After I go and visit my project in firebase provided url however, I see the home page which is index.html, but whenever I use any other slug it throws a 404. Why this is happening ? I`ve included my firebase.json file, in case it might help.
firebase.json
"hosting": {
"public": "out",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
For everybody that wants to deploy a statically exported Next.js app to Firebase hosting:
You would have to add "cleanUrls": true to the hosting configuration in firebase.json like so:
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
Without the "cleanUrls" configuration, the user would have to navigate to
https://example.com/login.html so that Next.js routes to the login page for example. With the parameter, a web request to https://example.com/login would work.
With the rules you have Firebase Hosting serves the exact file that the user requested.
To rewrite other/all URLs to your index.html, you'll need to add a rewrite rule to your firebase.json. A typical rewrite rule for single-page applications may look like this:
"hosting": {
// ...
// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
If anyone is still looking for this, this is what fixed it for me:
I used dynamicLinks as stated in the firebase hosting docs for the rewrites like so in my firebase.json file:
{
"hosting": {
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
}
}
This should allow dynamicLinks to start at ("https://CUSTOM_DOMAIN/{dynamicLink}").
I have a react application that works fine locally. However after I deploy to Azure Web App I get following error in console:
https://xxx.azurewebsites.net/manifest.json 404 (Not Found)
I can see the purpose is when people install the app on a mobile, then REACT renders differently dependent on the devise. I can also see it is located in the index.html file:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
As my app is a web site does this file has any effect? Can I just delete it or should I try to solve the error? And if yes how?
Are you using create-react-app?
The manifest makes only sense when you want that your users can install your app so it works without an internet connection e.g. Thats in the end a Progressive Web App. So for you it's probably fine to just remove the line.
(under which path does your app serve? Maybe you have to specify a base path: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
have you tried this?
go to angular.json
add manifest.json location in assets
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
restart dev server using
ng serve
For production apps, you have to target build for the public in firebase.json like the following:
{
"hosting": {
"public": "build", // Here you have to make changes.
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
}
}
I am building a React/Redux app and trying to rewrite to one Firebase function, with all other URLs rewriting to index.html.
Right now, I am only able to get a URL to rewrite to the function when I perform the "empty cache and hard reload" on my Chrome browser.
This is my firebase.json file.
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build",
"rewrites": [
{
"source": "/Photos/**", "function": "getPhoto"
},
{
"source": "**", "destination": "/index.html"
}
]
}
}
For example, when I go to https://nameofmyapp.firebaseapp.com/Photos/2017/October/2/12345, I am routed to the root directory (index.html), when I expect to be directed to the getPhoto function.
The only time I am able to get to the "/Photos/**" rewrite URL is if I first enter the https://nameofmyapp.firebaseapp.com/Photos/2017/October/2/12345 URL in the browser, then perform a "Empty Cache and Hard Reload" in Chrome. This is the only time that the function is executed for me. (Not sure if this is related to the service-worker behavior?) Even so, on normal refresh at that URL, I end up back in index.html again.
Can anyone let me know what I am missing?
I've just posted an answer for a very similar problem
You need to change your "single app rewrite" :
{
"hosting": {
"public": "build",
"rewrites": [
{
"source": "/Photos/**", "function": "getPhoto"
},
{
"source": "!/Photos/**", "destination": "/index.html"
}
]
}
}
Instead of redirecting everything on index.html (as do " ** "), this rule redirect everything that is not in the Photos folder and subfolders.
I am using Firebase dynamic hosting and would like the home page on my website (https://website.com) to redirect to a cloud function while all other urls are directed to a React app.
I have tried this in Firebase.json. But it doesn't seem to work.
"rewrites": [
{ "source": "/", "function": "app"},
{ "source": "**", "function": "/index.html"}
]
Any ideas on what the problem is?
When you hit your website home page, firebase always tries to find the "index.html" file in your public directory. If it is found, your rewrite "is not executed". To avoid this, remove your "index.html" file (or just rename it), and the first rewrite will start working.
About the second rewrite, if you are trying to return a file of your public directory, the key of that object needs to be "destination", instead of "function".
Let's say that you rename your "index.html" file to "myApp.html". Your firebase.json file would be:
"rewrites": [
{ "source": "/", "function": "app"},
{ "source": "**", "destination": "/myApp.html"}
]
I've deployed my angular app to firebase. I can see the sign in page fine but I get the following error when I reload the page:
This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.
Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.
So as the error suggests I checked my firebase.json file and it displays this:
{
"firebase": "******",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Here you can see that my public folder is my dist folder. This dist folder is actually where I place all of my files (css,js,html and the index.html) when gulp builds it all. The folder structure looks like this:
dist
css
images
js
templates
index.html
So the destination folder above does have an index.html page - so why am I getting this error? Angular should be stepping in here and handling all routing but that doesn't seem to be the case.
EDIT
I fixed the problem - this problem is caused by Firebase (indeed all servers I think) believing that each Angular state is a folder which should contain its own index.html file - obviously this isn't the case.
What needs to happen is for it to only refer to our index.html in the root of the folder. To do that you need to modify your firebase.json file to the following:
{
"firebase": "app-name",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}]
}
The important parts here are the rewrites and the source objects. Refer to the firebase.json explanation page for more info on this: firebase.json
2018 and had the samed problem. Katana24 gave a good answer but since then, firebase updated a bit. Here is the Katana24 answer updated :
firebase.json:
{
"functions": {
"predeploy": [
"npm --prefix \"%RESOURCE_DIR%\" run lint"
],
"source": "functions"
},
"hosting": {
"public": "dist/YOURAPPNAME",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}
],
"storage": {
"rules": "storage.rules"
}
}
}
If you use firebase-tools you can hit y (yes) at the question:
Configure as a single-page app (rewrite all urls to /index.html)?
in `firebase.json`, `hosting` section add the `rewrites`
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ],