search

stackblitz / core

Online IDE powered by Visual Studio Code ⚡️
https://stackblitz.com
MIT License
10.3k stars 914 forks source link

Enable Terminal CLI Usage #17

Closed Vaiune closed 2 years ago

Vaiune commented 7 years ago

This is great project really, able to try quick things or even import projects and work on them is great. But I think it is essential to have a way to use CLI for Ionic and Angular project types which has a big part in development cycle and boosts productivity.

dwaq commented 7 years ago

I think this is an extension of #6. I can understand wanting to keep things simple but something will always come up where you'd want to look under the hood.

EricSimons commented 7 years ago

@Vaiune when you say big boost in productivity/dev cycle, what features of those CLI's are you talking about specifically? Generators for components/services/etc? We're planning on implementing those super soon, would love to hear if there are other parts of the CLI you'd like to see though :)

@dwaq totally agree reg looking under the hood — we're working on ways to add support for customizing tooling, but it's going to be reasonably difficult/tricky to pull off and will prob take us a few months to fully implement. That's the only reason we've kept things so simple for the time being :)

DavidFrahm commented 7 years ago

@EricSimons I didn't open this issue, but found it when I was about to create one just like it.

Generators are a big part, but for me I would also need:

Angular

Ionic

PS I would love to hear what your intended use case(s) are for StackBlitz. I'm not sure if you're intending this to be my full-time IDE, or just for snippets or to show/share concepts like Codepen, or for when I'm away from my "real computer" and need to tweak or fix something, etc.

EricSimons commented 7 years ago

@DavidFrahm Curious why you have the serve commands listed since StackBlitz is serving your app live at all times — would love to hear more on this!

Regarding our intended use case, right now it's about rapid prototyping & sharing (great for building proof of concepts, sharing demos, examples, etc). We're chipping away at adding all the functionality you'd ever need to build fully fledged apps though :)

Not sure if you saw the Medium article I wrote announcing StackBlitz, but there's some more info in there about it!

dwaq commented 7 years ago

I had to switch away from stackblitz to another service because I didn't have access to the errors that are displayed in the command line. This is what stackblitz displays: image This is what the CLI displays: image There's no way I would've figured out this error based on Stackblitz's message. I like your service, but it's impossible to debug applications without access to the CLI.

EricSimons commented 7 years ago

@dwaq can you link the project that caused this error? Would be v helpful so I can debug what happened (I think I know, but would be great to see a repro that I can put in a fix for).

I like your service, but it's impossible to debug applications without access to the CLI.

Just fyi, we are not intentionally hiding errors from you. We currently handle ~95% of error cases as intended, and we're working as fast as we can to cover the other 5%.

I've been trying to find time to write about this in the docs (bugfixes obv have priority though), but in the meantime:

StackBlitz utilizes highly optimized & custom technology to compile, bundle, install deps, and run your application inside of your web browser. As such, it does not run any CLI's under the hood.

Wait, why don't we just use the normal CLI tools? I think an analogy answers this best:

Think of StackBlitz as the Tesla Roadster. It's a brand new product that's custom engineered to use an entirely new technology under the hood. This new technology allows it to provide the end user the same basic functionality as a "normal car"... except it's insanely fast and can do things a normal car couldn't ever dream of doing (with the analogy here being slow dev toolchains that are FS heavy and can only run locally).

What happens if something goes wrong under the hood though? How do you troubleshoot & repair your electric vehicle? Well, since there's not a regular combustion engine inside of the thing (which you'd normally be able to troubleshoot yourself), you might need to call the dealership if things act wonky. However, in subsequent updates, the bugs will be further and further hammered out and made easier for the end user to debug, ensuring that everyone will be able to live in a world where this awesome technology under Tesla's hoods is dominant.

Obviously bringing electric cars to market is like 99999x harder than what we're doing, but this analogy is meant to illustrate what it generally takes to bring new technologies to market — which is precisely what StackBlitz is trying to do. Specifically, we're creating an entire web engineering toolchain that runs natively inside of your browser. This has never been done before, and we're working insanely hard (often 14+ hour days) to make this a reality.

That all said, this is not an excuse for poor error handling/subpar dev UX. We take any & all bugs incredibly seriously and we ship fixes & features multiple times per day. By the end of this month we anticipate elegantly supporting 99%+ of application error cases.

Just like the Roadster, getting bug reports/feedback is critical to the success of this mission — so please keep them coming (and thank you so much for your patience :).

By using StackBlitz and reporting issues, bugs, feedback, or ideas, you're directly pushing us all one step closer to the key inflection point of the modern web: the day you can use the web to build the web itself.

Hopefully that helps explain what's going on here, but please feel free to ask any questions if not :) I'm going to update the docs soon w/ this + more info reg open sourcing the core tech — stay tuned!

dwaq commented 7 years ago

Thanks for the explanation. That does help clear things up.

As for the bug, check out: https://stackblitz.com/edit/reactredux?file=reducers%2Freducer_weather.js Line 1 should be import { FETCH_WEATHER } from '../actions/index';. A simple error but impossible to find with the given error message.

EricSimons commented 7 years ago

