create-snowpack-app: interactive mode

[FredKSchott]

Background

Create Snowpack App has come a long way, and we now have 10+ official templates and many more community ones. As our community & ecosystem have grown, we've run into a few problems:

1. TypeScript & JavaScript create 2x the number of templates, one for each language. They look almost identical, but need to be maintained individually.
2. CSA apps set you up with an application structure, but almost no plugins provided by default. It's still up to you to go out and find the plugins that you want without much guidance from us.
3. No good way to upgrade after initializing your app.

Goals

1. Build a new CLI that walks you through setting up your app, and then creates that directory.
2. Build a new page of snowpack.dev that walks you through setting up your app, and then gives you a zip folder to download. (alternatively, generates the exact CLI command that you can run to generate the app, no questions asked)

Feature Request: New Interactive Creation Mode

npx create-snowpack-app

> Welcome to Create Snowpack App!

> Q: What are you building today?
> A: Single Page App, Static Website, etc.

> Q: What UI library/framework would you like to use?
> A: React, Preact, Svelte, Vue, None

> Q: Would you like to use TypeScript?
> A: Y/N

> Q: Would you like to use a CSS pre-processor?
> A: Sass, Less, PostCSS, None

> Q: Would you like to use X? (We can just keep recommending plugins, until you say done)
> A: Yes, No, I'm done, you can set up my app now)

> Great, your app is being created.
> Done! Your app is now ready!
> [INSTRUCTIONS]

Each of these answers would get saved, and then your project would be generated based on these answers. Instead of needing a full template for each permutation, each answer would instead provide 1 piece of the site:

• UI framework = App.xxx (jsx, svelte, vue)
• JS vs. TS = App.xxx (jsx vs. tsx, svelte (ts), vue (ts))
• CSS pre-processor = App.xxx (css, scss, less)
• Use X? = add a plugin, make some additional one-off changes if needed

I'm sure it won't be quiet as easy as I'm trying to make it sound here, but it should hopefully be much easier to maintain than our current setup.

Implementation-wise, each answer would provide each UI library/framework would have a JS & TS version of the component itself

Future: Interactive Upgrade Mode

This isn't necessarily a part of this design, but just a peek at where we could go from here.

Once we start thinking of this as an interactive tool and not just a "template copy-paste-from-github" tool, we can start to add more features around maintenance of your snowpack app. Instead of trying to manage some master config for you, we could have an upgrade/check/doctor command that is automatically added as an upgrade script in your app, that scans your project for deprecated/outdated config/plugins/patterns and helps you upgrade.

[FredKSchott]

Update: I reserved create-snowpack so that you'll be able to run npm init snowpack. That also is nice because it means we can develop this entirely in a new package without worrying about "breaking changes" to the current CLI

[stramel]

@FredKSchott Would it be worth having Snowpack as an org? That would allow us to use @snowpack/create and not have to worry about reserving package names.

[FredKSchott]

We already have @snowpack as an org! But, I thought npm init only worked with the unscoped create-* package names.

[stramel]

@FredKSchott Hmmm, I can't find the repo that I was thinking of that did the scoped but with npx you can do npx @snowpack/create. I think with npm init you can do npm init --scope=@snowpack? But very unsure about the npm init

[gr2m]

@olyno created an interactive CLI to create a snowpack project at https://github.com/frontend-templates-world/new-snowpack-project, see their comment at https://github.com/snowpackjs/snowpack/discussions/1023#discussioncomment-105791

@olyno I'm checking out new-snowpack-project right now, it looks great 👍🏼 It's not quite what Fred describes above, but it's great nevertheless. I'll give you some feedback on your repository.

Would you like to collaborate on the interactive CLI which would move away from templates and instead create a new app based on choosing aspects of your app?

Build a new page of snowpack.dev

@FredKSchott you mean "on snowpack.dev", basically a web-based UI that lets you create the app?

and then gives you a zip folder to download

I think we can do one better: login with your GitHub account and we will create a GitHub repository for you. We could still provide a zip download, but I think using a GitHub app to create the repository might be preferable because it would allow us to setup some repository settings that might be helpful

Once we start thinking of this as an interactive tool and not just a "template copy-paste-from-github" tool, we can start to add more features around maintenance of your snowpack app. Instead of trying to manage some master config for you, we could have an upgrade/check/doctor command that is automatically added as an upgrade script in your app, that scans your project for deprecated/outdated config/plugins/patterns and helps you upgrade.

Instead (or besides) adding scripts that you have to run manually, we can install a snowpack GitHub app which does these checks for you and creates issues/PRs to help you keep it up-to-date.

[gr2m]

@FredKSchott can you clarify what you had in mind for the effect of the "What are you building today?" question?

[Olyno]

Would you like to collaborate on the interactive CLI which would move away from templates and instead create a new app based on choosing aspects of your app?

Sure I could! I think it will be harder to generate a new app from scratch using a CLI without a lot of issues as conflicts, but it can be a really good challenge if it can be done 😃

[gr2m]

We can start out with a minimal set of questions/answers, and then iterate on it, one step at a time 👍🏼

[FredKSchott]

Awesome y’all, can’t wait!

Re: what are you building today: I was trying to get at the difference between a MPA vs a SPA. Basically:

• multi-page app: HTML based page with a single component on it.
• single-page app: HTML wrapper with a single App.js component

Tbh the distinction isn’t important at the moment, so ignore this question/idea for now.

[gr2m]

@FredKSchott correct me if I got anything wrong, but for a first version, we want to ask 3 questions, and keep the current templates

> Q: What UI library/framework would you like to use?
> A: React, Preact, Svelte, Vue, None

> Q: Would you like to use TypeScript?
> A: Y/N

These two questions should result in one of the templates we have today: https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app

Special template cases are currently

1. minimal
2. 11ty

let's ignore these for now.

The 3rd question would be about selecting plugins: https://github.com/snowpackjs/snowpack/tree/master/plugins. Adding a plugin always means to

1. Add it as dev dependency
2. Create (or add to) snowpack.config.json's "plugins" key: ["<package name>", {}]

@Olyno does that all make sense?

[Olyno]

Sure it does, I'm on it 😄

[gr2m]

awesome, please let me know if there is anything I can help with!

[Olyno]

@gr2m Ok so I did some works about the project, and it should be good now. Can you have a look in before I merge it, and potentially give me a feedback?

[gr2m]

Absolutely! I'll have a look today

[drwpow]

@melissamcewen and I had a bad experience today publishing the @snowpack/app-template-blank template. Because the package.json is both used for the actual npm package, as well as the thing that gets instantiated for new projects, I was throwing template snapshot tests… because I was preparing something for npm.

I think the snapshot tests have other problems, but they work for now. But them snapshotting actual code that is committed to VC seems like a bad pattern (I say that being the person that I think set it up 😛 ).

I’d love to move to a world where the README.md, package.json, and everything else is just auto-generated by this tool (and we only snapshot generated code instead)

[Olyno]

Not related to @drwpow's problem, but if anyone can try the new version of the create-snowpack-app cli (0.2.0), feebacks are welcome 😃

[gr2m]

☝🏼 that version implements what we discussed in the comment above https://github.com/snowpackjs/snowpack/issues/1277#issuecomment-714911113

[VanishMax]

Hi! I really appreciate all the efforts of the Snowpack team to create the best bundler! So, I'd like to help on this issue by working on templates for any framework or technology. What can I do?

[gr2m]

@VanishMax that's great! Is there any that you are particularly interested in? Always best to scratch your own itch!

You could also help us by testing the upcoming, interactive CLI: https://github.com/frontend-templates-world/create-snowpack-app-interactive