Enhance your collaborative experience with diagrams, drawings, and more using the Whiteboard Integration in Rocket.Chat. The Whiteboard App provides a seamless environment for real-time visual communication and brainstorming.
- Use
/whiteboard help
for a helpful message. - Use
/whiteboard list
to list all created boards in the room. - Use
/whiteboard new <board name>
to create a new whiteboard. - Use
/whiteboard delete <board name>
to delete a whiteboard.
- Click on the "Create Whiteboard" action button to generate a new whiteboard.
-
Click on the
Edit board
button, and you will be directed to a new whiteboard tab. -
User edits will be stored in real-time as an image preview in the message.
![]() |
![]() |
- Click on the
Settings
button to modify theboard name
and make the boardpublic/private
.
Join our app's community from here ๐ป๐งโ๐คโ๐ง๐.
Make sure you have a working Rocket.Chat server and Apps-Engine CLI for your machine. You can setup the server for your local machine from here and CLI from here.
-
Navigate to the
client
folder:cd client
-
Install all required packages:
npm install
-
Build the webpack bundle for the Excalidraw React app:
npm run build
-
Execute the build.js script to generate build scripts for
excalidraw.ts
andexcalidrawContent.ts
:npm run build:excalidraw
-
Change directory to
whiteboard
and install all Rocket chat app packages :cd ../whiteboard/
npm install
-
Deploy your app locally
rc-apps deploy --url http://localhost:3000 --username ${username} --password ${password}
Your username and password are your local server's user credentials .Verify the successful build by accessing the
/excalidraw
endpoint in the Whiteboard app settings. You can access the React app through the provided URL.
-
Run the following command within the
Apps.Whiteboard
foldercd client \ && npm install \ && npm run build \ && npm run build:excalidraw \ && cd ../whiteboard/ \ && npm install \ && rc-apps deploy --url http://localhost:3000 --username ${username} --password ${password}
Make sure to replace ${username} and ${password} with the actual username and password values of your local server's user credentials
-
You can use the Makefile to run the server as well
make YOUR_USERNAME=${username} YOUR_PASSWORD=${password}
Make sure to replace ${username} and ${password} with the actual username and password values of your local server's user credentials. Alternatively, you can modify the Makefile directly by replacing the USERNAME and PASSWORD variables.
Additional Commands:
For build:
make build YOUR_USERNAME=${username} YOUR_PASSWORD=${password}
For deploy:
make deploy YOUR_USERNAME=${username} YOUR_PASSWORD=${password}
Follow these steps to set up your development environment using Gitpod:
-
Visit Gitpod Website:
- Go to Gitpod and click on the dashboard.
-
Login with GitHub:
- Login to Gitpod using your GitHub account credentials.
-
Create a New Workspace:
- Click on the "New Workspace" button.
- In the dropdown menu, select the repository you want to work on, specifically the
Apps.Whiteboard
repository that you've previously forked on GitHub.
-
Continue and Wait:
- Click "Continue" and give it some time to initialize your workspace.
-
Start Coding:
- After a few seconds, you'll see a fully-functional code editor in your browser.
- Feel free to start coding, making changes, and contribute to the
Apps.Whiteboard
repository.
That's it! You are now set up and ready to contribute. If you encounter any issues or have questions, refer to the Gitpod documentation or reach out to the community for assistance.
Happy coding!
GSoC'23 Work: Whiteboard App Report
Explore our documentation and engage with the Rocket.Chat Apps community:
-
Rocket.Chat Apps TypeScript Definitions Documentation: Learn about Rocket.Chat Apps TypeScript definitions and how to use them.
-
Rocket.Chat Apps TypeScript Definitions Repository: Contribute and explore the open-source repository for Rocket.Chat Apps TypeScript definitions.
-
Example Rocket.Chat Apps: Find inspiration in a collection of example Rocket.Chat Apps, providing practical implementations.
-
Community Forums: Engage with the Rocket.Chat Apps community through our forums.
-
Community Chat Channel: Join the conversation in our community chat channel.
-
Apps Community Channel: Join the conversation in our app's community channel.
Feel free to explore, learn, and collaborate within the Rocket.Chat Apps ecosystem. Happy coding!