Stackblitz – Online VS Code Editor for Angular and React

by uptown • 9 years ago

240 72 9 years ago

ericmsimons15• 9 years ago

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!

acdjuiamadfn• 9 years ago

I want to ask 3 things:

1) Man hours taken in this project

2) Your intended goal

3) Possible avenues to make money.

akuji19932• 9 years ago

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.

fgblanch• 9 years ago

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!

Hydraulix989• 9 years ago

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).

afshinmeh4• 9 years ago

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

ericmsimons15• 9 years ago

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.

mncharity• 9 years ago

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.

ontouchstart• 9 years ago

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.

easonchan42• 9 years ago

test

minihack• 9 years ago

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.... :)

atoko• 9 years ago

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

pirocks• 9 years ago

Test?

krat0sprakhar• 9 years ago

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!

ericmsimons15• 9 years ago

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...

filearts• 9 years ago

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.

ToFab123• 9 years ago

Is there Source Control integration?

ericmsimons15• 9 years ago

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

drej• 9 years ago

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!

ericmsimons15• 9 years ago

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 :)

betageek• 9 years ago

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)

mattchamb• 9 years ago

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

tonyedgecombe• 9 years ago

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

passenger• 9 years ago

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

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

sytse• 9 years ago

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

sunilkumarc2• 9 years ago

Are there plans to add react-native?

onion2k• 9 years ago

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

sunilkumarc2• 9 years ago

Neat!

jonny_eh• 9 years ago

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

devdad• 9 years ago

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

akuji19932• 9 years ago

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.

ericmsimons15• 9 years ago

Sass support is landing late Aug or early Sept :)

nikkwong• 9 years ago

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?

ericmsimons15• 9 years ago

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 :)

skrebbel• 9 years ago

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

celim307• 9 years ago

i also like https://glitch.com/

afshinmeh4• 9 years ago

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

ericmsimons15• 9 years ago

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

jadk157• 9 years ago

This is v cool! Nice job

nachoab• 9 years ago

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?

royka1182• 9 years ago

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

headmelted• 9 years ago

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.

royka1182• 9 years ago

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

Eridrus2• 9 years ago

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

statictype• 9 years ago

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.

oddlyaromatic• 9 years ago

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.

mkohlmyr• 9 years ago

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.

brooklyntribe• 9 years ago

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

ericmsimons15• 9 years ago

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

idibidiart• 9 years ago

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?

tomdale• 9 years ago

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)

kalcode• 9 years ago

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.

peternicky2• 9 years ago

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

moosingin3space• 9 years ago

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

ericmsimons15• 9 years ago

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

watty• 9 years ago

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.

hamburglar1• 9 years ago

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

karllager• 9 years ago

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.

ericmsimons15• 9 years ago

I'm glad you caught that :)

tdevito• 9 years ago

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

Stackblitz – Online VS Code Editor for Angular and React

Related Stories