khoros-aurora-sdk v24.5.0-rc.0

Using the Aurora SDK

Start by ensure you have NodeJS installed. Node versions 16 and 17 are currently supported. Using NVM (https://github.com/nvm-sh/nvm) will make it easier to use newer version of NodeJS in the future. If you have NVM installed, simply run nvm use in the terminal to ensure you're using the correct version of NodeJS.

Once NodeJS is installed, open a terminal shell, and run npm i from this directory . This will ensure the necessary dependencies are available, including the Aurora SDK.

Setting up the environment

1. In a text editor, edit the .env.local file in the root your plugin's filesystem. If you don't see it, note that the file may be hidden by default by your OS (Mac: https://www.macworld.com/article/671158/how-to-show-hidden-files-on-a-mac.html, Windows: https://support.microsoft.com/en-us/windows/view-hidden-files-and-folders-in-windows-97fbc472-c603-9d90-91d0-1166d1d9f4b5). If you still don't see this file, create it.
2. Add an entry for LIA_URL. This is the base URL of your community (for example, LIA_URL=https://community.bigco.com)
3. Add an entry for SDK_KEY to be the value of the SDK Key found in the Dev Tools (/admin/dev) section of your community's admin console (for example, SDK_KEY=abcd1234)
4. Save your changes to the .env.local file.

Using Plugin Preview

Plugin Preview synchronizes the assets in your plugin with your community. The changes are kept in memory and are only visible to admin users.

1. Open a terminal shell, and run npm run start. This will start the Plugin Preview process.
2. At this point, any changes you make to the files in your plugin repository will be synchronized with your community. Reload the page in the community where the asset is used to see the changes. To undo the changes, revert the file you changed.
3. On Plugin Preview startup, any currently changed files are synced into memory. All changes are cleared from memory once the Plugin Preview process is stopped. The process can be stopped using Ctrl-C.

Developing a Custom React Component

1. Set up your SDK environment and ensure you have Plugin Preview configured correctly
2. If it doesn't exist already, copy over the src/components/ReactComponent directory from https://github.com/community-khoros-internal/aurora-plugin-template to your plugin's filesystem
3. Commit and push these changes to a branch of your plugin of your choosing
4. Create a pull request to pull these changes into the main branch of your plugin (<phase>-main, not main)
5. Once the pull request is merged, in a browser, go to Designer in the admin console of your community
6. From there, go to "Page Templates" and select the page where you want to add the custom component
7. Click on the "+" symbol to add the component, then select "Custom" under "Other"
8. Select "ReactComponent". This will add a simple React component to your page's quilt.
9. Click Save and Publish
10. In the browser, navigate to the page where the component was published
11. In a new terminal shell, run npm run dev. This will start the dev server process. The process can be stopped using Ctrl-C.
12. In your browser, reload the page with the component . The sample React component should now load from your local dev server (http://localhost:3002).
13. Edit the src/components/ReactComponent/Component.tsx file.
14. In your browser, reload the page with the component. Your changes should be reflected on the component.
15. All changes are cleared once the dev process is stopped. Also note that the temporary changes are only visible while you are logged in.
16. To continue development on a separate branch, create a new branch of your plugin from qa-main.
17. Once this is done, you can safely remove the custom component from the page where it was added using Designer. It will still appear on the page as long as you specify your branch as the Active Branch in Dev Tools (/admin/dev in your community).