Microsoft MakeCode

How to develop extension code - use pxt serve?

I have been developing a microcrobit extension using MS Playground - but it looks like the next step is to build my local version of pxt, and I can’t find any beginner’s documentation on the flow.
Can anyone point me in the right direction please?

Yeah I found it a little tricky to get started and I went round and round a bit on the docs.

The thing pxt serve/staticpkg does is take all the settings from a pxt project and build out a static website. pxt serve is the developer version of this, it runs a little webserver on your machine so you can test the changes out locally. pxt staticpkg is used when you are ready to make a deployment out to a webserver.

The pxt tool (which is open source too, and you’ll probably have to read the sources at some point) seems to have code in it for generating out the full webpage, as well as kicking off a development webserver too.

This website can be hosted on github if you want, or you can build it statically and deploy to your own website. The github stuff works by stuffing a webpage into the gh-pages branch of your project. I went down that track initially but there were a couple of bugs and roadblocks - so I have switched to publishing on my own site.

What I did was start from the pxt-sample and forked it. This is what I have worked out but since the docs are thin I am super happy to have my understanding corrected.

There are a couple files I have changed:
Simulator.ts - makes your previewer
Simulator.html - the html code for your previewer. This is run inside a sandboxed iframe
api.ts - in all the samples, it defines the blocks. This is apparently not the purist way to define your blocks but I have had troubles moving my stuff elsewhere.
ns.ts - in my project, this is where I set up the colors and icons for each of the categories
style.less - in my project, I have hacked the layout of the simulator a bit here

pxtarget.json - this the thing that sets up all the settings for your website (or pxt target). It’s like the kitchen sink of the project. You can define things in there from the app theme colors, block colors, whether or not you enable sharing, etc.

I have typically been looking at blocks in Microsoft Arcade, micro:bit and AdaFruit and looked at how they were setup in their codebases. Fortunately they are all in github - just search for pxt-microbit and pxt-arcade and pxt-adafruit

The other ones I have bookmarked in my list are:

The pxt-holidays one is particularly easy to follow to work out how to setup icons for your enumerations. SparkFun also had a neat article about pxts. https://learn.sparkfun.com/tutorials/how-to-create-a-makecode-package-for-microbit/all

You’re welcome to see some of the files I have changed in my project, it might help you in yours.

Hope this helps,
JFo

3 Likes

Wow, many thanks! Plenty to get going on there.
Rob