Web UIKit Installation Guide
Amity Web UIKit Installation Guide
To allow for more customization, we have now open sourced our UI Kits and deprecated the packaged UI Kit version that was previously available.
With open source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility, and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and development experience.
To ensure that you continue to receive the latest features and updates, we encourage you to migrate over to the open source version. This guide will help you:
Migrate Web Open Source UI Kit with Existing Project
Remove Existing Dependencies
If you’ve never used the packaged Web UI Kit before, you may skip this step and proceed to the next step.
If you’re migrating over to the open-source version, you’ll need to remove and unlink the packaged UI Kit from your project before installing the open source source code.
Migrate Open Source Web UI Kit
There are several ways for you to integrate the open-source Web UI Kit into your projects, depending on your workflow. We recommend installing from npm, however we’ve also included instructions to install via Git Submodule.
Method 1: Installing via npm
Clone or download source code from an open-source Github repository
After downloading the source code, navigate to the directory where the source code was installed:
Run
npm i
to install package dependenciesRun
npm build
Run
npm link
Lastly, import (link) the UI Kit into your project by running the following command
Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit:
Method 2: Installing via git submodule
First, create a new React project
Create a new repository using
git init
inside your root directorySelect the path where you want to clone the submodule or use
cd src
Add AmityUIKit open source into your git repository with git submodule command as shown below
Navigate to the directory where the source code was installed
Run
npm i
to install package dependenciesRun
npm run
buildNext, go back to your project’s root directory and run the following commands:
cd node_modules/react
npm link
Then, go to the ui-kit folder and run
npm link react
Finally, go back to the root directory of your project and run
npm run start
If you receive warnings about “eslint” (which may happen to some versions of create-react-app if your project was created using this tool), please follow the steps below:
1) Inside ui-kit dir open package.json, move all eslint dependencies into "peerDependencies" field
2) Remove package-lock.json and run "npm i” again
3) Link react from root to ui-kit again
Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit
Modifying Web Open Source UI Kit
You can modify the Web open source UI Kit to customize behaviors to fit your needs. To modify the code, simply copy and paste it into your local machine.
We recommend that you first fork the repository before starting any customization work, so that it will be easier to merge the code with the next version update that we provide from the main repository.
Reference on forking: https://docs.github.com/en/get-started/quickstart/fork-a-repo
Get Latest UI Kit Open Source Updates
To update to the latest version of the UI Kit, you can pull the latest commit of the git submodule.
Last updated