Forum Discussion

SydneyL's avatar
SydneyL
Helper
9 days ago

SDK Preview mode doesn't seem to be working?

Hello fellow devs - I'm very new to GitHub, so I am unsure if this is something I've set up wrong, or if something isn't working in Aurora.

I have the SDK installed, and the orange box at the bottom of the screen indicates the SDK previewer is running (it never goes away, even when I haven't started anything in the terminal yet, as a matter of fact). I make the npm run start command in terminal, and I can see an orange outline on a widget I've made changes to - but the changes don't actually reflect in the browser, even upon refresh. Clearly it knows something is different because the outline is there. But the change (like adding a new word to a block of text) isn't there.

Is there a trick to getting the preview plugin to work? I've exited out of it from terminal now, and the outline won't go away anymore, even after going in and making the change to the widget directly, saving, and resyncing everything from the stage-main branch.

What should my order-of-operations be if I want to work in VS code and see my changes in the previewer of the browser?

I am convinced this is a me problem and not an Aurora problem. :(

What I did, in order:

Merged my working branch with stage-main
Opened the HTML for a custom widget on my working branch
Opened terminal and ran npm run start
Added text to the custom widget
Refreshed the page in browser
Orange outline on the widget shows, but not the new text.
Double checked I didn't accidentally break the HTML; I did not
Refreshed again, still nothing.
Internal frustration
Exited npm with Ctrl+C in terminal
Refreshed page again, orange box still there
Copied the updated HTML from VS Code, edited widget in browser, pasted, saved - change is exactly what I expected
More internal frustration
Decided to ask for help here

Thank you in advance to anyone who can help!

Aurora
SDK
  • allensmith81's avatar
    allensmith81
    Boss
    9 days ago
    • when you run the preview, we have found its almost always better to have stage on stage-main but you can run whatever branch you like locally. The only time it becomes a problem is when you're doing more advanced customization and you either need the assets for a component uploaded so graphics from the component load properly or for page scripts (which must be in stage-main.
    • For the SDK you have to save the change, or it won't update the remote file. I have never seen it take an unsaved change (in my whooping 3-month experience lol).

    • Only other caution would give is watch out for changes in main itself (i.e. someone does a change in production via page builder. If you don't suck that back from main to stage-main before you deploy stage-main you may wipe out their changes. 
  • MattV's avatar
    MattV
    Khoros Staff
    9 days ago

    The orange at the bottom appears for as long as you have a valid SDK key. I think that's a bug.

    You mention HTML, so I just wanted to point out that the SDK only works for handlebars and react components.

    That being said, here are a few other things to check, and need to be in place for your changes to appear:

    • Check the SDK version matches your community version (https://yourcommunity.com/t5/s/status/version)
    • Make sure you are using the right version of node (as of this post, should be version 18)
    • Run npm i to make sure you have the latest sdk installed
    • Make sure all files related to the component are marked as 'changed' in your local git status
      • The component itself
      • The component.json
      • The quilt.json the component is on
      • Any other supporting files used by your component (css/pcss, text.json, etc...)

    Let me know if any of that helps or if you're still running into issues.

  • SydneyL's avatar
    SydneyL
    Helper
    9 days ago

    Thanks, Matt!

    I did work with an HTML widget before which changed in real time with me as I worked in VS code - my PM and another team member were helping me get set up in the first place, thanks to the package.json that is downloaded initially not actually having what it needed in it, we had to copy and paste some things. This was just last week, so the version number hasn't changed (also just double checked, still 24.10 for me). Unless a new version of node came out last week, should be good there as well.

    So, to be clear, when I modify the HTML for the custom widget, I should see more than just that component change in VS code? I don't remember seeing that before, but we had to do a lot of troubleshooting just to get it up and running. I literally just opened it up and wanted to see how the alignment moved with an extra word in a widget. I expected it to just show me that so I could decide if we needed a different word (was worried about it going to a new line and looking awkward), but... it wouldn't let me see it in the preview. :/

    Do I need to be making changes to the json and the quilt as well to get the preview to update the widget? If I have nothing to change for those, what do you recommend I do for the preview to kick in? Add a comment of some kind, perhaps?

    • allensmith81's avatar
      allensmith81
      Boss
      9 days ago

      Hi Sydney,

      The SDK is definitely a learning curve, and I am still learning!

      We moved to aurora only 3 weeks ago, and until 24.09 we had real problems getting the SDK to work on Windows machines.

      Are you using Windows? are you running the SDK in VsCode or another editor or just the command line?

      Now assuming you're trying to edit a HTML component, your folder will have in it at least two files:

      in this example I will use a "More Resources" Component we have.
      -->res-->components-->More_Resources

      files are:
      More_Resources.component.json
      More_Resources.html

      The JSON file contains:

      {
  "id" : "More_Resources",
  "markupLanguage" : "HTML",
  "defaults" : {
    "config" : {
      "applicablePages" : [ ],
      "dynamicByCoreNode" : false,
      "description" : "",
      "fetchedContent" : null
    },
    "props" : [ ]
  },
  "components" : [ {
    "id" : "custom.widget.More_Resources"
  } ],
  "grouping" : "TEXTHTML",
  "aboutThis" : null
}

      and the html file contains plain simple html for this example lets say it contains:

      <h3>Test Widget</h3>

      Now if you change h3 to h2 for example and you want to preview it on stage then do the following:

      1. Check the active branch on stage is stage-main - most of the time you don't need to change this.

      2. in your SDK look for the file called .env.local in there you will have two values (you may have more but you only need these two):

      LIA_URL=<insert the Top Level Domain to your staging environment>
SDK_KEY=<the key generated from the Dev tools section of admin>

      3. Now you have that setup open the html file and change h3 to h2 and save

      4. from your command prompt run npm i (or npm ci if you encounter issues) this will rebuild your local environment
      5. Now run NPM run start

      > @o365/plugin@1.0.0 start
> npm explore khoros-aurora-sdk -- npm run start


> khoros-aurora-sdk@24.10.0 start
> node ./scripts/pluginPreviewCli.js

[15:42:43.472] INFO (cli/19512): Using config values: {"LIA_URL":"YOURTLDWILLBEHERE","SDK_KEY":"<YOURKEYWILLBEHERE"}
[15:42:45.107] INFO (cli/19512): The SDK key is valid.
[15:42:45.107] INFO (versionCheck/19512): The current SDK version: 24.10.0
[15:42:45.911] INFO (versionCheck/19512): The community SDK version: 24.10.0
[15:42:45.912] INFO (PluginPreview/19512): Using plugin repo path: C:\Users\v-allens\Documents\o365
[15:42:45.914] INFO (PluginPreview/19512): Synchronizing plugin assets...
[15:42:45.921] INFO (PluginPreview/19512): Using git branch: stage-main-repair <- this is your branch you are working on.

      What happens next will depend on what's in your plugin but once its complete you see the message:

      [15:44:10.378] INFO (PluginPreview/19512): Watching for plugin repo changes

      Once you see that if you go to the page where this quilt lives you will see the change you made.

      if you decide Nae.. Lets change it from saying "Test" to "Lets see what more words look like" then open the html file and change the text per the above and click save.

      If you look at your command line it will says "Successfully updated component More_Resources" and then when you refresh the browser it should show you the updated text.

      Apologies if you knew most of that, I just wanted to be complete.

      • SydneyL's avatar
        SydneyL
        Helper
        9 days ago

        This is wonderful, thank you! I did have most of this, but the follow up questions I have are:

        I have a working branch off of Staging (following the recommendations per Khoros docs). I don't want my team making changes to stage-main either so I'm trying to follow my own rules. Does the preview only work if you're updating stage-main? Or can it preview based on my working branch?

        Second, you mention saving the change. I hadn't saved anything when I tested earlier - the moment I typed in the HTML, and refreshed the page in browser, it got the orange outline so I thought I was smooth sailing. Is saving the changes the trick here, maybe?

        I am on Windows. Seems to be somewhat controversial, but I kinda prefer it 😅

        Hopefully one of the two pieces above is all I'm missing! Thank you so much for the help!