Microsoft MakeCode

Lighting up the share button - own server

I have been following these instructions and have gotten pretty far - I can get makecode to write to my server. The next bit that’s a little bit fuzzy is loading the URL back - it looks like I need to serve HTML but I am not sure what to serve? (Edit - see diagram in comments for a better picture)

Saving working so far…

  • Set shareUrl, embedUrl in pxtarget.json to my own URL
  • Share button pressed, successfully posts to myurl.com/api/scripts with a JSON in the body including the all the blocks used.
  • I return a short url, it appears in makecode’s url share box

Need help with loading a saved project

  • Share URL is now loaded, I need to return some bit of makecode HTML back

I found an old bug (2018) which mentioned next steps

What I’m stuck on:
“it is up to your server to deal with the request and return the appropriate project in the embed view”

  • I am not sure which html out of all the built stuff to return? I assume the embed views are all already there. I found run.html, but I wasn’t sure if that’s the one.
  • Also I’m not sure how to load the JSON into the embed view.

Any thoughts on this would be most helpful.

JFo

Here is a chart - cause that might explain it better.

I have managed to make a bit of progress on this by looking at server.ts and emulating it. I think I have most of the rest API sorted - but the HTML to serve is still a bit of a mystery.

Ok I got heaps heaps further.
Saving

  • Light up your PXT settings in pxt.json following the AppCloud interface
  • Click the share button - light up the /api/scripts API on your backend

Loading

  • My process was to get https://myserver.com/PROJECTID working.
  • For starters, just return this for https://myserver.com/PROJECTID
    <a href=“https://myserver.com/#pub:PROJECTID”>Edit Project</a>
  • This will redirect to https://myserver.com/#pub:PROJECTID
  • I just went for one unique short ID, instead of having two IDs. Hot tip: look at nanoid. I named the ID with a proj- prefix so I can do proper routing on my webserver.
  • This involved first lighting up the missing apis the share button wanted on my backend by looking at the server.ts.
  • Light up the /api/PROJECTID api to return everything saved in scripts except the text: { } bit of the JSON
  • Light up the /api/PROJECTID/text to return the text: { } bit of the JSON - this should just be a JSON object with the pxt.json, main.ts, etc. This is called separately from the other code.
  • Handle the abusereport route
  • I also had to create special routing rules for the --codeembed, --embed, etc urls. Have a look at server.ts to see the full list of “switches that turn into html files”

If the editor does not load

  • make sure you’ve got id specified in the JSON you return from /api/PROJECTID
  • make sure the /api/PROJECTID/text route only returns the text part of the JSON you were sent in /api/scripts

What’s still broken
Now with everything working I am going back to tackle the embedded simulator and code editor which are still not loading properly. I am replacing the body of the https://mysever.com/PROJECTID with the embedded code from the share dialog and continuing to debug.

Just following up to my follow up.

I got most of this working - some problems reloading just the simulator or just the codeblocks - so I turned off embed and just wrapped #pub:PROJECTID in an iframe.

The editor seems to be trying to load before it has loaded all the project JSON from the api endpoint. Which doesnt repro on arcade, because it is getting lucky and appears to pull it out of the service worker (?).

Anyways when I get a repro I will post a bug as it might be useful info.