How to Apply Your Grommet Development Branch to a Local Project - grommet/grommet GitHub Wiki

Would you like to reference your local Grommet repository as a module in another local project? This is useful when developing an enhancement to submit as a pull request, or when trying to debug an issue that manifests in another project.

The following setup will allow you to test your changes' behaviors in a project by referencing your local Grommet instance instead of the published version on the registry.

Linking to Your Local Grommet Instance

The steps generally follow yarn link instructions with a couple of minor tweaks to fit the Grommet build.

Navigate to your Grommet directory.

$ cd grommet

Build the current state of your local Grommet.

$ yarn build

If this is your first build, it will create a dist directory which contains your build. Otherwise dist will be removed and replaced.

Create symlink.

$ cd dist/
$ yarn link

Apply symlink to your project.

$ cd ../../my-project-directory
$ yarn link grommet

You will receive confirmation success Using linked package for "grommet". and are ready to test and debug.

NOTE: You will need to repeat these steps to apply any modifications you make to your Grommet repository.

NOTE: When using yarn link, in some cases, you will see an "Invalid Hook Call Warning". This is because when the application runs, there are 2 react packages to pick from. React documentation provides a simple solution to overcome this issue here.

!!! Important - Remember to Unlink

When you are done, you need to unlink the local grommet directory.

From your project utilizing Grommet:

$ cd my-project-directory
$ yarn unlink grommet
$ yarn install --force

The last line re-installs the Grommet package hosted on the npm registry as defined by your package.json.

Finally, complete unlinking by navigating back to your local grommet repository and unlink.

$ cd ../grommet
$ yarn unlink

Alternative Approach - Copy Local Grommet Build and Paste in Node_Modules

If you have trouble with the symlink approach, the following will also work:

$ cd grommet
$ yarn build
$ cd ../my-project-directory
$ rm -r node_modules/grommet
$ cp -r ../grommet/dist/ node_modules/grommet

You are now using your local Grommet build.

NOTE: You will need to repeat these steps to apply any modifications you make to your Grommet repository.

To stop using your local instance and re-install published Grommet from npm registry:

$ cd /my-project-directory
$ rm -r node_modules/grommet
$ yarn add grommet

To Dos

  • Add method for a build watch