For web development and efficient implementation, open-source UI Kits have become a game-changer. They offer developers greater flexibility and customization options, allowing them to have complete control over the visual style of their projects. One such UI Kit is the Amity Web Open Source UI Kit, which provides the necessary UI for having Social and Chat features in your project. In this tutorial, we will guide you through the process of integrating this Open Source UI Kit through 2 different methods!
Pre-requisites
Before we begin, ensure that you have the following:
- Node.js and npm installed on your machine.
- An existing React project.
- Git installed on your machine.
- An Amity Social Cloud App instance.
Note: If you haven’t already registered for an Amity account, we recommend following our comprehensive step-by-step guide on how to create your new network.
Method 1: Installing via npm
Step 1: Clone the UI Kit Repository
First, we need to clone the UI Kit repository from GitHub. Open your terminal and run the following command:
Step 2: Navigate to the Directory
Next, navigate to the directory where the source code was installed:
Step 3: Install Package Dependencies
Now, we need to install the package dependencies. Run the following command:
Step 4: Build the Project
After installing the dependencies, build the project using the following command:
Step 5: Link the Project
Link the project using the npm link command:
Step 6: Import the UI Kit into Your Project
Lastly, import (link) the UI Kit into your project by running the following command:
Now you can run the following sample code to get you started with our UI Kit:
Method 2: Installing via git submodule
Step 1: Create a New React Project
First, create a new React project.
Step 2: Create a New Repository
Create a new repository using `git init` inside your root directory.
Step 3: Select the Path
Select the path where you want to clone the submodule or use `cd src`.
Step 4: Add AmityUIKit Open Source into Your Git Repository
Add Amity UI Kit open source into your git repository with git submodule command as shown below.
Step 5: Navigate to the Directory
Navigate to the directory where the source code was installed:
Step 6: Install Package Dependencies
Run `npm i` to install package dependencies.
Step 7: Build the Project
- Run `npm run` build.
- Install and configure babel transcompiler, then create babel.config.js at the root of your project.
- Add “babelrcRoots” option into your babel.config.js file. If you installed the source code in a different path, replace “./src/ui-kit” with the path where you installed the UI Kit.
Once you’ve installed and created the babel configuration, your configuration may look like this:
Step 8: Link React from Root to UI Kit
Navigate back to your project’s root directory and link react from root to ui-kit:
Step 9: Link React in the UI Kit Folder
Go to the ui-kit folder and link react:
Step 10: Start the Project
Finally, go back to the root directory of your project and start the project:
After running these commands, you can import the UI Kit in your React components like this:
Final Thoughts
Integrating a Web Open Source UI Kit into your existing projects can significantly enhance your development experience. It not only provides you with greater flexibility and customization options but also allows for more transparency and visibility. By following the steps outlined in this tutorial, you can seamlessly integrate Amity’s UI Kit into your projects and take full advantage of its features. Further details can be found in our documentation and if you are ready to give it a try you can click contact sales.