telereso-web

Telereso

npm package to use Telereso,

Telereso will allow you to control your app resources (strings,images) remotely and out of the box , without the need to add extra logic.

Installation

Telereso depends on Firebase to use Remote Config for resource management

All you need to get started is make sure your project has set up firebase (check docs),
Setup i18n as usual (check package)
Then add Telereso dependency to your project

# Using npm
npm install telerso-web

# Using Yarn
yarn add telerso-web

Usage

Initialization

Make sure your already set up your normal localization using i18n

There are 2 options to initialization :

1. init()
   Will not make api calls, it's just to set up resources, In your index.js file, call init() and make sure to pass i18n and firebase object:

   import i18n from "./i18n";
   import {Telereso} from "telereso-web";
   import firebase from "firebase/app";
   import App from "./App";
   
   // Initialize Firebase
   const firebaseConfig = {
       apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
       authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
       projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
       storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
       messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
       appId: process.env.REACT_APP_FIREBASE_APP_ID,
       measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
   };
   firebase.initializeApp(firebaseConfig)
   Telereso.init(i18n,firebase);
   
   ReactDOM.render(
   <React.StrictMode>
        <App/>
   </React.StrictMode>,
   document.getElementById('root')
   );
      
   

2. susbundedinit()
   Will make sure to fetch the latest changes from Remote Config and not to start the app unless all resources are ready. firebase should be setup in index.js check previous option

   import i18n from "./i18n";
   import {Telereso} from "telereso-web";
   import firebase from "firebase/app";
   
   
   export default class App extends React.Component {
   
       state = {
           splashFinished: false
       }
   
       componentDidMount() {
           Telereso.suspendedInit(i18n,firebase).then(() => {
               this.setState({
                   splashFinished: true
               })
           });
       }
   
       render() {
           return (this.state.splashFinished ? <Home/> : <label>Loading...</label>);
       }
   }
   

   For loading state you can choose your own splash.

Telereso
   .disableLog() // disable genral and main logs
   .enableStringsLog() // enalbe initialization strings logs to debug current local and remote fetch
   .enableDrawableLog() // enable drawable logs
   .enableRealTimeChanges() // enable real time changes , by default remote cache is 12 hours , once enalbed will be 1 sec
   .init(i18n,firebase);

Skipping the Initialization will not cause crashes, but the app will not be able to use the remote version of the resources, So it is a way to disable remote functionality.

Firebase

Please follow the steps found here to set up your Remote Config correctly.

Localization

Now you can extend your localization in one language or even more languages by adding them directly to Remote Config,
No extra steps needed from client.

Images

You can make your asset images dynamic with one simple change,
Use RemoteImage instead of img

Example Before

import logo from "./assets/images/img.png";

export default class MyComponent extends React.Component {
  render() {
    return (
          <img src={logo} />
    );
  }
}

After

import logo from "./assets/images/img.png";

export default class MyComponent extends React.Component {
  render() {
    return (
          <RemoteImage src={logo} />
    );
  }
}

In Remote config console make sure to use full path after the assets like icons/image.png as your key in your drawable json, like:

{
  "img.png": "<url>"
}