Angular Universal + Firebase cloud functions deployment issue - firebase

I've been stuck on this issue for some time now.
My Angular project version is 9.0.3.
The #angular/fire version is 6.1.4
I have followed the guide here
The project builds and renders for the local Express server I have.
The problem occurs when I deploy the project to Firebase with a cloud function that will render the application.
Running the command ng deploy gives the below error
Error: ENOENT: no such file or directory, open '/home/teebo/Development/motf/dist/motif/browser/index.html'
This issue is linked to a reported issue here
I have investigated and found that in the project's dist folder, a index.original.html file is generated instead of index.html.
I have opened an issue here with no feedback from the maintainers.
If there is anything I am missing or there's something I can do to circumvent this issue, please share and any suggestions are appreciated.
Any suggestion, comment, anything.

I have found a way to circumvent this issue.
This is not a proper solution for the ng deploy issue but at least I can deploy the ssr function.
Because my dist folder is nested in another dist folder (Which does not include the browser build folder), that is why I was getting the error when running ng deploy. Below are steps I've followed to at least be able to deploy.
Run ng deploy (It will error out with the above error but will build the app and create a dist folder).
Copy the browser folder to the dist folder that does not have it (In my case I have copied it to a dist folder one level up).
Deploy the ssr function by running firebase deploy --only functions:ssr (You can change functions:ssr to whatever name you have named your function).
This worked for me;
It would save time to write an npm script to do all this but then; I am not sure if my firebase/universal config is wrong or there is a bug with #angular/fire.

Related

How long it takes for a firebase hosting to work?

I followed the instructions, and deployed a simple web yesterday. At first, it kept showing the default website, saying " you've deployed successfully...", not my web.
Also, the 'firebase open' command + "Hosting: Deployed Site" leads to a undefined site:' undefined.firebaseapp.com '.
But, magically, about an hour later when I open the link from 'firebase console' again, the web showed up... I am not sure whether 'firebase open' command worked cause I didn't try.
Today, I added some features, and deployed again. In the firebase CLI, it said deployed. But, the link still showed the old version.
I'll catch up an hours later to see whether it works, but even it works, it takes too long.
has anyone had the same experience? what's wrong with my web?
Thanks.
This is how I solved this issue for my angular 7 app deployment on Firebase hosting:
ng build --prod
go to dist/myproject and run command Firebase init and...
I went to dist/myproject that now contain build files along with Firebase related files. Copy all files except Firebase related files to dist folder in side dist/myproject.
there you will get overwrite warning just select overwrite option.
after copy process completes, run command Firebase deploy.
after completion of process go to shown URL and there you will find your running app.

After Firebase deploy - Error: cannot find module

Running a Node.js function in the local Firebase server does not result in the error below, but when I do firebase deploy and try to run the same function on the deployed server I get this error in the Firebase Functions log (in the web Firebase console):
Error: Cannot find module '#google-cloud/speech'
What have I missed? (I can run some other functions on the deployed server, but I am new to this and have no idea if I have done something different, or if there is something different about this npm module.)
Cloud Functions will only install the modules that you've declared as dependencies in your package.json (and their dependencies) in the functions folder. If the module doesn't show up there, you won't be able to access it directly from your code. Be sure to run #google-cloud/speech from your functions folder, so that you can use it both during development an when deployed.

Why does firebase warn "* You are currently outside your home directory" during an init?

I am trying to deploy my first firebase app. I am getting the message "* You are currently outside your home directory" I googled it and found this reply
"commented on Dec 6, 2016
Just to make sure you're aware. If someone is experiencing the same problem with with the command firebase init
Make the files .firebaserc and firebase.json manually and the deploy should work normally."
I do not know where to create them or what the should contain.
I have also gone to https://www.npmjs.com/package/firebase-tools to try to fix this problem.
If any one can help with this problem I would appreciate it.
If anyone else worried about this just keep going. I continued with the deployment and it deployed OK.
download firebase CLI binary (in case you didn't download it yet. this is an .exe file if you use windows).
copy the downloaded file into your project's root folder (Folder which contains all the files and folders of your projects).
run the firebase-tools-instant-win_2.exe (firebase CLI binary).
a command window will open.
execute all your command in there.
Initialize a Firebase project
Many common tasks performed using the CLI, such as deploying to a Firebase project, require a project directory. You establish a project directory using the firebase init command. A project directory is usually the same directory as your source control root, and after running firebase init, the directory contains a firebase.json configuration file.
To initialize a new Firebase project, run the following command from within your app's directory:
I used firebase init project in my project's directory to get it to work

firebase deploy not updating html file, not a cache issue

I'm doing a firebase deploy, but my local file does not match my served file. I have quadrupal checked the file that's in the deployed directory, I've disabled cache, I've hard reloaded, I've navigated directly to the file, I've made additional changes to the file, I've deployed from my local dev machine and from a clean CI server.
I navigate to http://localhost:3000/views/tasks.html and see one html result and then to https://[my-firebase-url]/views/tasks.html and see an older html result for the same file.
I've done firebase deploy --debug and everything is reported as successful and the file count is correct. Is there any additional information I can find out myself? Is there a way to look at the build that's uploaded to firebase mentioned in the debug file?
This has worked every time I've ever done it until now with the same project and file structure. Any way to troubleshoot this would be awesome. Thanks!
in my case I forgot to build(ng build --prod) the modified project to update the dist folder, which is uploaded on firebase server when deploy
As the comment by Frank van Puffelencheck mentioned, checking the Firebase status dashboard for the latest information is an additional step to take. If I had done that, I would have seen that the firebase deploy service was having issues at the time.
The issue for me was that I did not save the file. As i was working with bracket and seeing the modification, I forgot it.

meteor gets stuck on Processing files with ecmascript (for

Latest meteor version 1.4.0.1. All of a sudden it got stuck on Processing files with ecmascript (for... step. Killing and restarting didn't work, neither did rebooting.
What I tried: meteor reset, rebooting, deleting build and cache folders in project's .meteor folder, deleting and reinstalling npm packages. Removing .meteor in my home folder and reinstalling meteor from scratch. Removing packages, both meteor and npm, that I no longer use.
This is something in my project because creating a new meteor project and running it works fine. The project uses React and has a number of components.
Any ideas on how to fix this?
I solved my issue by process of elimination. I saved a .js file in my client/js/lib folder while working on a feature. At some point later I accidentally saved my meteor application's home page in the same folder! Guess I was too tired. Found the folder and then saw the html and a subfolder with meteor-generated scripts. Removed them and everything clicked. My exact steps:
create a new meteor project, copy over package.json and
.meteor/packages files run meteor npm install and then run the
project with meteor
while the project is running start copying over root app folders one
by one, wait for app to recompile before moving on to each folder
my problem surfaced when I copied over the client folder. Meteor said
refreshing client and got stuck there.
I removed the client folder, killed the process (run ps command, kill
-9 [PID] where PID is the process id with the high CPU time.) and then restarted meteor again
created client folder manually and then started copying client/*
items over one by one
that's when I noticed the app_name.html and app_name folder with a
lot of .js files in it!
I removed them and everything works now. Good luck!
You can try running meteor reset command and then running the project again.
I ran into a similar (but different) problem. I am trying to use plotly.js with meteor. I downloaded the plotly.js file and put it into my client/lib directory. Now, when I try to run meteor, I get the same error being described above. I thought plotly.js worked with meteor? If I remove plotly.js (or rename it to a non js file), meteor works fine...so the issue is clearly with plotly.js

Resources