helixml / chat-widget

CI/CD (Continuous Integration/Continuous Delivery)

This outline provides an overview of the CI/CD process implemented for the chat-widget project.

CI/CD Pipeline

The chat-widget project leverages GitHub Actions to automate the build, test, and deployment process. The CI/CD pipeline is defined in the .github/workflows directory, specifically within the build.yml file.

Workflow Overview

The build.yml file outlines the following stages in the CI/CD pipeline:

  • Build: This stage compiles the chat-widget codebase using the appropriate build tools (e.g., Webpack, Babel). It also runs linting and code style checks to ensure code quality.
  • Test: This stage executes unit and integration tests to verify the functionality and correctness of the chat-widget.
  • Deploy: This stage deploys the built chat-widget code to the chosen hosting platform.

Triggering the Pipeline

The CI/CD pipeline is triggered automatically on every push to the main branch of the repository. This ensures that any changes to the codebase are immediately built, tested, and deployed.

Deployment Options

The chat-widget project supports multiple deployment options:

  • GitHub Pages: This option deploys the chat-widget directly to GitHub Pages, providing a static website hosting solution.
  • Netlify: This option utilizes Netlify’s platform for hosting and deployment, offering features like continuous deployment and serverless functions.

Example Deployment using Netlify

The .github/workflows/build.yml file defines a deployment step for Netlify. The following code snippet illustrates the Netlify deployment configuration:

    - name: Deploy to Netlify
                uses: netlify/actions/deploy@v1
                with:
                  site_id: ${{ secrets.NETLIFY_SITE_ID }}
                  auth_token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
                  publish_dir: 'dist' # Specify the build output directory

Configuration and Secrets

The NETLIFY_SITE_ID and NETLIFY_AUTH_TOKEN secrets are stored securely in the repository’s settings, ensuring the deployment process remains secure and confidential.

Further Information

For additional details about the CI/CD pipeline configuration, please refer to the following files:

  • .github/workflows/build.yml: Defines the steps involved in the CI/CD pipeline.
  • package.json: Defines project dependencies and scripts for building and testing.
  • webpack.config.js: Configures the Webpack build process.

Conclusion

The implemented CI/CD pipeline for the chat-widget project streamlines the development process, ensuring automated building, testing, and deployment of the widget. This approach enables developers to quickly iterate on changes and deliver high-quality updates to the chat-widget.