Firebaseui-web: Localized Widget is not supported with npm module

[martinvarelaaaa]

Localized Widget is not supported with npm module,
only works in English...

It would be helpful support multi languages...

[bojeil-google]

You can clone the repo and then build the localized binary:
npm run build build-js-{LANGUAGE_CODE}

[pablocattaneo]

Hi! I run the example command _npm run build build-js-fr_ then went to the _node_modulesfirebaseuidist_ folder but there is no _firebaseui__fr.js_ file. I am using _Windows 10 64bit_, _npm 5.4.2_ , _node v6.11.4_

[bojeil-google]

You are looking in the wrong place. The generated files are located in the \dist folder in the repo root. Not under \node_modules

[pablocattaneo]

Ok great. I have been built my firebaseui__fr.js in the repo root. Now, how I implemente it? I copied this file in "node_modules/firebaseui/dist" but it didn't work. Please can you tell me how continue?

[bojeil-google]

Can you elaborate? You provide no details. Provide snippets and error details.

[pablocattaneo]

Yes of course.

Basically I don't know what I have to do after build the library as is indicated here: https://github.com/firebase/firebaseui-web#building-firebaseui. I don't know how to implement it into my app after the build it.

I am building a web app using Ionic.

Using npm I installed:
"firebase": "^4.8.0",
"firebaseui": "^2.5.1",

To translate firebase ui to French as the example in https://github.com/firebase/firebaseui-web#building-firebaseu I downloaded the repo and in the root I executed npm install and then npm run build build-js-fr. Then copy the firebaseui__fr.js file generated in dist into "node_modules/firebaseui/dist" into my app (this folder was created when I run npm install firebaseui --save for the fist time). Then I refreshed the server and the browser but I didn't see any change, the widget is yet in English.

[bojeil-google]

if you are building this with npm, generate the npm build via:
npm run build build-npm-fr

This will generate dist/npm__fr.js
Then basically require it:
import firebaseui from './npm__fr';

We should probably document that. We only document the CDN build.

[pablocattaneo]

Great it works!! I think it would be great if you add it to the document, maybe it looks basic but it is relevant information for those that are novice in npm and modules and you problably you will save a lot of effort to this persons.

On other hand, I created the translation for france and spanish (npm run build build-npm-es) but when a try to build the npm package for spanish latim america code (npm run build build-npm-es_419) I get this error:

npm run build build-npm-es_419

> [email protected] build /home/pablo/Downloads/firebaseui-web-master
> gulp "build-npm-es_419"

[21:35:30] Using gulpfile ~/Downloads/firebaseui-web-master/gulpfile.js
[21:35:30] Task 'build-npm-es_419' is not in your gulpfile
[21:35:30] Please check the documentation for proper gulpfile formatting

npm ERR! Linux 4.4.0-109-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" "build-npm-es_419"
npm ERR! node v7.6.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `gulp "build-npm-es_419"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'gulp "build-npm-es_419"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the firebaseui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp "build-npm-es_419"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs firebaseui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls firebaseui
npm ERR! There is likely additional logging output above.

[bojeil-google]

It should be npm run build build-npm-es-419
You are welcome to send a PR to update the doc with the instructions :)

[DanielJackson-Oslo]

I tried this (with norwegian language) but end up with the following:

(It's the npm__no.js, just renamed)

Firebase and firebaseui are installed through npm.
I then cloned the repository, ran npm install and did: npm run build build-npm-no

It then created a npm__no.js file, which I imported to my src/ folder as "firebaseui__no.js" and am including like this:

import firebaseui from '../firebase/firebaseui__no.js'

Any ideas?

[pablocattaneo]

Hi Daniel, Apparently the problem is that you are importing the file from firebase instead of firebaseui module.
I followed this steps to it worked:

1. npm install firebaseui --save
2. Dowload repo and compiled firebaseui__[languaje].js (in my case: npm__es_419.js';)
3. I copied the file into the folder firebaseui/dist/ (previously installed by npm)
4. I Imported it in angular as follow: import firebaseui from 'firebaseui/dist/npm__es_419';

[DanielJackson-Oslo]

Hi @pablocattaneo

You're right that your setup works! 👍

However, I don't like to modify node_module folders like that.

I'd love to keep it out of node_modules so that I can delete it and run npm install to rebuild it without any problems.

Is there a setup where I can convince node to load a custom firebaseui from ./src/ ?

Or should I just keep a the custom firebaseui on hand for when I will overwrite node_modules?

[JulienSopheos]

Any update about a clean solution to build language file with npm i without copy/pasting the file from the firebaseui-web repo ?

poke @bojeil-google

[wti806]

@JulienSopheos We have plan to support localized version with npm. Unfortunately currently we are busy with some other higher priorities. But it's definitely on our road map.

[ljmcadenas]

Hi @DanielJackson-Oslo and @pablocattaneo!
Thank you guy for your discussion. It helped me a lot.
A clean solution would be to compile it with the language you want and create a github repository. Then you can import it from packages.json.

Here a repository example I found:
https://github.com/franvera/firebaseui-web-es