Stackblitz – Online VS Code Editor for Angular and React | Hacker News Reader

Stackblitz – Online VS Code Editor for Angular and React

stackblitz.com

240 pointsuptown72 comments

Creator here — thanks for posting our project! For more info, check out my Medium announcement post here: https://medium.com/@ericsimons/stackblitz-online-vs-code-ide... :)

Happy to answer any q's & would love to hear your feedback!

I want to ask 3 things:

1) Man hours taken in this project

2) Your intended goal

3) Possible avenues to make money.

As I already said in another comment, Sass support would be a huge deal for me and our team. Without it, it's not that viable for us to use since we write all our styling in scss. But it's still very nice and I would certainly use it for small projects or some fast hackups.

Is it actually a modified version of VScode (As sourcegraph does) or are you just using the Monaco editor? As some mentioned in other comments i would also be insterested in running vscode frontend in the browser while havinf the backend in a VPS. Thanks and congrats on the project it's great!

Yes, that's one use case (desktop/web interop) where using something Electron.JS might actually make sense (to the extreme detriment of battery life, memory usage, and CPU usage).

Sorry for posting two comments. Could you please explain what is the difference between your project and this: https://github.com/CompuIves/codesandbox-client

And this is the online editor: https://codesandbox.io/s/new

From the start, our goal was to port VS Code, NPM, and Webpack loaders to run entirely in your browser and still work offline. With StackBlitz, the browser is installing, bundling, and serving everything — our servers don’t do any of that.

While CodeSandbox is a nice playground for React apps specifically, we have never intended (nor have any aspiration) to compete in the online playground space. We’re attempting to build the first fully in-browser IDE.

Right. Well, from what I can see, even the elements on the page and the offline editor works exactly same as your project. Almost everything, even the `npm install` thing is the same.

All in all, what you have done is great and absolutely useful for quick tests.

...CodeSandbox has no offline support whatsoever.

It sounds like your motivation is to promote an unrelated product in this HN thread, and that's super lame :(

I think they simply didn't understand the distinction that one runs js bins (npm install, webpack build) on a server, and the other in the browser.

They also might not understand why it matters.

Care to explain further?

There's already Atom In Space but it's not complete I don't think. Not sure how hard/reliable it would be to run.

CodeSandbox does almost everything in the browser however. The only thing it doesn't do in the browser is dependency bundling, which StackBlitz does in this case.

Essentially CodeSandbox can work offline if you already had the website open while you're online, then you can still continue offline. StackBlitz has the advantage that the tab where your application is can also be opened initially offline, which is handy for showing your application when you have no connection, but if I'm not wrong you cannot continue developing offline. I'd love to hear that I'm wrong, I'm really impressed with StackBlitz.

I'm the author of CodeSandbox btw :).

> but if I'm not wrong you cannot continue developing offline

Completely false, see -> https://twitter.com/ericsimons40/status/893238309085822977

You even responded to that thread yesterday, not sure how you didn't see this...

I did see that tweet. Maybe I was a bit unclear. I mean that the whole editor itself doesn't open when you don't have a connection (at least for me). My reproduction steps are:

1. Open https://stackblitz.com/fork/react

2. Disconnect from internet

3. Refresh the tab

At least for me this gives me a 404. I'm on Chrome. However, when I open the preview tab while offline it doesn't 404 on me.

Sorry I didn't mean to. I was curious and asked some questions because both projects looks very very close to each other.

