My Flutter app looks great in the Chrome (web) emulator and running on a local server.
I navigated to this directory:
Users/TDK/StudioProjects/kabbalah/build/web/
I installed the Firebase CLI tools and then ran
firebase init hosting
I wasn't sure about this question:
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
I responded y. The response was
✔ Firebase initialization complete!
Then I ran
firebase deploy --only hosting
The response is
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/kabbalah-numerology/overview
Hosting URL: https://kabbalah-numerology.web.app
When I go to the Project Console I see
Deployed
When I go to https://kabbalah-numerology.web.app I get this screen:
Shouldn't I see my web app? Did I deploy from the wrong directory?
I opened Safari to check if Chrome was cacheing an old webpage but I got the same screen.
I put this code block into index.html. It made no difference.
<body>
<script>
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "my-super-secret-key",
authDomain: "kabbalah-numerology.firebaseapp.com",
projectId: "kabbalah-numerology",
storageBucket: "kabbalah-numerology.appspot.com",
messagingSenderId: "my-sending-id",
appId: "my-app-id",
measurementId: "my-measurement-id"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
Check the firebase.json file, which controls your hosting setup. Most likely the public folder in there, which determines from what directory files are served, points to the wrong location.
I typically run firebase init in the root of my project, and then point public in firebase.json to the output of the flutter web build.
Related
I can't seem to configure routes to connect firebase hosting to my cloud function express app. I tried to setup as shown here but the behaviour seems to be different. I can't seem to figure out what I am doing wrong. Please send help, I'm going insane.
index.js
const functions = require("firebase-functions");
const app = require('./app');
exports.api = functions.https.onRequest(app);
app.js
const app = express();
// ...
app.use(cors());
app.use('/params', paramsRoutes);
module.exports = app;
firebase.json
{
"hosting": {
// ...
"rewrites": [
{
"source": "/api/**",
"function": "api"
},
// ...
]
}
}
There is appropriate documentation that lists your requirement of hosting the Cloud Functions in Firebase Hosting using a custom domain.
Make sure that you have the latest version of the Firebase CLI and
that you've initialized Firebase Hosting.
Initialize Cloud Functions by running the following command from the
root of your project directory: firebase init functions
Also as per documentationwe can use rewrites to serve requests for a specific firebase hosting URL to a function. To do that you need to use "/api". You don't have to add the entire URL because you are redirecting from firebase hosting. So, when you add "/api" you are indicating to redirect requests going to "PROJECT_ID.web.app/api and PROJECT_ID.firebaseapp.com/api" to the function you specified.
If you want redirect every single URL to your host to an express app in Cloud Functions, you will need to do the following:
Make sure there is no index.html in your public hosting folder
(otherwise it will always be served with the path /).
Your Express routes need to exactly match the incoming URL, not just
the wildcard part.
You can read more in the docs or follow this medium post for more details.
Check these links for similar implementation:
How to write redirect rules for Firebase hosting and express
How to redirect all server requests to a function in firebase
I have a nodejs application using express as a framework
example: localhost:2020
this app serves many routes
example: localhost:2020/node-1, localhost:2020/node-2localhost:2020/node-3
I created a nextjs application for just one page
example: localhost:3000/nextjs-page
I want to serve the new nextjs page inside my working node app
to be localhost:2020/nextjs-page
how can i do that?
Try express-http-proxy. Install it and include on app on localhost:2020, and then setup the middleware:
//localhost:2020 app
const proxy = require('express-http-proxy');
//...
app.use('/nextjs-page', proxy('http://localhost:3000/nextjs-page'));
In development, when i was running the react server on localhost:3000. I used proxy in package.json to set the baseurl for my backend server, which was running on loacalhost:5000. So i just edited proxy in package.json to "localhost:5000". So all the api requests sent from axios will be directed to that url.
axios.get("/name").then(res=>({...}))
A request identical to the above would be redirected to:
localhost:5000/name
In production, when i deployed the app on online platforms like heroku and vercel. The api requests sent from react-app through axios, all failed. When deploying on heroku/vercel, I changed the proxy to the online backend url.
I want to know how to change the proxy when a react app is deployed online (preferably on heroku/vercel). So that my api requests won't fail.
Tech stack: react for frontend, axios to send requests and firebase for the backend. The backend is also deployed on heroku.
Any kind of support would be appreciated. Even if there's a better platform to deploy the app, I can switch to that as well.
You should create a config object and pick base_url based on the env.
On local, it will pick development url and on Heroku it will use production.
const configs = {
development: {
SERVER_URI: 'localhost:5000',
},
production: {
SERVER_URI: 'HEROKU_URI',
},
};
module.exports.config = configs[process.env.NODE_ENV];
Also replace your axios calls like this:
axios.get(`${config.SERVER_URI}/name`).then(res=>({...}))
I am trying to build and release front-end app based on quasar on Azure Portal.
Building is OK.
Releasing is OK, but when I go to the apps link I see standard welcome screen:
I checked deployed code via SSH it is there, but it is located on "/home/site/wwwroot/index.html"
How do I point to the correct folder with my app? Thank you!
Firstly there is an official doc about this: how to set the default document in a Node.js app.
It uses express to solve it, Create index.js there with the following code, then restart your app then it will work.
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
Except this, there is another way to solve it, use pm2 since that is already part of the stack. Add the below startup command for the app:
pm2 serve /home/site/wwwroot --no-daemon
After restart the app, it will pick the index pages from the wwwroot.
uncaught exception: Error: This operation is not supported in the
environment this application is running on. "location.protocol" must
be http, https or chrome-extension and web storage must be enabled.
var config = {
apiKey: "*****",
authDomain: "******",
};
firebase.initializeApp(config);
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('profile');
provider.addScope('https://www.googleapis.com/auth/drive');
firebase.auth().signInWithRedirect(provider);
alert(1);
}
uncaught exception: Error: This operation is not supported in the
environment this application is running on. "location.protocol" must
be HTTP, HTTPS or chrome-extension and web storage must be enabled.
Recently even i faced the same error.
You are opening this file directly in the browser without any web server. Firebase authentication won't work if you open the file directly. Try to load your HTML through web server it should solve your issue.
The reason behind this bug is when you use authentication services they will use web storage. web storage does not work when you open an HTML file directly without any web browser
For example, use apache and open through apache like http://localhost/filename.html in the browser
Try this code. It should work.
var config = {
apiKey: "*****",
authDomain: "******",
};
firebase.initializeApp(config);
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('profile');
provider.addScope('https://www.googleapis.com/auth/drive');
firebase.auth().signInWithRedirect(provider);
//add the code below to your previous lines
firebase.auth().getRedirectResult().then(function(authData) {
console.log(authData);
}).catch(function(error) {
console.log(error);
});
Most simple way....
just upload your files on github and run with github page(i.e. https://ur name.github.io/yr dir/yr html file.