Skip to content

Deployment Guide

As a user of the PSI system, you can choose to use New Public's instance of PSI, share a partner's instance of PSI (particulaly for partners in your home market you wish to share conversations with), or deploy to your own instance.

Deploy your own instance of the content proxy

If you haven't integrated PSI into your real site yet, then you'll want to deploy the content proxy to rewrite your website to include the psi.js script that sets up sidebar and teaser iframes.

Create and Connect a Firebase Project

  • Go to the Firebase Console
  • Click Create a Project
  • Type in an arbitrary project name (I'm using deploy-demo-psi-product), and press Continue
  • Decline Google Analytics, and press Create Project
  • Run firebase use --add in psi-product to connect your newly created project id with your checked out code. When asked for an alias say production.

Enable Billing

  • Click on the Spark icon next to your project name
  • Follow the prompts to set up the Blaze plan.

Set Up Authentication

  • Open the Firebase Console
  • Navigate to your project
  • On the left side, click Build, then Authentication, then Get Started
  • Click Google to start the Google Login setup process
  • Toggle Enable in the top right
  • Enter the product name you want to use in the Google Sign In UI
  • Click Save

Enable Permissions needed for SSO Support

To enable SSO, we need to tell firebase that the standard service account should be able to create custom login tokens.

First enable the IAM Service Account Credentials API:

Then give your standard service account the taken creation permission: * Goto the IAM Account Management Page * Select your project * Click on the edit/pencil icon for the standard AppEngine default service account. This will be called something like project-name@appspot.gserviceaccount.com * Click "Add Role" * Add "Service Account Token Creator"

Add a custom SSO-Provider

  • Open your git-fork and add a custom login provider in client/util/loginproviders.js
  • It is important to add the correct silos for your provider
  • Add your AuthKeyUrl to server/index.js (currently line 61) using the key you set in loginproviders.js

Initialize the Database

  • Run firebase init database
  • Choose whichever region makes sense for you. E.g. europe-west1 if you are in Europe,
  • Decline the friendly offer to overwrite database.rules.json.

Set up Server Config Files

  • Open the Firebase Console
  • Navigate to your project
  • On the left side, click Build, then Realtme database
  • Click on the link icon next to the database URL to copy it. It will be something like https://deploy-demo-psi-product-default-rtdb.europe-west1.firebasedatabase.app/.
  • Create a file called psi-product/server/production-config.js, with the following contents: (substituting in your database URL) 
    const firebaseConfig = {
    databaseURL: 'https://np-psi-dev-default-rtdb.europe-west1.firebasedatabase.app',
};

exports.firebaseConfig = firebaseConfig;

Set up Client Config Files

  • Open the Firebase Console and navigate to your project
  • Click Add App then Web.
  • Enter an app name (e.g. Web App)
  • Enable Also set up hosting
  • Click Register Site
  • Copy the firebaseConfig definition, and paste it into psi-product/production-config.js
  • Add an export keyword in front of firebaseConfig.
  • It should look something like this: 
    export const firebaseConfig = {
    apiKey: "********************************",
    authDomain: "np-psi-dev.firebaseapp.com",
    databaseURL: "https://np-psi-dev-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "np-psi-dev",
    storageBucket: "np-psi-dev.appspot.com",
    messagingSenderId: "768032889623",
    appId: "1:768032889623:web:634a1604eda03820ab7552"
};

Deploy to production

  • Build the web client by running yarn webbuild in client
  • Merge the newly built blob into the hosting dir, by running sh ./update_hosted_files.sh in client
  • Run firebase deploy
  • Test it worked by visiting the component demo at https://deploy-demo-psi-product.web.app/global/componentdemo/demo (replacing deploy-demo-psi-product with the name of your firebase project)

Set up Admin rights & Language

To do much beyond look at the component demo, you'll likely want to give yourself admin rights, so you can set up some conversations. We don't have an admin setup UI yet, so sadly you'll need to do it by directly poking the database.

  • Open the firebase console
  • On the left panel, click Build and then Realtime Database
  • Click on the + to add an entry, and then set up the following JSON structure: 
    "silo": {
    "global": {
        "module-public": {
            "admin": {
                "adminEmails": [comma-separated list of all emails with admin access]
            },
            "language": "german"
        }
    }
}
  • Where you can currently set the language to one of english, french, or german.
  • Repeat this process any silos you want to set up, replacing global with your silo key.