Currently i'm learning express and Firebase. I can deploy an angular or react page (front-end) to Firebase.
And now, i'm trying to create the back-end using express, then i realize, i cant just simply deploying it as another project to Firebase since Firebase hosting will looking for index.html as entry point (*please correct me if i'm wrong). I've tried Firebase functions but still can't.
Can i set a javascript (expressjs) file to Firebase as entry point?
thanks.
You can deploy an Express app to Cloud Functions for Firebase as an HTTP trigger. There is a sample that illustrates this. The basic form of implementation looks like this in your Cloud Functions index.js:
const functions = require('firebase-functions')
const express = require('express')
const app = express()
// configure app here, add routes, whatever
exports.api = functions.https.onRequest(app)
Now you can access your routes under the path https://your-assigned-hostname/api/whatever
EDIT
You also need to configure your firebase.json file if you want to redirect every request to the Express app.
Add this line inside the hosting object: "rewrites" : [{"source" : "**", "function" : "api"}]
Related
I've setup a custom domain to use for firebase Dynamic Links. Hosting has been setup in Firebase Console and I tried to use dynamic links without the customdomain, but just a xxx.page.link.
Now I want to return to use the custom domain, but from the console I'm told that:
A configuration already exists for this site. Add the snippet below to your firebase.json file and redeploy your changes. Be sure the rewrite rule is the first match for your dynamic link.
I'm not exactly sure how to handle this. Should I use the CLI and init a project to make this change or can I somehow do this from the portal itself.
If I need to use the CLI, how do I then access the existing project and make the change?
It seems you're already using Firebase Hosting outside of just for Dynamic Links. In that case you'll need to configure it through the CLI.
The configuration for Firebase Hosting must be made through deploying the firebase.json file through the Firebase CLI. There's no way to configure this directly in the Firebase console.
You can create an empty directory, run firebase init in there, and configure it to your existing project. Once that is done, you can create and deploy the minimal firebase.json file required as shown in the documentation on setting up your custom domain.
I have the following two hostings set up in my Firebase hosting. I don't know where the first one with the bad name came from, but anyway it's there and it's always coming up when I use firebase init from the command line as the only hosting I can use. Does anyone know how i can use Firebase init to connect my website to the second hosting address, that's the lbdsapp address? Also preferably I'd like to delete the lbds-aeb3d if possible and make the other one the default.F
Any help would be really appreciated. Thanks.
The first site lbds-aeb3d is the main site created from your project ID, When you create the project you probably entered lbds which is too short for a project ID, so some random string is automatically added. So you can not delete it since it's associated with your project.
Since you have added another site, that makes your project a multisites hosting project and you will have to configure .firebaserc and firebase.json accordingly.
You can start by giving your secondary site a name to refer to when you want set it as a deploy target. You can do this by the following command
firebase target:apply hosting <target-name> <resource-name>
In your case, if you call it myapp it would be
firebase target:apply hosting myapp lbdsapp
Then firebase will generate .firebaserc that include myapp as a target
Next, you'll have to define hosting configuration for your site in firebase.json
You will have to add the target name in the hosting config. Note that if you have more sites, you will have to configure hosting as array of config objects
{
"hosting": {
"target": "myapp",
"public": ...,
// ...
}
}
When you deploy your site, you will have to specify the target
firebase deploy --only hosting:myapp
I have created a vueJS website and I have used the history mode for routing in order to get rid of the # in the URL which shows in the default has mode routing. However when I deploy my project to the server after
npm run build
it runs fine but when I reload any page or type the url in the browser manual i get a 404 error instead.
I have used the history mode for routing. I am using firebase for the backend. I read the documentation on how to fix this however I did not quite understand it.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode : 'history',
routes : [
{
path : '/',
name : 'dashboard',
component : 'Dahsboard',
}
]
})
I don't have enough reputation to answer in the comment section under your question, so i provide an answer here.
You can find the code that tells the web server to serve the index.html file for every routing request here. Just create a .htaccess file and upload it to your server.
In your example above you also need to import your Dahsboard-Component if you are using single file components.
I'm building a React geographic todo list, similar to this one. I was using a Mapbox API for the mapping component, but I'd like to switch it over to HERE's Map Image API. I've set up the map on my app, but I'd like to hide my app_id and app_code in the .env file I had previously created. Is this possible? I know it's also possible to restrict which domains have access to the key/code, but I wanted to keep the keys hidden in a .env file for peace of mind.
Here is my .env file (without the keys, of course):
REACT_APP_HERE_ID={my app_id}
REACT_APP_HERE_CODE={my app_code}
And here is where I'm introducing it into my App:
const app_id = process.env.REACT_APP_HERE_ID;
const app_code = process.env.REACT_APP_HERE_CODE;
When I console.log app_id and app_code, they both return undefined. The previous API key I had from Mapbox worked fine in my .env file, but I can't seem to get the app_id and app_code from HERE to be recognized the same way.
Am I missing something? Is it easier to just limit which domains are able to use my id & code?
I assume you are using 'react-scripts' module for building/starting your project. Also as per above description, I can see you are using correct prefix 'REACT_APP_' to declare any variable in your .env file.
Just do a fresh build of app using command:
npm run-scripts build
or Just restart your app using :
npm react-scripts start
I think it should work fine.
And, Yes you can limit which domain should use your AppID and AppCode, using the feature "Secure app credentials against a specific domain" provided at https://developer.here.com/, just below the place where you see your id and code.
Hope this helps.
So I have built a simple firebase and javascript app that uses firebase database and hosting.
I have successfully built the app and deployed to Firebase hosting, however when the cmd provides the url that leads to the app it takes me to some completely random firebase landing page.
All deployment is correct and I know all my code is correct, but it keeps sending me to the random landing page: https://firebase.google.com/docs/hosting/
When you first create a project on firebase it asks you for the public directory: What do you want to use as your public directory? public
Usually the default its public, so the firebase generates a random welcome index.html there.
When you setup the firebase init configure the public directory to your files and you should see your app instead of the welcome index file, or simply put all your files inside the public directory you've chosen above.
Here I found a very simple tutorial on how to get started on that: https://www.brooks-patton.com/deploying-a-static-website-to-firebase/
Another way - you can just edit firebase.json file, in the line with "public" change the path where is your code was built.