adds in blog post walkthrough for using the node scaffolding with an … #4074

nellshamrell · 2017-11-16T22:28:59Z

…angular-seed application

I know that seed frameworks like Angular Seed are falling out of favor and using angular-cli is now preferred, but Habitat is intended both for new and legacy applications. There are a LOT of legacy applications that use Angular Seed, I'm adding this functionality for them,
Signed-off-by: Nell Shamrell [email protected]

…angular-seed application Signed-off-by: Nell Shamrell <[email protected]>

thesentinels · 2017-11-16T22:29:01Z

Thanks for the pull request! Here is what will happen next:

Your PR will be reviewed by the maintainers
If everything looks good, one of them will approve it, and your PR will be merged.

Thank you for contributing!

nellshamrell · 2017-11-16T22:29:52Z

@thesentinels acceptance

thesentinels · 2017-11-16T22:29:53Z

🤘 I am sending your branch against master to our acceptance environment.

thesentinels · 2017-11-16T23:16:02Z

Travis CI has started the deployment of acceptance.

thesentinels · 2017-11-16T23:23:02Z

💖 Travis CI reports acceptance has been deployed.

I love new and shiny websites!

I just want you and the contributor to answer me one question:

Signed-off-by: Nell Shamrell <[email protected]>

nellshamrell · 2017-11-16T23:43:31Z

@thesentinels acceptance

thesentinels · 2017-11-16T23:43:32Z

🤘 I am sending your branch against master to our acceptance environment.

thesentinels · 2017-11-16T23:47:09Z

Travis CI has started the deployment of acceptance.

thesentinels · 2017-11-16T23:53:03Z

💖 Travis CI reports acceptance has been deployed.

I love new and shiny websites!

I just want you and the contributor to answer me one question:

nellshamrell · 2017-11-17T00:11:28Z

Up on Acceptance http://www.acceptance.habitat.sh/blog/2017/11/angular-seed/

cnunciato · 2017-11-17T04:04:38Z

www/source/blog/2017-11-16-angular-seed.html.md

+
+Hello my fellow Habicats!
+
+Do you have legacy Angular projects that use [angular-seed](https://github.com/mgechev/angular-seed)? Now you can package them with Habitat using the Node Scaffolding! Let's give it a go!


I'm not sure "legacy projects that use Angular Seed" makes sense, since Angular Seed is a starter kit. It might be better to consider aiming this at developers of Angular apps rather than strictly those using Angular Seed specifically (many may not -- I actually never have, though I know it's widely referenced), and just use Angular seed as the reference example?

That was something I added later on in the process - I've noticed that the moment I mention Angular Seed, someone tends to bring up that Angular does not recommend its use anymore in favor of angular cli. That said, Habitat is intended to be used with legacy applications, and we need a way to support them.

In short, I was trying to preempt the "Well, actually, you shouldn't be using Angular Seed anyway..." comments. I'll consider a better way to word this.

Yeah that's all true, which is why it might be good to tailor this more to a general Angular audience than specifically to Angular Seed or angular-cli, since scaffolding should be able to support either one.

I'm starting to wonder whether we can get away without having some sort of additional configuration setting in which the scaffolding user specifies which npm command should be run for build and start steps. I don't know there's going to be a reliable way to detect whether, for example, build should be run in all cases (because here, it's build.prod) or whether it makes sense to use start as a trigger to create a Habitat service (as here, it isn't, but for a Node app running Express or Koa, it would be). Hrm.

I'm planning on doing a follow up that highlights angular-cli - I'll mention that at the bottom of this blog post. Do you mind posting your thoughts on additional configuration setup as an issue in core-plans? That way we can track it and continue the conversation :)

While I would LOVE to do a general blog post that covers all things Angular, I think there is too much divergence in how it is used (starter kits vs. yeoman vs. angular-cli) to do a one size fits most (definitely not all!) post at this time. I'd like to have this be the start of a series on packaging Angular apps using the node scaffolding and cover each common way individually (especially since I will likely need to make changes to the scaffolding to accommodate each of them, I haven't tested that yet).

cnunciato · 2017-11-17T04:05:57Z

www/source/blog/2017-11-16-angular-seed.html.md

+## Pre-requisites
+* A Github Account
+* NodeJS installed on your workstation
+* Angular installed on your workstation


You don't install Angular on your workstation; it's just bundled up in package.json. You can probably remove this line.

Good point!

cnunciato · 2017-11-17T04:08:16Z

www/source/blog/2017-11-16-angular-seed.html.md

