Tiledesk-dashboard

Tiledesk.com backoffice application is available on GitHub with the AGPL-3.0 licence.

Follow this instructions to setup the environment.

Consider that Tiledesk.com cloud service makes every module available with the same open source licence.

Web Widget component
iOS Widget API (work in progress)
full iOS App
full Android App
Tiledesk Dashboard (this repo)
All the chat components are available thanks to the Chat21 open source project, also available on GitHub (https://github.com/chat21)

Feel free to ask for support on https://tiledesk.com, using the live chat widget on the the website.

Features

Angular 5.0
Firebase Auth
Firebase Database CRUD (Firestore & Realtime DB)
MongoDB CRUD

Prerequisites

Install Node and NPM (https://nodejs.org/en). Suggested: 10.X or 11.X. Some issues are experienced with > 12.X
Install angular-cli v7.3.5 with npm install -g @angular/[email protected]
A Firebase project (https://firebase.google.com)
tiledesk-server installed and running (https://github.com/Tiledesk/tiledesk-server.git)

Install from source code

Install the latest stable release. Check on Github page the last release under the Releases tab and then run

git clone https://github.com/Tiledesk/tiledesk-dashboard.git --branch <LATEST-RELEASE-VERSION>
cd tiledesk-dashboard
npm install

Dev configuration

You can put your API URL and the other settings directly in the environment.*.ts if remoteConfig is set to false or in the dashboard-config.json if remoteConfig is set to true.

If remoteConfig is set to true create a file name dashboard-config.json and put it into src folder.

An example of the configuration of the environment.ts file in src/environments/

environment.ts

export  const environment = {

	production: false,

	remoteConfig: true,

	remoteConfigUrl: "/dashboard-config.json",

	VERSION: require('../../package.json').version,

}

dashboard-config.json

widgetUrl: "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",

botcredendialsURL: "https://<YOUR_BOT_CREDENTIALS_URL>",

SERVER_BASE_URL: "https://<YOUR_TILEDESK_SERVER>/",

CHAT_BASE_URL: "https://<YOUR_CHAT21_IONIC_URL>/chat",

testsiteBaseUrl: 'http://localhost:4200/assets/test_widget_page/index.html',

wsUrl: 'ws://' + window.location.hostname + '/ws/',

	firebase: {

		apiKey: "123ABC..",

		authDomain: "XYZ.firebaseapp.com",

		databaseURL: "https://XYZ.firebaseio.com",

		projectId: "XYZ",

		storageBucket: "XYZ.appspot.com",

		messagingSenderId: "123456"

	}

};

RUN in dev

Run the app with ng serve

Prod configuration

For production installation, configure the environment.prod.ts file in src/environments/.

environment.prod.ts

export  const environment = {

	production: false,

	remoteConfig: false,

	VERSION: require('../../package.json').version,

	...

	// same as in the above "dashboard-config.json"
	// note: for Firebase settings you can use a different firebase project to isolate environments
}

Build

Run ng build --prod --base-href ./

Deploy

Deploy to a Web Server

Copy the content of the dist folder to your Web Server (for example Apache or Nginx)

Deploy on AWS CloudFront and AWS S3


aws s3 sync ./dist/ s3://tiledesk-dashboard/dashboard


aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*

Run with docker

To run Tiledesk-dashboard on port 4500 run:


curl https://raw.githubusercontent.com/Tiledesk/tiledesk-dashboard/master/.env.sample --output .env

nano .env #configure .env file properly

docker run -p 4500:80 --env-file .env tiledesk/tiledesk-dashboard

Run with npm

To run Tiledesk-dashboard with npm:

UNDER DEVELOPMENT


curl https://raw.githubusercontent.com/Tiledesk/tiledesk-dashboard/master/.env.sample --output .env

nano .env #configure .env file properly

npm install -g @tiledesk/tiledesk-dashboard

tiledesk-dashboard

Brand

Edit the file brand.json in the folder src/assets/brand/ or load an external json by adding in environment.*.ts (or in the dashboard-config.json if remoteConfig is set to true) brandSrc :"https://<YOUR_BRAND_JSON>/ to customize:

company name,
logo images,
navigation,
contact email and more

Note: enable CORS if brand json is loaded from a different domain

dashboard-config.json

widgetUrl: "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",

botcredendialsURL: "https://<YOUR_BOT_CREDENTIALS_URL>",

SERVER_BASE_URL: "https://<YOUR_TILEDESK_SERVER>/",


...

brandSrc :"https://<YOUR_BRAND_JSON>/",

...

};

docker env.sample file

SERVER_BASE_URL=YOUR_TILEDESK_SERVER_URL


...


BRAND_SRC=https:YOUR_BRAND_SCRIPT_URL

...

Edit the file _variables.scss in the folder src/assets/sass/md/ to customize the colors

Load external scripts

Load external scripts by adding in environment.*.ts (if remoteConfig is set to false or in the dashboard-config.json if remoteConfig is set to true) the key globalRemoteJSSrc with value your scripts separated by commas

dashboard-config.json

widgetUrl: "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",

botcredendialsURL: "https://<YOUR_BOT_CREDENTIALS_URL>",

SERVER_BASE_URL: "https://<YOUR_TILEDESK_SERVER>/",


...


globalRemoteJSSrc :"https://<YOUR_CUSTOM_SCRIPT_1>, https://<YOUR_CUSTOM_SCRIPT_2>",

...

};

docker env.sample file

SERVER_BASE_URL=YOUR_TILEDESK_SERVER_URL


...


REMOTE_JS_SRC=YOUR_CUSTOM_SCRIPT_URL

...

ertprs / tiledesk-dashboard-1 Goto Github PK