helixml / chat-widget

To successfully deploy the helixml/chat-widget project into a production environment, a series of steps need to be followed. This guide focuses solely on the production deployment process, utilizing TypeScript and HTML.

Prerequisites

  • Node.js and npm (Node Package Manager) must be installed on the server.
  • A TypeScript-compatible environment.
  • Access to the application server where the widget will be deployed.

Build the Project

Before deployment, the project must be built. Ensure that all dependencies are installed and the project is compiled.

# Navigate to the chat-widget directory
cd path/to/chat-widget 

# Install dependencies
npm install 

# Compile TypeScript to JavaScript
npm run build

The build command usually invokes the TypeScript compiler (tsc) as defined in the package.json file.

Configuration

Ensure that the production configuration settings are adjusted. This typically includes:

  • API endpoint settings.
  • Environment variables for production use.

Example configuration adjustments in a .env file:

REACT_APP_API_URL=https://api.production-server.com
REACT_APP_CHAT_WIDGET_ID=your_production_widget_id

Deployment

Step 1: Upload Built Files

After building the project, upload the built files to your production server. The output files are usually found in the dist folder or another directory as specified in the tsconfig.json. Use FTP, SCP, or any deployment tool suitable for your server.

# Example using SCP to transfer files
scp -r ./dist/* user@production-server:/path/to/deployment/

Step 2: Serve the Widget

Ensure that you have a web server configured to serve the HTML page with Chat Widget integration. This typically involves making sure your web server is pointing to the directory where the build files are located.

For example, in an Nginx configuration:

server {
    listen 80;

    server_name your_production_domain.com;

    location / {
        root /path/to/deployment/;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

Step 3: Health Check

Once the chat widget is deployed, perform a health check to ensure it is functioning properly. This might include:

  • Accessing the URL in a web browser and confirming the widget appears.
  • Checking for JavaScript errors in the browser’s developer console.

Monitoring

Implement monitoring to keep track of errors and performance in the production environment. Use tools like Sentry or LogRocket to capture runtime errors and user interactions.

Example Integration with Sentry:

  1. Install Sentry in your project:
npm install @sentry/browser
  1. Initialize Sentry in your application code:
import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://<your_public_dsn>.sentry.io/<project_id>',
});

Rollback Plan

In case of deployment failure, have a rollback plan in place. This could involve reverting to the previous stable version of the chat widget files located on the server, ideally through version control.

# Revert to the previous version
git checkout <previous_stable_commit_id>

Follow the above steps to ensure a smooth production deployment of the helixml/chat-widget project.

Source: Information provided in the original text.