Related
I was building a small web app using Vue cli and webpack/babel. I've been working for a month using "npm run build" and placing the files created in th "dist" folder on my server. Now I would like to add Firebase to the project but "Firebase deploy" command doesn't build the same files. It actually creates a new placeholder index.html file and even if I replace that file file for my previous html I'll get loads of errors because all the other components are not there (no JS no CSS)...
This is my firebase setup.
These are the files I used to create using "Npm run build" in the "dist" folder
The new "Firebase deploy" files – now in the public folder – no JS no CSS!
The errors I get now...
It seems like now all the dependencies that were build nicely put together by the Vue Cli webpack/babel workflow are all gone. Any suggestions on how to fix this without having to start from scratch?
Now even if I type NPM run build i get errors:
With npm run build you build your Vue.js application, independently of Firebase.
It is not clear to me if you still build your app to the dist directory or to the public one. But, based on your Firebase setup ("What do you want to use as you public directory"), at the end you need to have ALL the files (incl. css and js) produced by npm run build in the public directory.
One simple solution is to change the public directory of Firebase to dist: you can do that in the firebase.json file and change "hosting": {"public": "public",... to "hosting": {"public": "dist", ....
A last point: you have answered No to the question "Configure as a single-page app". Normally, with a Vue.js app you should answer Yes.
What is the best Way to deploy a vue.js app initialy created with vue-cli to Firebase Hosting?
I prepared the vue-app for deployment with
npm run build
This creates the folder "dist" with the bundled js-file and assets like pictures.
Then- after installing firebase tools globaly, I run
firebase init
This creates a folder "public" with a default index.html file inside.
First i set in firebase.json:
"hosting": {
"public": "dist"
}
and copied the index.html (the vue index.hltm) from the root-folder to "dist" folder.
Then i deployed with
firebase deploy
It runs, but the paths to the pictures seem to be broken .
I set public folder to "public" in firebase.json
"hosting": {
"public": "public"
}
an put vue index.html there, but then "dist" is not found.
I moved the "dist"-folder inside the "public"folder, and finaly- App is online on firebase.
But now npm run dev is not working any more. Firebase cli seems to break vue-cli.
So how to get vue-cli and firebase-cli playing together?
When you run firebase init few questions will be asked, like which firebase feature you want to use and select your project... when cli asks for
? What do you want to use as your public directory?
Type dist your desired folder. Now the dist folder will be deployed.
Check this link, Hope this helps.
I think i figured it out.
First, keep two separatet Projects, one for vue app and one for Firebase-Hosting.
So the CLI's can work independently and nothing gets broken. Develop your vue.js App and prepare for deploy with npm run build. All you need afterwards is the index.html in vue-project root and the folder dist
Create Firebase project with CLI executing firebase init in empty Folder. Here you can also maintain firebase functions if needed.
You define public directory during firebase init or afterwards editing entry in firebase.json
"hosting": { "public": "public"}
This will become the root-directory of your App. Vue.js expects to have index.html directly in the root-directory and a subfolder dist inside it.
So defining dist as root-directory is not what you want. Related paths like those for pictures in vue-app get broken.
Leave settings for public at default. Then copy index.html and dist-folder from vue-project inside public directory in Firebase-project.
If you want, you can now test localy what will get deployed using firebase serve
If everything fine, deploy using firebase deploy
dist should be your public folder. Here is the working configuration for VueJS with Firebase hosting:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I've also written a written an in-depth guide on auto-deploying VueJS apps to Firebase hosting
I am new to firebase, and I try to deploy my app to firebase. I have followed all the steps. But, for some reason is not showing up my app. I am getting the welcome modal instead of my web app.
Here are the images:
The step to deploy are as following
STEP 1:
ng build --prod
STEP 2:
firebase init
*Are you ready to proceed?* Yes
*What do you want to use as your public directory?* dist/{your-application-name}
*Configure as a single-page app (rewrite all urls to /index.html)?(y/N)* Yes
*File dist/{your-application-name}/index.html already exists. Overwrite?(y/N)* No
STEP 3:
firebase deploy --only hosting
And if still you are getting the same page just press 'CTRL + F5' it will clean the cached.
It's because the index.html has modified itself when you selected "Y" while initializing the firebase. It has basically replaced your own index file to this one. Check and replace the index file and next time, do not overwrite index.html file. It would work.
I faced the same problem. In my case the issue was not with firebase. Just clearing the cache was the solution.
Firebase hosting not showing up app?
There might be two reasons for this problem
1st step:
Make sure your public folder (define in your firebase.json) 'dist' containing the index.html hasn't been modified by firebase init command, if yes replace it with your original project index.html
for reference (dist is standard but your may different)
{
"hosting": {
"public": "dist"
}
}
2nd step:
Make sure to configure your base href in project's index.html
as
< base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">
and other bundle files as
< script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js"></script>
< script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/polyfills.14fc14f3e029a8cfd046.js"></script>
< script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js"></script>
3rd step
run the command firebase deploy
enjoy ! ;)
I had ran to this issue and
If anybody had encounters the same after using firebase init command,
check your index.html file in your public folder (for react).
it might have been overridden by firebase.
in order to tell firebase not to override your existing index.html file,
type 'N' when firebase asks if you want to override the existing index.html file
If someone is here because of a
it seems like some domains ending with web.app are blocked from ISP providers, for some countries, I used a private VPN and access my site until it was fixed.
If you're seeing what's in this screenshot, there's another index.html file generated by Firebase, and it points to this one instead of your own. Here's how to fix:
Delete the Firebase-generated index.html and keep your own.
Re-deploy using firebase deploy
For myself, the problem was I given an absolute path to my app location, firebase init seem's only take a relative path.
Since Angular v6 CLI projects are making it easier to have multiple apps with shared codebases. Hence the new folder within dist.
Quoting dotGitignore answer:
I found that the ng build --prod will create a dist and an another
subfolder under this where the project location is.
Check how to fix it here https://stackoverflow.com/a/50360478/11652243
Only solution is firebase deploy file is index.tml but we need build file so replace your
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Just replace your firebase.json file with this and you will se the magic
There are a few instances where nothing is really needed. Move all your static files into the public folder you chose. use command
firebase deploy
and just clear the cache by hitting ctrl+f5.
that did it for me.
I faced similar issue when deploying a website in firebase.
Firebase usually creates two default domains, web.app and firebaseapp.com.
If one doesn't work out, use another.
This solved my problem. Try it!
Make sure that you uploading your files to firebase.
Else, use firebase deploy --only hosting to deploy to files from the public directory to firebase.
Follow these steps for the usual deployment. https://alligator.io/angular/deploying-angular-app-to-firebase/
You have to check whether index.html inside the dist folder is regenerated by Firebase.
If so, all you need to do is just delete that html file which is modified by Firebase and create a new index.html file then enforcedly update the content with index.html which is actually created via $ ng build --prod. Now enter $ firebase deploy --only hosting.
So keep an eye of your index.html file contents and its location. if its location is not dist folder. you should give proper location accordingly for public field from firebase.json file.
I have same issue. Follow below steps:
firebase init
*Are you ready to proceed?* Yes
Make a public folder and Copy your all files into it
*What do you want to use as your public directory?*(public) -->only press enter
*Configure as a single-page app (rewrite all urls to /index.html)?(y/N)* N
*File public/index.html already exists. Overwrite?(y/N)* No
Thats it your app will host...
#arslan's answer helped me here & worked for me, went from a blank webpage to being able to see my app.
My solution: I edited my firebase.json file and then npm run build and then re-ran my command firebase emulators:start. Changed the file from
{
"functions": {
"source": "functions"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
to...
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Figured it out myself, What solved my issue:
ran build (npm run build)
add manually firebase.json and .firebasesrc files to root folder
make sure firebase.json hosting->public is set to "build
run firebase deploy
I had the same issue, I realised for some wierd reason, the firebase.json wasnt in my repo. I created it with config from the above examples, and then I did firebase init again, after it run it found my firebase.json and modified it, it worked
I ran into this same issue and resolved with below steps:
HACK Solution
Step:1 Go to your build folder and replace index.html with your index.html(public folder).
Step:2 Run command: npm run build
Step:3 Select NO => File dist/{your-application-name}/index.html already exists. Overwrite? (y/N) No
Step:4 Then go to the link and press Ctrl+f5. your app will be in front of you. :)
after command firebase init, go to public or dist folder and select all files (not folders) except firebase related files and copy into dist or public folder. After this execute command firebase deploy and wait for a while. After finish go to mentioned url there you will find your working app.
When you ran firebase init Firebase creates a file structure in your project folder and depending on the selections you made it created a /public folder (or another name if you specified) for your public files. Within that /public folder it also creates a index.html file containing the welcome message you are seeing. You need to take your app files (web pages, etc) and move them into that public folder and replace that index.html file along with them. After doing this run the command "firebase deploy" and it will update and you should see your app.
The fix that worked for me was using the second link that firebase provides instead of the first one:
USE: your-project-id.firebaseapp.com (instead of: your-project-id.web.app)
Before deploying ensure your files are in the newly created directory e.g y or public folders
in my case after building with ng build i told firebase the source directory is dist, but actually it was dist/my-project...
(there was a firebase index.html in dist. angular index.html was in dist/my-project...)
Sometimes when this happen you need to logout firebase logout on your CLI,
then login again firebase login.
Then repeat all the procedures for hosting
And make sure you initialized Firebase Firebase.initializeApp() on your main method if you are using flutter.
This worked for me.
During initialization of the firebase directory you need to choose build as public directory.
The run
1.npm run build
2.firbase deploy
If this doesn't work try clearing the cache of your browser.
Here I found an answer to the question
Step1: Initialize the firebase first.
$firebase init
Step2: Create a production build now.
$ng build --prod
Step:3 It's time to deploy your app.
$firebase deploy
I was stepping through this tutorial:
https://codelabs.developers.google.com/codelabs/firebase-web/#0
On step 9 it asks you to execute firebase deploy but when I try to do it I get the error message:
Could not read public directory. Remove links and shortcuts and try again.
I don't know what it means by links and shortcuts as far as I can tell there nothing in this folder but plain old files.
The folder I'm trying to deploy is the web folder which should contain the completed sample.
Note that as per the instructions the storage.rules was updated with the name of the bucket and the index.html was updated with the firebase snippet.
The firebase.json file looks like this:
{
"database": {
"rules": "database-rules.json"
},
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"database-rules.json",
"storage.rules"
]
}
}
Any ideas as to what this error could be? Is there any way to get more detailed information?
You should use debug command like this: firebase deploy --debug , this can help you find out what cause this problem easily and clearly.
In my case a temp emacs file was causing the issue:
$ firebase deploy
=== Deploying to 'xxxx-42402'...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing public directory for upload...
Error: Could not read public directory. Remove links and shortcuts and try again.
RooseveltPwnsU:xxxx xrdawson$ ls -la public/
total 3840
-rw-r--r-- 1 xrdawson staff 5122 Feb 13 12:52 #index.html#
drwxr-xr-x 15 xrdawson staff 510 Feb 13 14:40 .
lrwxr-xr-x 1 xrdawson staff 35 Feb 6 14:12 .#index.html -> xrdawson#RooseveltPwnsU.local.67168
Saving the file index.html inside emacs resolved the issue for me!
The problem was firebase-debug.log
The issue turned out to be unrelated to the configuration. The issue actually turned out to be a file permission issue with firebase-debug.log. I solved the issue by copying everything but that file into a new folder and deploying the new folder.
How I found out
Since there is no way to tell that's the issue from the error message above. I thought it would still be useful to walk you through the process I used to uncover the issue.
Windows 10
First I want to mention that I'm on a Windows 10 computer, I don't know if that's relevant, but just in case it is I thought I'd mention it.
1. Compare to a working project
In order to have a baseline / frame of reference, I created a new project using the firebase init command.
I then tried to deploy that. That was successful, so I knew deployment in general worked.
2. Use the same firebase.json
I then took the auto generated firebase.json file from the working deployment folder and replaced the firebase.json file in the project folder where the deployment wasn't working.
When I tried to deployed it still didn't work.
3. Remove permissions
At this point I suspected it was a permission issue. So I decided to zip up the folder and then unzip it to a different folder. Then try to deploy the new folder.
The theory being that the permissions would be wiped out in the process.
When I tried to zip the file I got a file permission error message. The name of the file with the issue was firebase-debug.log. That's the file that automatically generated when you try to deploy.
firebase-debug.log is automatically generated by the firebase deploy command
So instead of zipping and unzipping I just copied all the files except firebase-debug.log and tried to deploy that.
Success
It worked!
Still haven't figured out how to actually delete that damn file though.
After a rough search with no solution, I tried npm i then firebase deploy. Yay! it works.
I had this problem and in my case it was firebase serve that was locking the file. Stopping that process allowed the firebase deploy to run successfully.
I suspect its actually because two separate instances of firebase are trying to write to the same log file and serve holds a lock while running.
I just deleted the firebase-debug.log file and entered the following command:
firebase deploy --only funtions but firebase deploy will also work.
in my project i needed to deploy, but if you need to test locally try firebase serve or firebase serve --only functions or firebase serve --only functions,hosting based on your needs.
There's a possibility that you are in /functions when you want to deploy. In my case I run the firebase deploy --only functions:FOOBAR command in root (out of functions) folder and it worked.
Deleting node_modules and package-lock.json and rerunning npm install fixed the problem for me.
This seems like something which should be pretty easy to do, but for whatever reason, I'm being defeated.
I'm trying to use the firebase-tools CLI to interact with my database. I'm able to login without any trouble, and when I type firebase list, I get a list of all my current apps. It also tells me which app I'm currently connected to.
My problem is, I want to connect to one of the other apps. I'm running queries on my staging app, and I need to run them on my production app. I can see the production app in the list, but I'm not finding any way to switch to that app.
Thoughts?
Found some useful information here Firebase CLI Reference.
The following code works for me.
firebase use <project_id>
I rather use scripts. Consider a project structure like this:
your-project
├── .firebaserc
└── functions
├── package.json
└── index.js
Go to .firebaserc and follow the next example
{
"projects": {
"default": "project-name",
"prod": "other-name"
}
}
Then go to package.json and add the following scripts (changeToProd, and changeToDev).
{
...
"scripts": {
...
"changeToProd": "firebase use prod",
"changeToDev": "firebase use default"
},
"dependencies": {
...
},
...
}
If your IDE support npm scripts you can run them using the IDE UI, otherwise it can be run using the command console. Make sure you are inside the functions folder.
npm run-script changeToProd
You can verify your current project by running the following command from the terminal or added to the scripts as we just did
firebase use
If you are using Node.js on windows, your answer should be
firebase use <project_id>
but without the <> for example
firebase use chat-app-2a150
You can use the following code to view all your projects so as to pick the correct project ID to use
firebase projects:list
2020:
The officially recommended way is to use "alias":
In your .firebaserc, set different project IDs like this:
{
"projects": {
"production": "my-project-id",
"testing": "my-testing-project-id"
}
}
// you can also add them interactively with `firebase use --add`
Then switch projects in CLI with firebase use testing , firebase use production.
Note: switching projects won't create any git diff, it's simply remembered in your local machine. Use firebase use to see which project is currently being used.
Uncommon cases:
If you want to use your own ID without committing changes to the project owner's .firebaserc, do firebase use my-own-id locally as mentioned in the accepted answer.
If you want people to fork your code then use their own IDs, add .firebaserc into .gitignore.
In the directory where you run firebase list, there will be a file called firebase.json. If you open that in a text editor, you will see the app name in there. You can change it there or delete firebase.json to change the app.
Or save yourself the hassle of editing a text file and do as Jason says: use firebase init.
you can just use a command line switch
--project=my-firebase-project
I may be wrong but it seems that the original question was about changing apps within a given project, rather than simply changing projects.
This answer is about changing apps and site_IDs within a project.
In my case I have a project (CoolProject) with 2 web apps:
an assessment form: form
a main website: website
Both apps are in separate repos both locally and in GitHub.
Each app has its own specific site_ID:
form: coolproject-form[.web.app]
website: coolproject-website[.web.app]
I first setup the form app and deployed without any issue to coolproject-form. But when I created the web app (and associated coolproject-website site_ID) and tried to deploy it using firebase deploy --only hosting or firebase deploy --only hosting:website it incorrectly deployed it to coolproject-form overwriting the form app.
This is how I eventually solved the issue (based on this Firebase documentation):
Check that both apps and corresponding site_IDs are correctly setup:
firebase apps:list
firebase hosting:sites:list
Setup up the website deploy target for hosting (via .firebaserc)
firebase target:apply hosting website coolproject-website
Update firebase.json (for the website app):
...
"hosting": [{
"target": "website",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}],
...
Deploy
firebase deploy --only hosting
With this the website app is now correctly deployed to coolproject-website.web.app.
Addition #cutiko's answer
In package.json
"scripts": {
...
"prod": "echo \"Switch to Production environment\" && firebase use prod && npm run runtimeconfig",
"dev": "echo \"Switch to Development environment\" && firebase use default && npm run runtimeconfig"
...
npm run runtimeconfig to get custom config environment
In .firebaserc
{
"projects": {
"default":"{project-dev-id}",
"prod": "{project-prod-id}"
}
}
to change firebase app destination project you can type "firebase use myProjectName" . i also used the above answeres "firebase list" to check what project i have
( work for me in firebase cli 7.4 with angular 7 app)