We are happy to roll out an experimental feature to build frontend code in Motoko playground.
To get started, you can try the “counter” and “random maze” examples, which have been preloaded with the frontend code from the dfinity/examples repo.
You first need to deploy the backend as usual. Then select any file in the frontend project folder, the deploy button will change to “Deploy Frontend”, which runs npm behind the scenes to build the whole frontend project. The reason we need to deploy in two steps is that the frontend needs to know the backend canister id at the build time, so we need to deploy the backend first.
When deploying the frontend, you may notice an interesting fact that we are running npm inside your browser, and the “node_modules” directory is only a virtual link that never gets downloaded. As a result, “npm install” is even faster than running in your native environment.
All these features are made possible by using the WebContainer technology, which can host node runtime (as well as python runtime) in browser as Wasm modules. As this technology is relatively new, not all browsers support it. It can run in most Chromium based browsers (Chrome, Edge, Opera, Brave, etc), and has limited support in Firefox and Safari. You can see this article on how to configure your browser to enable WebContainer. If you are using a non-supported browser, we simply disable the frontend build feature, and you can continue to deploy Motoko backend in the browser as usual.
You may also notice that we recently announced a similar product ICP Ninja that can deploy full stack dapps in browser as well. Both products share the same backend deployment infrastructure. While Motoko playground aims at supporting Motoko dapps, including the frontend as we rolled out in this feature, ICP Ninja is aimed at supporting all CDKs, including Motoko, Rust, Azle and Kybra.
Because of the scope difference, the build pipeline is different: Motoko playground builds everything in browser, which means the build pipeline is fully on-chain; while Ninja builds the projects in a docker service, since Rust is difficult to build in browser at the moment. These differences are just implementation details and not visible to the end users. We do expect that most people will use Ninja when it’s fully developed.
On the other hand, Motoko playground will truly become a playground, where we explore various features, e,g., different GC flags, the upcoming Motoko enhanced orthogonal persistence feature and profiling. As two products share most of the code, we can easily push the features to Ninja whenever it makes sense.
One of the experimental features we would like to try is building frontend with WebContainer, as we described in this post. WebContainer simplifies a lot of the scalability and security issues raised when using dockers like in ICP Ninja. It’s also nice to have a fully on-chain solution to build full stack dapps. However, because it’s a relatively new technology, it’s still not fully supported in all browsers, especially in mobile. ICP Ninja would have to wait a bit before getting this feature.
Hope you enjoy the new feature and keep on building! We are always here to hear your feedback.