I just tested the offline support of CodeSandbox and I did manage to work with the editor (the same functionality you've mentioned in the blog post) when the network is offline. You can't test it here: https://codesandbox.io/s/new

Again, what you did is absolutely perfect and I don't want or mean to underestimate your work! :)

You're telling me that CSB hosts a live dev server inside of a service worker that works across browser tabs? That's patently false. This is ours in action, for reference (was even included in the blog post) -> https://twitter.com/ericsimons40/status/893238309085822977

If you're genuinely just confused about how this stuff works, please _ask questions_ instead of making random assertions. Otherwise people get the impression you're shilling a separate product.

A minor thing which struck me when reading the Medium post.

When early on, the Angular folks were energetically arguing that the reason you could count on Angular 1, was because they were building on a new technology no-one had ever used before (!), and they were backed by Google (!), my thought was: you've just told me a great deal, but it's likely not what you had in mind.

> we <LOVE> Microsoft!

I had the same thought reading this.

EDIT: Fyi, esft.com, linked from your twitter, is currently 502.

Thanks for pushing the limit of browser. I made a customer npm package that wraps react-16.0.0-beta.3 and it runs well in both RunKit and StackBlitz.

https://twitter.com/ontouchstart/status/893886659070230529

I am sure it will be a great tool for npm package authors to test new server and browser ideas.

This looks really cool, just one quick question - I'm not really interested in all that Angular/React stuff, I just want my favourite VS Code in the browser (as a 'thin' client between my browser and my VPS, for example). Is this thing modular to allow for this, or is this meant to be just an Angular/React tool? Thanks!

Thanks! And great question — I don't think we're not targeting that sort of use case unfortunately, but we will allow you to do full git in browser pretty soon here. Right now we only support React & Angular but we're opening up custom templates that will let you configure any loaders, compilers, etc :)

It would be nice to be able to launch it with a blank template as it seems to be flexible enough to work with anything that doesn't need config e.g. Vue (https://stackblitz.com/edit/react-ng1kyn?file=index.js)

Vs code was written first as a browser based editor before it evolved into what it is now. I believe you can still run parts of it in the browser, but I can't try to find it now since I'm on mobile

https://github.com/Microsoft/monaco-editor

https://sourcegraph.com/github.com/laravel/laravel

Sourcegraph has been able to do this albeit with some modifications. So it should be possible

We're trying to make an initial implementation of with the VScode Monaco editor happen in GitLab 9.5 on August 22, see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12198

This looks really really well done! Ideal for trying out components and sharing demos.

Your medium post mentions

> These are the two key technologies that really enabled us to pack all of the functionality inside of your web browser with virtually no server-side involvement.

Can you elaborate a bit about how this is achieved?

Thanks and congrats for the launch!

Thanks for the kind words! And absolutely, take a peek at this GH thread about it: https://github.com/unpkg/unpkg-website/issues/35#issuecommen...

Creator of https://plnkr.co here. Amazing work on StackBlitz. Looking forward to figuring out how it all hangs together. Very novel approach indeed.

Anecdotally, I was the one who contributed ?json support to unpkg for a related use-case (in browser editor). OSS at its best, moving everyone forward. I use use the feature to provide a similar (but more limited) package injection. Check out https://next.plnkr.co/edit/ (book icon in toolbar of html panes) to see it in action.

Once went vuejs, mind blown how good it is. Any word on vuejs support?

Vue support should be landing in either late Aug or early Sept :)

One thing that made me smile on https://stackblitz.com/edit/ball-demo:

The dependency placeholder. Funny for those who remember, useful for those who don't.

I'm glad you caught that :)

The performance here was quite good! I'm impressed.

Thanks! We spent a ton of time nailing down perf to ensure it ran fast even on lower end CPU's :)

Very nice! good job. Looks really similar to https://github.com/CompuIves/codesandbox-client though.

And this is the online editor: https://codesandbox.io/s/new

We started StackBlitz long before CodeSandbox was released: https://medium.com/@ericsimons/our-goal-was-to-port-vs-code-...

This is AWESOME!! Great work. I noticed that the GitHub repo is missing source code; when do you plan on releasing it?

Yeah like the look of this, makes me wonder if one day I can code on a chromebook

Not to hijack, but I've written directly on this topic in case it's useful:

https://headmelted.com/coding-on-a-chromebook-84335cce96c8

