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 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 file.
5. Install all the dependencies by running npm install or npm i. Once the dependencies are installed successfully, please run npm run init command to set up the required files.

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 done using Ctrl-C.

Developing a Custom React Component

1. Clone the git repo at https://github.com/community-khoros-internal/aurora-plugin-example
2. Copy over the res/components/ReactSample directory to your plugin's filesystem
3. Copy over the src/components/ReactSample directory to your plugin's filesystem
4. Commit and push these changes to a branch of your plugin of your choosing
5. Create a pull request to pull these changes into the main branch of your plugin (<phase>-main, not main)
6. Once the pull request is merged, in a browser, go into Designer in the admin console of your community
7. From there, go to "Page Templates" and select the page where you want to add the custom component
8. Click on the "+" symbol to add the component, then select "Custom" under "Other"
9. Select "ReactSample". This should add the sample component to your page.
10. Click Save and Publish
11. In your browser, navigate back to the page where the component was published
12. Now that the sample React component is on your page, start up the Plugin Preview process (see above)
13. In a new terminal shell, run npm run dev. This will start the dev server process. The process can be stopped using Ctrl-C.
14. Edit the res/components/ReactSample/ReactSample.component.json file (you can simply add a space to the description in the "defaults" section). This tells the community to load the plugin from your local dev server.
15. In your browser, reload the page where the component . The sample React component should now load from your local dev server.
16. Edit the src/components/ReactSample/Component.tsx file (you can simply change some text).
17. In your browser, reload the page where the component. Your changes should be reflected on the component.
18. To continue development on a separate branch, create a new branch of your plugin from qa-main.
19. 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).