This template contains the boiler plate code to create a MakeCode Extension that exposes a custom page in the editor.
Follow these steps carefully to setup your extension for MakeCode.
- search and replace all instance of "pxt-extension-name" with the repo name
- search and replace all instance of "githubid" with the GitHub organization of the repo
- update the
pxt.json
fields:name
,description
, extensionnamespace
- search for all
TODO
strings and update descriptions
- install Node.
- To build the repo, run:
npm install
- After this you can run the dev server
npm run start
This will be running on http://localhost:8100
You can edit your React app under src
and the dev server will hot reload it in the browser. Unless you change styles, you generally don't have to reload it to see your changes during development.
When running locally in a web browser, and not in an iframe, read and write operations are stored in localStorage to make debugging easier.
Webpack will generate the bundled app js when running npm run start
or npm run deploy
This repo uses semantic-ui-react as the UI framework, but you can substitue it with any
- To deploy your extension to Github pages, run:
npm run deploy
- Once built, the extension will be hosted on GitHub pages.
https://github.com/qumeta/pxt-react-extension-hello
- Go to the MakeCode editor and add this repo as an extension to a project, you should see your button show up in the desired namespace.
Update the list of targets supported by this extension.
- for PXT/microbit
- for PXT/adafruit
- for PXT/maker
- for PXT/arcade
- for PXT/codal
(The metadata above is needed for package search, update it with the targets you support)
MIT