There are options around (including my own scripts at https://code.headmelted.com) and the situation is advancing steadily in terms of the tools available.

Looks good, I'd like to try this though https://blog.lessonslearned.org/building-a-more-secure-devel...

I tried one out briefly, no f.lux equivalent made it unusable for me.

Curious - many people swear by f.lux - under what work conditions does not having f.lux make it unbearable?

I understand that it adjusts the temperature of the screen to match the current time of day - but I see it as a nice-to-have feature and nothing more than that.

I might have exaggerated a little, since I did use computers without f.lux for 10+ years of my life, but I like to work in the evenings sometimes and I like to also be able to get to bed after that pretty easily.

I woke up early this morning, which sucked, but f.lux made it bearable to use my computer, which would otherwise have hurt my eyes; an hour later when f.lux decided to turn itself off >_<, I ended up setting my clock back a few hours because it was hurting my eyes.

Maybe I'm just getting old, but I find the constant white light hard on my eyes.

[EDIT]: I had a Chromebook for a week from work; I simply didn't use it when I got home. Some may argue this is a feature.

I have used Codeanywhere from a chromebook over the last couple of years. Not for heavy duty stuff but it gets me by in a pinch if I'm not at my own computer and need/want to edit stuff on my own server. Otherwise codepen etc is fine for me for quick on-the-go stuff.

I did this too. It is mostly fine as you say but it does feel a bit clunky at times in my opinion.

I really just wish vscode could run effectively native (local file system) in a browser tab. Throw in a few other goodies and it would be a truly competitive OS for developers in my opinion. For me its just so much nicer to use than most Windows and Linux flavours I have tried at various points. It even has a few wins here or there over OSX.

Very nice, seems quite similar to https://codesandbox.io

Apparently it doesn't have Sass Support which kind of makes it not viable for me. Otherwise pretty great for hacking up small projects when you don't want to setup your whole environment yourself.

Sass support is landing late Aug or early Sept :)

Congrats! it looks really good. Can you tell me how do you compute the package.json tree on your servers before requesting unpkg? Also, are you using AWS Lambda's?

This is insanely cool. Having worked with SystemJS + JSPM dependency hell in a large project I can't imagine making it all work this seamlessly in a browser.

This looks great, but why is it better than say, plnkr? Other than the tooling and some features like offline use etc. It's essentially the same yeah?

I think our announcement posts covers this well: https://medium.com/@ericsimons/stackblitz-online-vs-code-ide...

tl;dr — we're trying to create the first fully in-browser IDE, not a playground :)

The first? c9.io has been around for ages, right.

When I say in browser I mean that the browser itself is compiling, bundling, hot reloading, & serving the app — it's not using any resources on a VM somewhere in the cloud.

i also like https://glitch.com/

Looks great, is there any way to add VS Code extensions / configure the build process (linting, testing etc...) / Is that on the roadmap?

On mobile: If I try to uncomment by hitting backspace on phone keyboard, instead of erasing it duplicates the word left to the marker. :)

Has anyone tried setting up angularfire2 or firebase in a project yet?

This is v cool! Nice job

Are there plans to add react-native?

There's a decent IDE-in-a-browser for React Native at https://snack.expo.io/

Neat!

Is there Source Control integration?

Not yet, but that's absolutely on the near-term roadmap!

Ember 2 is dead? I don't use Ember or Ember 2 and never have but curious why it's not part of the supported frameworks. Same for Vue. Feels like people who make tools are opting to support the frameworks currently most popular. What happens if they fall out of favor in a couple of years?

Certainly not dead! One of the nice things about VS Code/Monaco is how easy they make it to embed the editor in the browser.

With Glimmer, for example, I was able to hack together this playground with full intellisense over a weekend: http://glimmer-playground.netlify.com/

Source code here: https://github.com/tomdale/glimmer-repl (itself a Glimmer app that wraps Monaco)

What about putting the effort to support Vue or Ember? What happens if they fall out too?

They never suggested those frameworks are dead or inferior. They just made a product and launched it.

I mean I imagine adding support for each framework takes a lot of work and if the audience is too small then they might feel the time was better spent making the current three frameworks work well.

This is the idea of mvp right?

They just released it. Should they have waited until they had X framework that Y person feels they are missing? Maybe 50 frameworks added later they can release it and you'd be happy at that point?

Seems like more negative with nothing really added.

I thought HN had more quality comments but i've been seeing these kind of low-effort comments that are mostly negative that seem more about complaining then being constructive. I hope you can understand where I am coming from and I hope if you enjoyed their product they are considering adding support for a framework you enjoy.

test

Creator here — thanks for posting our project! For more info, check out my Medium announcement post here: https://medium.com/@ericsimons/stackblitz-online-vs-code-ide.... :)

Your blog post 404s for me :(

That aside, it astonished me how quickly intellisense popped up. This is great.

I believe Microsoft hosts a similar app iirc

Test?

Reply on news.ycombinator.com