Firebaseui-web: Multilingual support?

[compojoom]

I'm wondering whether I'm understanding the docs correctly: https://github.com/firebase/firebaseui-web#building-firebaseui

I've followed the steps - cloned, ran build-npm-de and in dist I have the generated tranlations. Now as far as I understand I have to place those in node_modules/firebaseui/dist ?

Is this really the way to do this? If we do it like this we no longer can do npm install/ yarn as we'll have to manually copy the localized files?

[bojeil-google]

The instructions are clear. The localized binaries are currently not shipped with the npm module. You have to build them on your own. Once that is done, you can directly use them. You can place them anywhere you want.

[bodrin]

I had issues building this project but just curious how big are these?
I mean if I have N locales and bundle all of them with webpack will there be any "duplicate" code there? size is not N * X?

I'm asking as I have tried using the ones from the CDN (in a single page app without refreshes using script.js loader) and I saw that everytime I request a new one I got ~200kb download. Also the last one wins - they conflict with each other and I'm no longer able to switch back - for example showing "en" then "de" and then I cannot show "en" one again. I can do it only if I place some random string into the url like https://www.gstatic.com/firebasejs/ui/2.7.0/firebase-ui-auth__{LANGUAGE_CODE}.js?sfsdgsdfg ... which results in another ~200kb..

[compojoom]

@bojeil-google - could you clarify. What do you mean with localized binaries? I followed the instructions to the point and I have this files:

I tried to add them directly in our project(without putting them in node_modules), but trying to include them in the source code with

import firebaseuid from '../path/to/file/firebaseui__de' fails. I get a bunch of errors.

[bojeil-google]

I meant the firebaseui__de.js localized binary.
Last I tested this, it was working as expected.
Please check this thread: https://github.com/firebase/firebaseui-web/issues/291

[compojoom]

Hm, as I said above it doesn't work for me when I paste the files in my source directory, but it works when I paste them inside node_modules/firebaseui/dist

When I have them in src/dist I get

./src/dist/npm__de.js
  Line 73:   'define' is not defined          no-undef
  Line 73:   'define' is not defined          no-undef
  Line 212:  'accountchooser' is not defined  no-undef
  Line 212:  'accountchooser' is not defined  no-undef
  Line 212:  'accountchooser' is not defined  no-undef
  Line 337:  'grecaptcha' is not defined      no-undef
  Line 360:  'firebaseui' is not defined      no-undef

Search for the keywords to learn more about each error.

[franvera]

I was having the same problem:
Add the local repo like so: yarn add file:../firebaseui-web // change to your local path
After building, import firebaseui with: import firebaseui from "firebaseui/dist/npm__es.js"; // Change to your desired language

[nicolasgarnier]

The best here if you're using NPM to import your dependencies (and especially if you are using a bundler like webpack) IMO is to use npm link:

• Clone this repo and compile it to get the localized versions
• From your project you add firebaseui as a dependency like normal (e.g. npm install --save firebaseui)
• You'll "link" your locally built version of firebaseui as the source of truth using npm link. Please read: https://docs.npmjs.com/cli/link
  
  
  
  • If you afarere importing firebaseui it will import it from the local version now so you should be able to use stuff like require('firebaseui/src/dist/npm__de') // Note: Not 100% sure about the syntax here.
  
  

Voila

[nicolasgarnier]

IMO I think it would really help to have all localized version in the NPM distrib ready-to-use and I've filed an feature request here: https://github.com/firebase/firebaseui-web/issues/242 please let's use that issue instead if you have further questions or want to share working workaround sample code in the mean time.