Thanks for linking the project here — I'm working on a fix now. Btw, feel free to DM me on twitter if you ever run into problems & I can help you debug super fast :)

EricSimons commented 7 years ago

@dwaq do you think this error message is descriptive enough? Will push the fix to prod if you think so

screen shot 2017-08-09 at 5 13 34 pm

EricSimons commented 7 years ago

^ it's now in prod, you can see it working on the URL you sent: https://stackblitz.com/edit/reactredux?file=reducers%2Freducer_weather.js

dwaq commented 7 years ago

That looks good but it would also be helpful if it mentions that /reducers/reducer_weather is the file that can't find the /actions/index file.

Just looking at the message, you'd think that /actions/index is missing (it's not), but since the error isn't coming from the root directory, it's misleading.

DavidFrahm commented 7 years ago

@EricSimons i mentioned the serve commands for two reasons:

Thanks for your responses here, and let me know what else I can do to help!

janpio commented 7 years ago
DavidFrahm commented 7 years ago

@janpio is correct that Ionic Lab is just a convenience for launching the lab url. I was not sure if it changed the way the server started up to support the lab features.

You can run ionic serve (without --lab) and then go to http://localhost:8100/ionic-lab and it works just fine.

EricSimons commented 7 years ago

Hey folks! We just shipped support for Angular CLI generators - just right click on any folder: https://twitter.com/ericsimons40/status/915646318294343680

Try it out and lmk what you think!

zompad commented 6 years ago

right click for CLI generators is so cool.

thanks!!!

liuchang0920 commented 6 years ago

amazing.... that is really helpful

calarconpieriz commented 6 years ago

Amazing!

nomisaurus commented 6 years ago

Thank you!

ganeshp0001 commented 6 years ago

Thanks for great solution for creating components, services etc just by right clicking. Awesome work!!!

Recently @angular/material added few new tricks to create UI prototypes even more smoothly using commands such as: ng ganerate @angular/material:materialNav --name=main-nav

these commands generate markup using material directives to get us default UI for usual UI scenarios, such as Navbar, sidebar, dashboads, forms etc ready. I wish this too gets supported in Stackblitz soon, as these command and stackblitz have same goal...to make prototyping super fast.

And again,,thanks for such great tool..!

DanielNetzer commented 5 years ago

I join @ganeshp0001 for the addition of custom generators, such as the material schematics, ngrx schematics, Akita store CLI and some more... e.g. https://github.com/datorama/akita/tree/master/cli

88pawankumarjha commented 5 years ago

Is there a way to do an "ng build --prod" from stackblitz?

beeman commented 5 years ago

@88pawankumarjha we are currently not using Angular CLI to build the Angular app, so sadly there is not way to run that command. This will most likely change in the future.

With that being said, if you want to have a prod build deployed you can use our Firebase integration to get your code out into the wild! 🔥

88pawankumarjha commented 5 years ago

@88pawankumarjha we are currently not using Angular CLI to build the Angular app, so sadly there is not way to run that command. This will most likely change in the future.

With that being said, if you want to have a prod build deployed you can use our Firebase integration to get your code out into the wild!

I like the application, but when I share the link with someone for preview. It looks bad when it take much time for the preview server to initialize. So I want to host the code into my own server. But when I export the code to my laptop and take a prod build, then it falls. This is the only reason which is stopping me from using this website.

beeman commented 5 years ago

@88pawankumarjha we are currently not using Angular CLI to build the Angular app, so sadly there is not way to run that command. This will most likely change in the future. With that being said, if you want to have a prod build deployed you can use our Firebase integration to get your code out into the wild!

I like the application, but when I share the link with someone for preview. It looks bad when it take much time for the preview server to initialize. So I want to host the code into my own server. But when I export the code to my laptop and take a prod build, then it falls. This is the only reason which is stopping me from using this website.

I just did a check with a new project and it seems to fail like this:

$ ng build --prod
The /private/tmp/test/src/environments/environment.ts path in file replacements does not exist.

To get around this error you can either remove the fileReplacements from angular.json:

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

Or create the files at the expected location:

mkdir src/environments/
touch src/environments/environment.ts
touch src/environments/environment.prod.ts
88pawankumarjha commented 5 years ago

Thanks it works :+1:

jforjava1981 commented 5 years ago

Can we add spec.ts files as part of component generators? of course i would also like to know if there is any way to run just tests in stackblitz angular prototype.? thanks

thisrashid commented 5 years ago

angular 8 is not running on stackblitz.

https://stackblitz.com/edit/customer-manager

weilies commented 5 years ago

I am trying to make my StackBlitz Angular app to send email. It shows that firebase cloud function is requried https://firebase.google.com/products/functions/ My question is, how can we run the command line in StackBlitz? Coz i am using chromebook which not able to install any binary.

My doubt is, since stackblitz's vision is to "development on cloud", what's other workaround to run the command lines under section "Initializing Cloud Functions"

fvsch commented 2 years ago

We shipped beta support for Node projects and toolchains in 2021, and released it as stable for Chromium-based browsers (and alpha in Firefox) in early 2022. See “WebContainers” in this documentation page.

So I think we can consider this feature request done.

If there are more specific issues with how WebContainers support different tools and libraries, please search for existing issues and open a new one if needed.