+Do you have legacy Angular projects that use [angular-seed](https://github.com/mgechev/angular-seed)? Now you can package them with Habitat using the Node Scaffolding! Let's give it a go!
+
+## Pre-requisites
+* A Github Account


Darn camel case strikes again...

cnunciato · 2017-11-17T04:10:30Z

www/source/blog/2017-11-16-angular-seed.html.md

+
+## Pre-requisites
+* A Github Account
+* NodeJS installed on your workstation


Any minimum version requirement (or maybe a note to refer to the README or package.json)? The angular-seed readme seems to strongly recommend node >=v6.5.0 and npm >=3.10.3 .

Will add that in!

cnunciato · 2017-11-17T04:12:57Z

www/source/blog/2017-11-16-angular-seed.html.md

+
+```console
+"typescript": "2.4.2",
+"@compodoc/compodoc": "1.0.3",


Why is it necessary to downgrade these? I'm sure there's a good reason, so some explanation would be nice and could serve as an opportunity to educate those new to Habitat as well.

Dependency hell is the short version - several of the dependencies in the Angular Seed framework use typescript 2.4.2, but one requires typescript 2.6.0 (@compodoc/compodoc) - I have not been able to get the node scaffolding to accept two different versions of that dependency (and discovered that there are very strong opinions in the Node community around allowing a package.json to require multiple versions of a dependency). I've gone pretty deep into peer dependency land trying to solve this (and barely found my way out). Until all dependencies in Angular Seed require the same version of typescript, this seemed like the most straightforward solution.

I'll have to think on a good way to explain this...

Until all dependencies in Angular Seed require the same version of typescript, this seemed like the most straightforward solution.

Ah, this is definitely going to be common, then. But I guess still don't understand why, if you can run npm run build.prod for example (which will ultimately resolve all dependencies, including whatever versions of typescript might be conflicting), we can't do the same with scaffolding.

I will add that as an issue to core-plans and mention it in the post.

habitat-sh/core-plans#979

cnunciato · 2017-11-17T04:15:27Z

www/source/blog/2017-11-16-angular-seed.html.md

+$ hab plan init -s node
+```
+
+Now let's open up the plan file that was created when we ran "hab init", it should look like this:


hab plan init.

Good catch!

cnunciato · 2017-11-17T04:18:09Z

www/source/blog/2017-11-16-angular-seed.html.md

+pkg_scaffolding="core/scaffolding-node"
+```
+
+And there is one line we need to add - currently, we need to manually say that we will run Habitat as the root user. Add this line to the plan.sh:


Some explanation/elaboration here would be nice as well. (Personally I'd expect that since we'll just be building some JavaScript, we should be able to run this as the default user. Why can't we?)

This is due to an existing issue with the Supervisor, where it unintentionally resets directory ownership to root #1547. I'll include an explanation and link.

cnunciato · 2017-11-17T04:20:42Z

www/source/blog/2017-11-16-angular-seed.html.md

+* A Github Account
+* NodeJS installed on your workstation
+* Angular installed on your workstation
+* Habitat installed on your workstation


I happen to be on a new laptop, so I immediately hit the missing sig-key error when I try to enter the studio. We should link off to the appropriate places in the docs so those who haven't installed Habitat already can do that without having to hunt around.

cnunciato · 2017-11-17T04:29:54Z

Nice!

This is a little strange, though, in that while it works, one never actually serves Angular apps in this way in real life (e.g., with a development server); they're compiled into HTML and JavaScript files and served up statically with something like Nginx. I'd sort of strongly suggest we provide a more real-world example for this if we can, since I don't believe we want to advocate this workflow for single-page apps or static web sites in general.

cnunciato · 2017-11-17T04:31:36Z

www/source/blog/2017-11-16-angular-seed.html.md

+
+## Starting your application
+
+Start up a docker container running your application with this command:


Will correct!

cnunciato · 2017-11-17T04:36:34Z

www/source/blog/2017-11-16-angular-seed.html.md

+Start up a docker container running your application with this command:
+
+```console
+$ docker run -it -p 5555:5555 core/angular-seed


I copy-pasted this without first noticing the core/ in there. Might be good to use your-origin again as you do above and/or make mention of the need to specify your own when you run this.

Good catch, ty!

cnunciato

We should modify this to explain how to use Habitat to build production-ready assets and serving them statically with a real web server (since this is how it's done for real).

nellshamrell · 2017-11-17T19:56:49Z

Just had a great conversation with @cnunciato about this - who provided some fantastic insight into the way many Angular devs work.

While this workflow is cool for demo purposes, it would be alienating to those who are used to compiling their Angular apps as static assets and then running them through a web server like nginx.

This will likely involve some fundamental rethinking of how the node scaffolding works - but I believe will make it much more powerful. Closing this for now while we rethink that :)

adds in blog post walkthrough for using the node scaffolding with an …

c1cee25

…angular-seed application Signed-off-by: Nell Shamrell <[email protected]>

nellshamrell requested review from cnunciato and mgamini as code owners November 16, 2017 22:28

changing date on blog post

ac1a1f9

Signed-off-by: Nell Shamrell <[email protected]>

cnunciato reviewed Nov 17, 2017

View reviewed changes

cnunciato suggested changes Nov 17, 2017

View reviewed changes

nellshamrell closed this Nov 17, 2017

nellshamrell mentioned this pull request Nov 17, 2017

[scaffolding-node] Make sure node scaffolding works well with Angular habitat-sh/core-plans#816

Closed

raskchanky deleted the angular-seed-blog-post branch November 17, 2017 21:57


		Hello my fellow Habicats!

		Do you have legacy Angular projects that use [angular-seed](https://github.com/mgechev/angular-seed)? Now you can package them with Habitat using the Node Scaffolding! Let's give it a go!


		## Starting your application

		Start up a docker container running your application with this command:

adds in blog post walkthrough for using the node scaffolding with an … #4074

adds in blog post walkthrough for using the node scaffolding with an … #4074

Conversation

nellshamrell commented Nov 16, 2017

thesentinels commented Nov 16, 2017

nellshamrell commented Nov 16, 2017

thesentinels commented Nov 16, 2017

thesentinels commented Nov 16, 2017

thesentinels commented Nov 16, 2017

nellshamrell commented Nov 16, 2017

thesentinels commented Nov 16, 2017

thesentinels commented Nov 16, 2017

thesentinels commented Nov 16, 2017

nellshamrell commented Nov 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnunciato Nov 17, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnunciato commented Nov 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnunciato left a comment

Choose a reason for hiding this comment

nellshamrell commented Nov 17, 2017

cnunciato Nov 17, 2017 •

edited

Loading