Setup dev env for front-end components (e.g. widget)

Community Support
1

Hi guys,
for everyone interested in customizing tiledesk front-end components, just follow this mini guide.

E.g.

webwidget:
   image: chat21/chat21-web-widget:5.0.28
   container_name: chat21-web-widget  
   ports: 
      - "4200:80" # specify port forewarding
   environment: 
      - CHAT21_ENGINE=mqtt
      - MQTT_APPID=tilechat
      - PUSH_ENGINE=none
      - LOG_LEVEL=info
      - FILE_UPLOAD_ACCEPT=*/*
      - "MQTT_ENDPOINT=${EXTERNAL_MQTT_BASE_URL-http://localhost:8081}/mqws/ws"
      - "MQTT_APIENDPOINT=${EXTERNAL_BASE_URL-http://localhost:8081}/chatapi/api"
      #- MQTT_LOGINSERVICE_ENDPOINT=/api/chat21/native/auth/createCustomToken      
      - UPLOAD_ENGINE=native
      - "API_URL=${EXTERNAL_BASE_URL}/api/"
      - "TRANSLATIONS_URL=${EXTERNAL_BASE_URL-http://localhost:8081}/api/"
      #- API_BASEIMAGE_URL=https://firebasestorage.googleapis.com/v0/b/    For firebase
      - "API_BASEIMAGE_URL=${EXTERNAL_BASE_URL-http://localhost:8081}/api/"
      - AUTH_PERSISTENCE=LOCAL

WebWidget src/environment.ts:

{
    "chatEngine": "${CHAT21_ENGINE}",
    "uploadEngine": "${UPLOAD_ENGINE}",
    "pushEngine": "${PUSH_ENGINE}",
    "fileUploadAccept":"${FILE_UPLOAD_ACCEPT}",
    "logLevel": "${LOG_LEVEL}"    ,
    "remoteTranslationsUrl": "${TRANSLATIONS_URL}",
    "chat21Config": {
        "appId": "${MQTT_APPID}",
        "MQTTendpoint": "${MQTT_ENDPOINT}",
        "APIendpoint": "${MQTT_APIENDPOINT}"
    },
    "apiUrl": "${API_URL}",
    "baseImageUrl": "${API_BASEIMAGE_URL}",
    "dashboardUrl": "${DASHBOARD_URL}",
    "authPersistence": "${AUTH_PERSISTENCE}",
    "enbedJs": "${ENBED_JS}"
    
}

So, just replace this last values with docker-compose.yml environments values

1 Like
2

Hey @gabrielepan ,
Thanks for your time to list the relevant steps.

  • download widget source code or whatever front-end components you prefer

Can you elaborate a bit on this point though ?

Thanks !