Fuselage's component in RC
Test fuselage component/packages in Rocket.Chat main repository
There are several techniques employed when the necessity arises to iterate through components or packages being used in our flagship project. In cases where Storybook or the local environment proves insufficient, the following approaches are implemented. It is important to note that all examples assume a directory structure where the work tree directories are organized as siblings, as illustrated below:
This configuration serves as the foundation for the following techniques.
Technique 1: yarn fuselage
script
yarn fuselage
scriptWe've created a convenient helper script to streamline the testing and deployment process for Fuselage packages. The source code of this bash script can be accessed at fuselage.sh directory.
This script is designed to be utilized using the command yarn fuselage -a [action] -p [package]
, offering a flexible way to perform various actions. Actions are specified using the -a | --action
flag, and the available options are: [link|undo|unlink|next|latest|next-all|latest-all]
.
link
: Creates a symbolic link for the fuselage packageundo
orunlink
: Removes the symbolic link for the fuselage packagenext
: Update dependencies with the @next npm package versionlatest
: Update dependencies with the @latest npm package versionnext-all
: Update ALL fuselage dependencies with the @next npm packages versionlatest-all
: Update ALL fuselage dependencies with the @latest npm packages version
The packages that the action will be performed it's specified with -p | --package
flag, this option can contain multiple packages separated by a semicolon (;) like [package1;package2]
Example usage
Create a symbolic link in multiple fuselage packages using this command:
Remove the symbolic link with this command:
Update dependencies to the @rocket.chat/fuselage@next npm package version:
Update dependencies to the @rocket.chat/fuselage@latest npm package version:
Update ALL fuselage dependencies with the @next npm packages version:
Update ALL fuselage dependencies with the @latest npm packages version:
Technique 2: Yarn's link:
protocol
link:
protocolAdd a link
Run
webpack
in watch mode on@rocket.chat/fuselage
:
Add a relative-path link resolution for
@rocket.chat/fuselage
on the rootpackage.json
:
Update
yarn.lock
:
Undo the link
Run the following commands:
Technique 3: Already merged PR
Usually, the versions kept on the core package (Rocket.Chat) are set to @next
. This means that merged PR's that were merged to develop and went through the CI/CD (usually takes a few minutes after merge) are released as a -dev
version.
To determine whether a merged PR has been released, follow these steps within the Fuselage monorepo:
Navigate to the "Actions" tab and access "Continuous Delivery" from the sidebar.
Search for your PR's title. If the action has finished running, follow these next steps:
In the Rocket.Chat repository root directory, update fuselage packages to
@next
with this command:
Then, build the project with this command:
You're now set to proceed.
Technique 4: Before the Fuselage Pull Request is merged
To test your Fuselage package code within the Rocket.Chat main repository, you can use this technique. Create a symbolic link (symlink) pointing to the corresponding fuselage/{package}
directory within the Rocket.Chat repository.
In the Rocket.Chat repository root directory, run this command to install dependencies and build packages:
Create a symlink to
fuselage/{package}
at meteornode_modules
with this command:
Navigate back to the main repository root and start the server:
Exercise caution when using the yarn dsv
command to start the Meteor project. It's important to note that the intended package might be utilized by other packages beyond Meteor, potentially affecting the overall result.
After following these steps, your application should reflect the changes.
Last updated