Glific - Two Way Open Source Communication Platform

Glific is a two-way communication platform built for nonprofits. This is the frontend interface built using React.

---

📋 Table of Contents

• Pre-requisite
  • Software Dependencies
    • npm (via asdf)
    • yarn (via npm)
  • Glific Backend
• Clone Frontend Repo
  • Git commands to clone
• Installation
  • Start backend server
  • Start frontend server
  • Login credentials
  • Configure Gupshup settings
• Available Scripts
• Docker Image for Production
• Localization
• Deploying Release on ECS with CD
• Learn More

---

Pre-requisite

Software Dependencies

npm (via asdf)

asdf plugin-add nodejs
asdf install nodejs latest
asdf set -u nodejs latest 

yarn (via npm)

npm install --global yarn

Clone Frontend Repo

Git commands to clone

git clone git@github.com:glific/glific-frontend.git

---

Glific Backend

You need to set up the backend service for Glific. Follow the instructions here:
🔗 https://github.com/glific/glific

💡 Note: SSL is required in development for both frontend and backend. Follow the SSL setup instructions in the backend README.

Also, add the following entry to your /etc/hosts file:

127.0.0.1 glific.test

---

Installation

1. Copy .env.example to .env in the project root:

   cp .env.example .env

2. Do not modify .env unless absolutely required.

3. Install dependencies:

   yarn setup

---

Start backend server

Ensure your Glific backend server is running and accessible.

---

Start frontend server

yarn dev

Visit https://glific.test:3000 to open the app.

---

Login credentials

• Phone: 917834811114

• Password: Secret1234!

---

Configure Gupshup settings (Optional)

After logging in:

This step is required only if you're using Gupshup integration and have ISV credentials stored in the database.

1. Go to Settings → Integration.
2. Enter your Gupshup credentials and App Name.
3. Save the settings to auto-fetch your Gupshup App ID.

💡 Note: Auto-fetching the App ID will only work if valid ISV credentials are already present in the backend database.

---

Available Scripts

yarn setup               # Install dependencies
yarn dev                 # Run app in development mode
yarn test                # Run tests in watch mode
yarn test:coverage       # Run tests with coverage
yarn build               # Create optimized production build
yarn extract-translations # Extract English strings for Lokalise

---

Docker Image for Production

To build a production Docker image:

docker build \
--build-arg VITE_GLIFIC_API_PORT=API-PORT \
--no-cache -t glific-frontend .

Replace API-PORT with your backend API port number.

---

Localization

1. Extract base strings:

   yarn extract-translations

2. Once merged into main, strings will appear in Lokalise.

3. Use Download → Build only in Lokalise to push translations.

4. This will create a PR automatically in the frontend repo.

5. It's recommended to Preview before building.

---

Deploying Release on ECS with CD

• For AWS CodeBuild, use buildspec.yml.sample as your config file.
• For Docker Hub and alternatives, use this GitHub Action:
  🔗 https://github.com/marketplace/actions/build-and-push-docker-images

---

Learn More

• 🌐 Glific.org
• 📄 One Pager
• 📁 Google Drive
• 📝 Product Features
• 📰 Blogs

Chat With Us

• 💬 Discord