Forum Discussion

SydneyL's avatar
SydneyL
Helper
25 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 bott...
Aurora
SDK
SydneyL's avatar
SydneyL
Helper

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
25 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.