choo Yeoman generator

[sotojuan]

I'm gathering interest in a Yeoman generator for choo and asking for help if needed.

The point of this generator would be to be the simplest possible config—no 20gb of dependencies like with other libraries and frameworks. Just enough to get started.

My wish list:

• Dev build (budo?)
• Production build (minify + concat)
• Some sort of simple CSS/styling solution
• Very mininal example (any of the projects in the examples directory will do)

Would be awesome for me:

• One step deployment with Surge or Now (run build step and then run deployment script)

I'll stick with Browserify as that seems to be preferred and Webpack configs are ugly 🚂 I'll take care of most of the code, just need opinions/help on the build steps.

Let me know what you think!

[bendrucker]

just need opinions/help on the build steps.

Happy to comment if helpful. https://www.npmjs.com/package/bundleify might be good for the production build. I can make a CLI.

[yoshuawuyts]

@sotojuan yeah, sounds good what you're saying - think for now budo def makes the most sense - if / when hot reloading comes out maybs something else might work better but that can def wait. I'd probs include sheetify for CSS, as it makes it easy to import packages from npm (personally a big fan of tachyons and basscss as they're similar in spirit to choo, but for CSS). Also like your idea for deploying :grin:

@bendrucker yeah, that would be amaze! Probs the only additions it would need would be a way to pass -g envify and -g yo-yoify; perhaps envify would make sense to include into bundleify core actually, but reckon choo specific transforms should be able to be passed as an extra flag mayhaps?

Def digging this - keen to see what comes out of it :sparkles:

[sotojuan]

This is more for @bendrucker but any other potential contributors are welcome:

The repo is here. It's got the "title" example code under app/templates/index.js which is what the sample project will be. I'll add issues for each thing I want but in general I am looking for a dev build and deployment options.

In case you're not comfortable with Yeoman, just edit app/templates/_package.json and the rest there as needed, then run npm test from the root, and go to the temp directory to manually test the app. It sounds annoying but that's because it is :-) I can do the testing if you want.

Also, there's already a package called generator-choo but it's empty and published to 0.0.0. If we ask nicely I am sure we'll be allowed to publish under that name.

[sotojuan]

@bendrucker bundleify doesn't seem to work with sheetify right? I need to add its transform to Browserify.

Also for some reason browserify keeps adding Node stuff to my builds (even simple ones w/o sheetify and I get errors that it can't find isBuffer). @yoshuawuyts let me know if you can help, really bad at this stuff ha.

I literally just want a browserify command that will apply es2020 and sheetify/transform to index.js.

[yoshuawuyts]

@sotojuan seems you might be importing the wrong files; buffer is generally indicative of some sort of stream / http server being pulled in. Have you by any chance inspected the resulting output? - it should def not be doing that :/

[MattMcFarland]

This looks very interesting, I'd love to help out

[sotojuan]

@MattMcFarland please do—I've linked the repo in this issue.

[MattMcFarland]

Ok cool! What do you think of moving it to the trainyard organization? Would be happy to add you as a owner as well. https://github.com/trainyard

[sotojuan]

@MattMcFarland Sure, no problem (would make this generator a community project rather than mine) though for now I just want to get it done ASAP! What I need right now is a build script that:

• Is simple (this generator is for trying out/getting started with choo—not big production apps)
• Makes it so I can do a one-command deployment with Surge

For the latter, the result of the build script would compile and minify the JavaScript and either produce or copy an index.html and put all of that in a directory. I was having issues but I may work on it a bit more today—I got some prototypes working.

[MattMcFarland]

Cool! I'm completely onboard with a simple generator - I'm not sure about deployment with surge? Is there a particular reason why you would use something like Surge for deployment?

I'm going to pull down the repo today and start playing around with it :) I have experience with yo generators so I should be able to bang out some useful code (hopefully) sooner rather than later.

[sotojuan]

Surge is just the simplest way to deploy frontend-only apps. I've found it very helpful for me and especially newbies that don't want to set up a server/Heroku/etc. It's literally just one command and you're done.

I'll also work on it—there's stuff other than build script that needs to be done (documentation for one).

[MattMcFarland]

Maybe we should put together some goals as to what we want and (not want) out of it?

Perhaps on your repo in an issue or something? Id be willing to just throw up some bullet points of what I would like out of a yeoman generator and combine that with yours (and anyone elses) then we can maybe prioritize the list or something. EDIT: I just saw your top bullet point list :)

I would like to add mine:

• Use command line to scaffold out models, views, elements templates.
• It would be nice to provide a start with unit testing and linting.
• It should provide an example using stylesheets.
• Add unit testing and code linting

[MattMcFarland]

Happy to share that I finished up a basic scaffold:

It basically is a simple app with a couple pages to show routing and a todo list mini app to show state management. I plan on creating a remove-demo script as well. I spent most of the night working on it, but Id like to get feedback and even some code review if possible, it might be worth interrogating any design decisions I made as I really would like this to be as friendly to the community as possible.

Feel free to clone it here: https://github.com/trainyard/generator-choo

git clone https://github.com/trainyard/generator-choo

It's not on npm but I've been using npm link to test.

[danneu]

I've been playing with choo the last few days and threw together generator-choo-webpack based on my generator-elm generator.

The goal is to setup the minimal boilerplate that lets me hack on choo immediately. Also has optional twitter bootstrap support.

I stumbled upon this thread just now while browsing the issues and decided to share my quick attempt at the webpack solution. Yall are certainly collaborating on something more interesting.

[MattMcFarland]

Big update!

You can now add views, elements, models, components in the command line. When you add views, they automatically create routes too.

yo choo:view
yo choo:model
yo choo:component
yo choo:element

[MattMcFarland]

Just wanted to say that you can now install via npm:

npm i yo -g
npm i generator-choo -g

The generator is fully tested as well using tape :)
https://www.npmjs.com/package/generator-choo

[sotojuan]

I think we can close this now huh @yoshuawuyts? :-)