I'm using Getx for navigation which internally uses Navigator 2.0. I'm unable to load a specific URL when I Host in Firebase Hosting.
It seems to be working fine locally.
I'm using Url Path Strategy to remove the #
Check if you correctly rewrite all requests to /index.html
https://firebase.google.com/docs/hosting/full-config
firebase.json:
{
"hosting": {
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
...
Deploy again afterwards.
Related
I am struggling to understand how firebase.json redirect rules work.
Here I define the hosting to my website, which works perfectly pointing to dist/project-name directory.
"hosting": [
{
"target": "project-name",
"public": "dist/project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
...
...
However, things start to get confusing when I try to implement redirect rules. Let's say I want requests to non-existing files and directories be redirected to my hosting public target. I would assume that this is the proper way to define it:
"rewrites": [
{
"source": "**",
"destination": "dist/project-name"
}
]
But making requests to random endpoints like localhost:5000/abcdef, localhost:5000/testing are not being redirected so the request fails. What should the source be then?
Now, let's say that instead of redirecting to my public target directory, I want to redirect to a firebase function with Express.
"rewrites": [
{
"source": "**",
"destination": "app"
}
]
Well, that does not work either in the emulator localhost:5000. Even though I can see functions work (Express app) in the emulator localhost:5001
I am thinking because the /functions directory is not part of the dist folder. But then why redirecting to dist/project-name does not work either? Any ideas? Thank you!
Alright, I had to try a few things and read the documentation to understand what I was doing.
Docs:
https://firebase.google.com/docs/hosting/functions#use_a_web_framework
https://firebase.google.com/docs/hosting/full-config#rewrites
First, I was thinking that by doing "destination": "dist/project-name" in the rewrites, the url was always going to redirect to the hosting site. So no matter what path I go to (i.e. /abc) it was going to show me the index.html file. Well, that is not the case. The rewrite is not even happening and I could see that in the logs http://localhost:4002/logs. I think that is because of the priority order.
Second, my Express.js app is deployed as a function in firebase. Rewrites to Cloud Functions should be "function": "app" not "destination": "app".
Last but not least, my Cloud Function with Express.js was deployed to us-east1 like this exports.app = functions.region("us-central1").https.onRequest(app);. However, here we can see that Firebase Hosting only accepts us-central1 for Cloud Functions at the moment.
I have created an express app which is working pretty fine but when I'm trying to host the web app using firebase cloud functions the url rewrites rules in firebase.json seems to be not working properly.
code snippet from index.js file under functions folder
exports.app = functions.https.onRequest(app);
here is the snippet from firebase.json file
"rewrites": [
{
"source": "/**{,/**}",
"function": "app"
}
I have also tried
"rewrites": [
{
"source": "**",
"function": "app"
}
but none of the is working.
I want all my webapp's url request from "http://url/someroute" to get routed to "http://url.com/app/someroute"
Right now for now all of this to work I have to change my hyperlinks from "/someroute" to "/app/someroute"
"rewrites": [
{
"source": "**",
"function": "app"
}
this works perfectly fine..Just check if you have also selected firebase hosting along with functions or do firebase init hosting and then firebase init functions seperately and then delete index.html from the public directory.
The problem is that you trying to redirect to a function, not a route, so if you want to actually change the route, you have to use destination instead of function, as follows:
"rewrites": [
{
"source": "**",
"destination": "/app/**"
}
Or something similar to that, here is a community post that explain that in a little more detail and also the rewrite documentation that might be able to help you further
When I run firebase deploy:
Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase deploy
⚠ "firebase" key in firebase.json is deprecated. Run firebase use --add instead
⚠ hosting: We found a hosting key inside firebase.json as well as hosting configuration keys that are not nested inside the hosting key.
Please run firebase tools:migrate to fix this issue.
Please note that this will overwrite any configuration keys nested inside the hosting key with configuration keys at the root level of firebase.json.
Error: Hosting key and legacy hosting keys are both present in firebase.json.
When I run firebase use --add as suggested:
Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase use --add
⚠ "firebase" key in firebase.json is deprecated. Run firebase use --add instead
? Which project do you want to add? showboost-e366b
? What alias do you want to use for this project? (e.g. staging) showboost
Created alias showboost for showboost-e366b.
Now using alias showboost (showboost-e366b)
When I run firebase tools:migrate as suggested:
Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase tools:migrate
⚠ "firebase" key in firebase.json is deprecated. Run firebase use --add instead
This command is deprecated and will be removed.
i Checking feature configuration...
i Checking "firebase" key...
Error: Server Error. certificate has expired
Finally, here's a look at my firebase.json file:
{
"firebase": "showboost-e366b",
"public": "showboost",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}
],
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I've been trying to fix this for a while so any help would be amazing, thank you!
Edit - Ive been looking into it more and it looks like "firebase tools:migrate" is Depreciated. Is there a new command I need to use?
Had the same issue but in your case you have 2 instances of rewrites array available, of which shouldn't be an issue.
Replace you last array of
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
to
"rewrites": [
{
"source": "**",
"function": "app"
}
]
Using Zeit Now Serverless and Node Js, is there an out of the box way to route incoming request via path and http method?
For instance, I want requests to GET api/cookies to go to getCookie() and requests to POST api/cookies to go to createCookie().
With the "rewrites" configuration this feature will be launched. For now, you can use:
"routes": [
{"src": "/api/get", "dest": "api/get.js", "methods": ["GET"] },
{"src": "/api/post", "dest": "api/post.js", "methods": ["POST"] },
]
I guess it's a very basic question, but it still confuses me. At development stage, when launching react with 'npm start' I'm using port 3000. In addition when launching strapi (which is a backend cms), it automatically uses port 1337.
Does it actually mean that my app is using two different ports?
I'm asking this because I would like to configure nginx so that I can run two different strapi apps (attached to two different react apps) - on the same server.
I want nginx to redirect from a specific location to the second website. I could write inside the sites-available file:
server {
listen 80;
location / {
proxy_pass "http://mysite:3000";
}
location /mysecondsite {
rewrite ^/mysecondsite(.*) $1 break;
proxy pass "http://mysite:??????? WHAT SHOULD I WRITE HERE?"
}
}
But where should I redirect users entering the secondsite url, to what port?
In strapi documentation, they point to a file called server.json where you can change the port that strapi uses, and also create a proxy (which I don't understand why you would want to do if you can just redirect from nginx?), for example:
{
"host": "localhost",
"port": 1337,
"proxy": {
"enabled": true,
"ssl": true,
"host": "example.com",
"port": 8443
},
"autoReload": {
"enabled": true
},
"cron": {
"enabled": true
}
}
But changing the port of the second project will affect only the strapi backend, won't it?
How can I create a different port for the front end of the second project?
I'm sorry if I misunderstand the terms here
Thanks in advance
Update 2019-06-29: (one application - frontend & strapi)
I come back because I discover that somebody resolve your case and deploy one application with strapi.
How to integrate Strapi API and Admin Panel with another node app (that consumes Strapi API)?
So you will have to build you website app. And push the build in the ./public folder of the Strapi application.
Then in your api/.../config/routes.json files you will have to add an option prefix in the config key of each of your routes and for all your APIs
{
"routes": [
{
"method": "POST",
"path": "/restaurants",
"handler": "Restaurant.create",
"config": {
"policies": [],
"prefix": "/api"
}
}
]
}
So at the end you will have your admin on /admin
Your APIs endpoints prefixed by /api
And your website/assets on /
And you don't must configure nginx for your second application becaouse is only one.
2019-06-11: (two separate application)
You want to has main react application on port 3000 and cms for backend api on 1337 where be used by main react application? You can use configuration like in bellow.
nginx.conf
server {
listen 80;
server_name mywebsite.pl www.mywebsite.pl;
location / {
proxy_pass http://mysite:3000/;
}
location /admin/
{
proxy_pass http://mysite:1337/admin/;
}
location /strapi/
{
proxy_pass http://mysite:1337/;
}
}
server.json
{
"host": "localhost",
"port": 1337,
"proxy": {
"enabled": false
},
"autoReload": {
"enabled": true
},
"cron": {
"enabled": false
},
"admin": {
"path": "/admin",
"build": {
"host": "/admin",
"backend": "http://mywebsite/strapi",
"plugins": {
"source": "backend",
"folder": "/strapi"
}
}
}
}
Remember:
⚠️ If you changed the path to access to the administration, the step #2 is required
-> You must resetup admin to install the dependencies and build the project
Change on the production environment NODE_ENV flag to production.
Run the server with the production settings.
Resource:
Deploy the administration panel on another server then API
Deployment