运行浏览器中的开发服务器（例如stackblitz / codesandbox）

Question

The Question:

How to run a live in-browser dev server?

---

Context

Stackblitz and CodeSandbox are two platforms that provide online IDE to develop web applications. I have a similar use case, and would need to run an in browser dev server, but there's not much that I was able to find, apart from these few observations.

---

Few Observations

1. Stackblitz, in their announcement post describe that they use, "Progressive Web App API's to run a live dev server in-browser."

2. To resolve node dependencies stackblitz uses their custom npm client turbo . On the github repo page, it is described as

Express.js routes used for hydrating client-side dependencies and type definitions on StackBlitz.

3. There is also some module bundler involved to support live development with hot-reloading.

---

I suspect stackblitz runs an express.js server in the service worker, but i can't seem to understand how. I'm out of ideas here, any help would be appreciated.

Answer 1

I'll be honest, I have no idea but I'd like to wildly speculate.

• https://nodejs.org/api/vm.html

If you're going to just be focusing on front end code, then what I would think to do is to evaluate the code in your vm with the context of whatever modules are required. React will allow you to convert the JS into html. You can update the HTML directly in the dom.

I'm not sure how much help that is, but I will leave you with this

• http://www.alexrothenberg.com/2012/02/29/building-a-browser-ide.html
• https://60devs.com/executing-js-code-with-nodes-vm-module.html

If you're interested in having a contributor, then I'm down to team up on your project!