Docker Configuration for helixml/chat-widget

Prerequisites

Make sure to have the following installed on your machine before proceeding:

Docker
Docker Compose

Setting Up Docker for Development

Clone the Repository

Begin by cloning the helixml/chat-widget repository:
```
git clone https://github.com/helixml/chat-widget.git
cd chat-widget
```

Configuration Files

The project contains a Dockerfile which specifies how the development environment is built. Review the Dockerfile to understand dependencies and configurations.

# Dockerfile

FROM node:14

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./

RUN npm install

# Copy app source
COPY . .

# The application's default port
EXPOSE 3000

# Command to run the app
CMD [ "npm", "start" ]

Docker Compose Setup

A docker-compose.yml file is utilized to define and run multi-container Docker applications. This is particularly useful if your app requires additional services such as a database.
```
version: '3.8'

services:
  chat-widget:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
    environment:
      NODE_ENV: development
```
This configuration does the following:
- Builds the image according to the Dockerfile in the same directory.
- Maps port 3000 of the container to port 3000 on your host.
- Mounts the local directory to /usr/src/app in the container for live code updates.
- Sets the NODE_ENV environment variable to development.
Building and Running the Container

To build the Docker image and run the container, execute the following command from the root of the cloned repository:
```
docker-compose up --build
```
This command will build the application and start the service. You can access the chat widget in your browser at http://localhost:3000.
Development Workflow

With Docker, the development workflow becomes seamless. Any changes made in the local files will reflect in the running container due to the volume mapping.

For example, if you modify a TypeScript file in your project:
```
// src/index.ts

import express from 'express';

const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(3000, () => {
    console.log('Chat Widget listening on port 3000!');
});
```
After saving your changes, they will automatically be available in the running application without restarting the Docker container.
Stopping the Container

When you wish to stop the Docker container, you can do so by entering:
```
docker-compose down
```
This command will stop and remove all containers defined in the docker-compose.yml file.
Troubleshooting

If you encounter issues during the setup, check the logs for any errors. You can view the logs with:
```
docker-compose logs
```
This will provide insight into what might have gone wrong during the build or runtime processes.

Conclusion

Following the above steps will set up a Docker-based development environment for the helixml/chat-widget. This enables continuous development with real-time updates and efficient management of dependencies.

Sources:

Direct reference from the project’s Docker and Docker Compose configurations.