Development​

Local Setup​

To develop and testEmbeddedChat, you need a local instance of the Rocket.Chat server. Follow the guide in theRocket.Chat Developer Docs for setting up a Rocket.Chat development environment.

Ensure that the "Enable CORS" option is turned on in your Rocket.Chat server. You can find it under Administration > Settings > General > REST API > Enable CORS. This setting must be enabled to access the app's functionality.

Prerequisites​

• Node.js: Version 16.19.0 is required. UseNode Version Manager (NVM) for easy switching between Node.js versions.

  To install and use the correct Node.js version, execute the following commands with the specific version number:

  nvm install <version>
  nvm use <version>
  

  Replace<version> with the required Node.js version

• Yarn Workspaces: Ensure Yarn workspaces are enabled. If not, run:

  corepack enable
  

Install Dependencies​

Install all necessary dependencies by navigating to the root directory ofEmbeddedChat and running:

yarn

Build Packages​

After installing dependencies, build the packages (auth,api, andreact) by running the following command in the root directory:

yarn build

Starting Storybook for React​

Navigate to thereact package directory and start Storybook with the following commands:

cd packages/react
yarn storybook

Storybook should now be operational. Experiment withEmbeddedChat and its components, observing real-time changes in Storybook.

Custom Rocket Chat Server Configuration​

By default, Storybook connects tohttp://localhost:3000. To use a different Rocket Chat server:

Create a.env file in thepackages/react directory.

Set theSTORYBOOK_RC_HOST variable:

STORYBOOK_RC_HOST=<your-custom-url>

Alternatively, run this command in thepackages/react directory:

STORYBOOK_RC_HOST=<your-custom-url> yarn storybook

Package Development Overview​

The project uses a monorepo structure with three key packages:react,auth, andapi. Each package fulfills a vital role in the application:

React Package Development​

Thereact package serves as the main frontend component, having all UI elements and views. It interfaces with theauth andapi packages to manage interactions with the Rocket.Chat server, including API calls and authentication.

To develop and test changes in thereact package:

1. Navigate to the directory of thereact package:

cd packages/react

2. Start Storybook to view live changes:

yarn storybook

Auth Package Development​

To develop and test changes in theauth package:

1. Navigate to theauth package directory:

   cd packages/auth
   

2. Start the development server:

   yarn dev
   

API Package Development​

For development in theapi package:

1. Navigate to theapi package directory:

   cd packages/api
   

2. Start the development server:

   yarn dev
   

Development Workflow Notes:

• Thereact package relies on theapi package. After making changes to theapi, rebuild it usingyarn build inpackages/api, and then restart the React project.

• Similarly, theapi package depends on theauth package. After making changes toauth, rebuild it usingyarn build inpackages/auth, and then restart theapi development environment.

This structured approach facilitates cohesive development and integration across all components of the application.

Conclusion​

This environment offers a complete setup for developing and testing theEmbeddedChat component, alongside itsapi andauth packages. Feel free to explore and enhance the capabilities ofEmbeddedChat!

Contributors​