Previewing local changes as different Users in staging sites

Note: Contact Khoros Support to enable the SDK and impersonate the user.

Overview

Previewing local changes in the staging site is a one-stop solution for previewing changes specific to users before publishing them to the production environment. It also refers to the process of reviewing modifications made in a local development environment to ensure they function correctly for various user roles or accounts before deploying them to the live site.

Benefits

This allows developers and stakeholders to test features and capabilities from the perspective of different users, ensuring that permissions, roles, and functionalities behave as intended across user types. The staging site serves as an intermediate platform where these changes can be assessed in a controlled setting that closely resembles the production environment.

Users and their description

You can now preview the staging site as one of the following user categories:

User	Description
Anonymous	Simulates the experience of typical users who do not have administrative privileges, allowing you to see how new or unregistered visitors view content.
Admin	You can access the full range of tools and functionalities available to administrators, ensuring that all admin-specific content and controls function as intended.
Moderator	Experience the staging site from a moderator's perspective. The moderator oversees member-generated content and interactions. You can verify that moderation features are practical and user-friendly.
Standard/Non-admin	Reflects the experience of regular members who have standard accounts, allowing you to check the functionality and accessibility of features that are available to everyday members.

SDK Plugin CLI

SDK Plugin CLI is a feature for making customizations locally and previewing them on the staging site. It is used for testing.

After signing in to the site with the correct credentials and ensuring that the SDK Plugin Sync CLI is running, you will see the SDK banner in the bottom-right corner of the page.

In this banner, you can select the user type you want to use to view the site.
After you select one of these options, the site automatically refreshes, and you can see the page as the selected user type.

How SDK Plugin CLI works with LIA

After signing in to the Aurora site, a new cookie named auroraSdkImpersonatedUserType is created. Aurora's Apollo client adds this cookie as a header called kh-impersonated-user-type. Consequently, every GraphQL call made while navigating the site will include this header, which LIA will use to impersonate the user.

The LIA system stores the original user's credentials to retrieve local changes in LIA caches related to that user. This ensures that any changes made by the original user can be accessed even after impersonation.

Note: As we are using cookies to impersonate the current user, you can clear all the browser cookies if something fails or delete auroraSdkImpersonatedUserType from there.

Steps

1. Clone the repository to your local machine.
2. Set the LIA URL and SDK key configuration.
3. Make the changes according to the user's requirements.
4. Preview the changes for different users in the staging site.
5. Create a pull request to push your changes to the production environment.

Configuring SDK Plugin to your Local machine

1. Open your terminal.
2. Open your community repository in GitHub.
3. Find the command from GitHub to clone the repository from remote to your local machine.
4. Clone your community repository to your local machine.
   Make sure that the repository has a package.json file in it.
5. Run the command npm run install to install dependencies.
6. Go to your cloned repository folder and open the package.json file.
7. Ensure the devDependencies SDK version matches with the latest version of your community site.
   For example, the “khoros-aurora-sdk” version is 25.3.0, so your community version must be at the latest 25.3.0 version. Then, you can make the changes and preview them as different users. If it doesn’t match, then the SDK throws an error that the SDK doesn’t match the instance version.
8. Go to your local environment file with the command vim .env.local.
9. Set the following parameters in the local environment file as follows and save it:
   • LIA_URL: The URL of your community where you want to make an update and preview the changes
   • SDK_KEY: The key generated from the SDK Key section of Dev Tools of the Account menu from your community site. If the SDK key is not available on your community site, contact Khoros Support to enable the SDK.
10. Initiate the SDK Plugin CLI with the command npm run start. The command simulates and shows that the SDK plugin is started.
11. When you see the command line Watching for plugin repo changes in the terminal, go to the res folder of your community to make the changes and preview it.

    Note: Only the user whose SDK matches the latest version of the community site can see the changes and preview it.

Making changes and previewing them

For example, as an admin, I would like to change the title of my community homepage.

Note: Make a note that you are doing these changes in the staging site.

1. Go to the res folder of your community repository.
2. Go to the texts folder and select the text.en.json file.
3. In the text.en.json file, update your community title from Welcome to Community to Welcome to the Docs Community and save the file.
4. You can see your update as "Successfully updated the text file" as a command line log in the terminal.
5. Reload your community instance and see whether it reflects your intended changes.
6. Go to your community instance and see the changes as the following users:
   • Admin
   • Non-Admin/Anonymous
   • Standard
   • Moderator
7. Once you are happy with the changes and have previewed them, create a PR request to push your changes.

Conclusion

With the SDK Plugin CLI, you can preview your changes instantly as different users in the staging site. This serves as a customization space to preview the changes in the staging site and publish all the changes at once to your production environment, thus maintaining your community with a nice look and feel.