Inspect, Develop and Run Web Applications & Node backend in your browser with StackBlitz
If I had not seen it, I doubt I would have believed it. If you click this link you will open a StackBlitz workspace right in your browser. You will have VS Code with all sources that make up a web application (Vue 3 in this case) as well as its backend (Node). The application is running and you can see it in the same or a separate window.
You can further develop the application. Install new npm modules, finetune the build configuration, change the code. Through Hot Module Reload, changes are immediately reflected in the live running application.
You can save your changes, download the project, share your environment (definition), open anyone else’s web application from a single URL. Without installing anything.
StackBlitz runs on WebContainers — built in Web Assembly, a binary language supported by most major browsers. StackBlitz runs entirely inside your browser. You knew already that your browser is an incredibly powerful platform, an application server and virtual desktop combined. I would say that with StackBlitz your understanding of just how powerful is stretched a little further.
Through StackBlitz, any tutorial, workshop, blogarticle or StackTrace entry can be accompanied by a full fledged code example that can be edited, built, ran in the regular “software engineering” way (not CodePen/CDN-style) and still without ever leaving the browser.
Any GitHub repo can easily be opened in StackBlitz using this URL format:
https://stackblitz.com/github/<path to repository>
optionally followed by parameters file to indicate the file that should be loaded in the editor and terminal to indicate whether a terminal window should be visible. For example:
To open StackBlitz for my GitHub Repo https://github.com/lucasjellema/code-cafe-vue3-people-application , open file /src/App.vue in the editor and show the terminal.
StackBlitz projects can be shared — a shareable URL can be handed around, allowing anyone to load the exact same starting project in…