how to deploy to other firebase hosting sites defined within the same project.
I created multiple firebase hosting "sites".
The command
firebase deploy
however always deploys to the first one.
How can I specify that the static files get deployed to another "site" (and domain).
Thanks
You have to add the other sites as deploy targets. If you have a second site named awesome-site-d3426:
$ firebase target:apply hosting awesome-app awesome-site-d3426
You'll likely have to do the same thing for the primary site.
Then tell Firebase what to deploy to which targets in firebase.json:
{
"hosting": [
{
"target": "awesome-site",
"public": "awesome-site/dist"
},
{
...
}
]
}
You can then deploy all the sites at once(firebase deploy) or a specific site:
$ firebase deploy --only hosting:awesome-site
To deploy to another site created in same firebase project.
Update your firebase.json file as folow
{
"hosting": {
"site":"<site-name>",
"public": ...,
"ignore": [
...
],
"rewrites": [
...
]
}
}
Related
I'm new to Vue js and I'm developing an e-commerce project with firebase. I saw in firebase there are multiple hosting features which will help me to host client and admin side in two different domains. I don't know how to create two apps in one project folder like this example in angular. If any knows please share your thoughts
Follow this
Step 0 - Firebase setup
In this tutorial my-app is my Firebase project id
my-app-public Web App is associate to my-app Hosting site (default hosting site takes the project id as name)
my-app-admin Web App is associate to my-app-admin Hosting site
Step 1
Move your public and admin apps in a new directory
my-app/
├── public-site/
└── admin-site/
Step 2
Init from my-app/ with firebase and of course select Hosting feature to set up
firebase init
Do not pay attention to firebase asking for the public name folder
Step 3
Set the build path of your apps to the targets public and admin.
Edit the firebase.json file and add your apps.
{
"hosting": [
{
"target": "public",
"public": "public-site/dist",
"ignore": [
"**/.*",
"**/node_modules/**"
]
},
{
"target": "admin",
"public": "admin-site/dist",
"ignore": [
"**/.*",
"**/node_modules/**"
]
}
],
}
Step 4
Link the targets to yours Firebase Hosting Sites. (Hosting Site != Web App)
Edit the .firebaserc, if it doesn't exist create it at the root of my-app/
{
"projects": {
"default": "my-app", # firebase project id
},
"targets": {
"my-app": { # firebase project id
"hosting": {
"public": [
"my-app" # public hosting site id
],
"admin": [
"my-app-admin" # admin hosting site id
]
}
},
}
}
Now if you type
firebase target
You should get
[ hosting ]
public (my-app)
admin (my-app-admin)
Step 5
Build your both apps
cd public-site/
npm run build
Make sure your apps are build in the dist/ folder
Step 6
Deploy both apps
firebase deploy --only hosting
Or deploy only the public app
firebase deploy --only hosting:public
Your apps should be deployed to
https://my-app.firebaseapp.com/
https://my-app-admin.firebaseapp.com/
BONUS - Build and deploy your apps on merge on master (Github)
First use
firebase init hosting:github
and follow the CLI instructions, it should ask your repo
One it's done check if your repo has the firebase service account key
Go on your github repo > settings > security
And you should see a secret env variable named FIREBASE_SERVICE_ACCOUNT_MY_APP
Let's setup your github workflow in your project, remove the .yml files in .github/workflows generated by the previous command and create your own workflow (file name doesn't matter):
name: Deploy on PROD to Firebase Hosting
'on':
push:
branches:
- master # branch to target
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Install dependencies & build public-site
run: npm ci && npm run build
working-directory: public-site
- name: Install dependencies & build admin-site
run: npm ci && npm run build
working-directory: admin-site
- name: Deploy websites
uses: FirebaseExtended/action-hosting-deploy#v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_APP }}' # edit here
projectId: my-app # edit here
channelId: live
So every push/merge on master will be build each apps and deploy them on Firebase Hosting
I have used firebase hosting to host my app in the root however I would like to serve a separate codebase for my forum under https://myapp.com/forum/
I created two targets: app for my root app in one repository and forum for my other repository. I also created two sites in Firebase.
My question is: is it even possible to have two separate repos and use firebase deploy to have one project under root and other under /forum/
firebase.json (app):
"rewrites": [
{
"source": "!/forum/**",
"destination": "/appIndex.html"
}
]
firebase.json (forum):
"rewrites": [
{
"source": "/forum/**",
"destination": "/forumIndex.html"
}
]
I would like Firebase to show app in the root and forum when I point to mydomain.com/forum/
You can maintain your code in two different repos but once you want to deploy to firebase you'll have to build both and deploy both from the same directory.
I expecting see my firebase website but instead of the web app, I seeing this image. I think I followed the Firebase Hosting docs.
Here's my firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
After running firebase deploy, it says:
Deploy complete!
What did I miss? :(
Thanks,
Adi
This is infact your website. When you run Firebase init it prepopulates the public folder (which you selected to be your dist directory) with the sample site you are seeing. You must place all of your HTML, CSS, and JavaScript into the dist directory and the run firebase deploy --only hosting
I'm following this tutorial Getting Started with Firebase Hosting on the Web - Firecasts
I'm trying to host a simple index.html file in firebase but when I type firebase deploy its gives me the following error:
No targets found. Valid targets are: database,storage,functions,hosting. hosting error image
I found my firebase.json file is empty it contains only { } .
run firebase init again.
When you are asked for - Which Firebase CLI features do you want to setup for this folder?
Press Space to select features, it will mark that feature with asterisk.
Then Enter to confirm your choices.
Make sure you select the options by pressing spacebar, then press enter.
run firebase init and if your firebase.json is empty with only {} then add
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
replace "public": "app" with "public": "public"
then run firebase deploy
I am trying to use the cleanUrls option to drop .html in routes. Works nicely locally with firebase serve. But once deployed to prod, .html is required.
My test site: https://maptennis.firebaseapp.com/
Click on Login will drive you to /login and gives a 404. Append .html to the URL and it will work.
My firebase.json config file:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public"
},
"cleanUrls": true,
"trailingSlash": false
}
Any insight here would be great.
I was facing similar issue. My firebase.json file looked like this:
{
"hosting": {
"public": "public"
},
"cleanUrls": true
}
I noticed I was using an older version of Firebase CLI. When I updated to the latest version and tried to deploy with same config file, following error occurred:
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.
I changed my json config file to this:
{
"hosting": {
"public": "public",
"cleanUrls": true
}
}
Deploy was successful and cleanUrls worked this time :)