Web Javascript Migration Guide
Amity Web UI Kit Migration Guide
To allow for more customization, we have now open sourced our UI Kits and will be deprecating the managed 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:
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.
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.
- Clone or download source code from an open-source Github repository
git clone [email protected]:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
- After downloading the source code, navigate to the directory where the source code was installed:
cd Amity-Social-Cloud-UIKit-Web-OpenSource
- Run
npm ito install package dependencies - Run
npm build - Run
npm link - Lastly, import (link) the UI Kit into your project by running the following command
npm link @amityco/ui-kit-open-source --install-links
Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit:
import "./styles.css";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";
const userId = "<your USER ID here>";
const apiKey = "<your API key here>";
export default function App() {
return (
<div className="App">
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
userId={userId}
displayName={userId}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
}
Method 2: Installing via git submodule
- First, create a new React project
- Create a new repository using
git initinside your root directory - Select 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
git submodule add
https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource
"ui-kit"
- Navigate to the directory where the source code was installed
cd ui-kit
- Run
npm ito install package dependencies - Run
npm runbuild - Install and configure babel transcompiler, then create babel.config.js at the root of your project. Your project structure should be similar to the screenshot below:
- 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.
"babelrcRoots": [ "./", "./src/ui-kit"]
- Once you’ve installed and created the babel configuration, your configuration may look like this:
module.exports = {
"presets": [
"@babel/preset-react",
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
],
"babelrcRoots": [ "./", "./subModules/ui-kit" ]
}
- Next, go back to your project’s root directory and run the following commands:
cd node_modules/reactnpm 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
import "./styles.css";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";
const userId = "<your USER ID here>";
const apiKey = "<your API key here>";
export default function App() {
return (
<div className="App">
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
userId={userId}
displayName={userId}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
}
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.
To update to the latest version of the UI Kit, you can pull the latest commit of the git submodule.
git clone [email protected]:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
cd ..
npm i
npm build
npm link
Last modified 11mo ago