Initiative to work on a CLI solution

[mfazza]

Hello!

This morning I had a discussion on twitter with @Rich-Harris and a few others about the UX around the degit starter. Although I do think The REPL approach is great to get immediate exposure, we could benefit from a CLI developers can relate to. The degit approach creates a (small) layer that makes people not want to try Svelte (as well as the instructions page listing a few different ways). "create-react-app" -as suggested by Rich- is an "eject" button that spits out a template hiding lots of specifics about the implementation and not providing much control over the initial template. Another user suggested a Vue-like CLI that does allow for some modifications on the original template. This issue aims to address two things:

1. I am starting to work on a CLI tool. I'm not sure which repo I should use to work on it since /svelte-cli is dead. *no problem in using that one though

2. Since the discussion happened on a small corner of twitter, I'd like to extend the discussion to everyone. It makes sense to me (and apparently a few others) to create a tool that newcomers can use to get started with Svelte. That tool can be enhanced to support production-ready projects in the future -unlike the original CLI.

Any help/suggestion is appreciated.

[kylecordes]

Ideally I would rather see a combined supper/svelte CLI than something for Svelte only.

[burningTyger]

What about a simple zip/tgz file instead of degit? Github has been offering that since forever and it does exactly the same for no extra costs.

[pngwn]

Any CLI must leave the config intact. There are a number of benefits to having a visible bundler config that you can learn from and modify without needing to learn yet another plugin API.

[mjgartendev]

One of the best parts about the Vue CLI is getting to choose the features you want to include on project init. Not only is it super convenient, but it's also an immediate introduction to what's possible/ with Vue and popular in the community.

I think just adding & installing some rollup plugin dependencies based on user input (or something along those lines) would be a great start.

[klemenoslaj]

@pngwn agreed 100%. That's exactly what happens if you want to extend Angular CLI. Plugin system around the plugin system you wish to modify. Should be avoided here.

Love svelte so far btw

[mfazza]

What about a simple zip/tgz file instead of degit? Github has been offering that since forever and it does exactly the same for no extra costs.

As you mentioned, it does exactly the same. The idea is getting to choose what goes into your project via CLI -which plays with how relatable the tool is.

[mfazza]

@klemenoslaj I'm not familiar with the Angular CLI very much, but I can only imagine that is a nightmare.

and @pngwn there are benefits and that approach shouldn't go away, but this is a suggestion to enhance dev experience and it should be the opposite of complicated -hence giving devs a way they're already used to from other frameworks. Like @mjgartendev described, a CLI as simple as a that would be ok.

[pngwn]

I agree, I just thought I'd mention it since the most popular of these tools is create-react-app and you have to eject to modify anything. I have never been able to use CRA unejected for anything other than little test-apps.

[mjgartendev]

Not sure I love it but this is at least an interesting approach: https://github.com/infinitered/gluegun/blob/master/src/cli/templates/cli/package.json.ejs. it automatically picks up plugins from node_modules too.

If only svelte could write its own config instead of us passing around ejs templates...

[jamesgeorge007]

@mattfazza I would lend a helping hand here if you're planning to build a fully fledged scaffolding utility :clap:

[maxmilton]

FYI, another existing solution (although it does use a plugin architecture):

• https://github.com/lukeed/pwa
• https://github.com/lukeed/pwa/tree/master/packages/preset-svelte

[dworthen]

I built a project scaffolding tool on top of degit. Here is the command to scaffold out a svelte app based on the sveltejs/template and sveltejs/template-webpack.

npx scf create dworthen/scf-svelte-app svelte-app -s

The above command has the user decide which build tool to use, rollup or webpack, as it scaffolds out the starter project. It also prompts for package.json information.

SCF is a cli tool that creates custom, prompt-based cli experiences based on the template it's scaffolding and is not specific to svelte. SCF lives at dworthen/scf. The svelte SCF template is available at dworthen/scf-svelte-app. SCF scaffolds out starter projects based on templates and improves the developer experience by providing control over the scaffolding process but it does not hide implementation details like create-react-app, which I believe is the desire expressed in this issue so it may not meet the needs.

[mfazza]

@jamesgeorge007 Thanks for your help

@MaxMilton Yeah, that's an ok approach. Not a solution though?

@dworthen That's cool. It would be really nice to have the "default way" such as create-svelte-app and have a link for alternate ways. I do like this one a lot, it's the sort of thing that would work for me -but perhaps not everyone else. Thanks for putting it together.

[dworthen]

@mattfazza good idea. What do you have in mind for the default setup? I was thinking of doing something similar to that of Vue cli. The first prompt would have the user choose between using the default preset or to manually select features (as shown on https://cli.vuejs.org/guide/creating-a-project.html#vue-create). The default setup could be based on the sveltejs/template. The manual feature selection could provide options for build tools. Other features can be added to the manual route over time. Such as adding support for TypeScript, unit tests, etc (some of the same features Vue cli provides). I can start working on this template if this sounds like a good approach.

[jamesgeorge007]

@dworthen Are you gonna use the commander.js argument parser :thinking: (sidenote: My personal favourite)

[dworthen]

@jamesgeorge007 I'm currently using caporal.js for parsing cli arguments.

[jamesgeorge007]

@dworthen What's the status? I would love to collaborate :clap:

[mfazza]

The Vue CLI has been mentioned a few times as the experience we should strive for, but I'm still looking for suggestions. I use expo and their CLI has been my favorite lately -offering both an eject to spec and a boilerplate project.

@jamesgeorge007 The status is that I've been busy, but we're still trying to figure out what we'd like to do! I did some experiment with the commander.js (from a tutorial I found) and it was easy to work with it.

Let's focus on defining what we want from a CLI in the beginning so we can move forward. We can build upon it later, but we need something to get started.

[dworthen]

@jamesgeorge007 I have made some updates to the dworthen/svelte-app template. Try running the following command to see the current progress.

npx scf dworthen/svelte-app myApp -s

The first screen presents a list of options to choose from. Users can choose the default setting (rollup) or select specific features. This is copying the vue-cli. The only options that do anything are default, rollup, and webpack. Those options change which build tool is used. The rest of the options are listed for demonstration purposes and don't do anything at this time.

I agree with @mattfazza in that we need to decide which features should be available. From there, we can begin to build out starter templates that meet the selected features. I am fairly new to svelte so I do not know which features are valid. For example, I don't believe svelte supports TypeScript so it may not make sense to present TypeScript as an available feature at this time.

I am diligently working on the next version of dworthen/scf but should point out that the goal of SCF is to be a generic project scaffolder much like yeoman. Unlike yeoman, SCF allows developers to define project scaffolders in a declarative way instead of having to imperatively describe the scaffolding process.

dworthen/svelte-app is a SCF template specific to svelte. If you like the idea of using SCF then this is where you can help. First by defining which features should be available in globals.yaml. Again, I am not sure which features we want/are valid for svelte. Then by building out files based on the selected features. package.json, rollup.config.js, and webpack.config.js all demonstrate conditional scaffolding based on selected features. The readme for dworthen/scf also walks through creating an SCF template.

[magiknono]

I admit that when i tested svelte, i have never heard of word "npx" or "degit" but i had ever play with yarn or npm. i will love a cli for svelte with the simplicity of rails cli and integrated documentation like the elixir cli iex

we can imagine a cli like: svelte new appname --template=webpack --preprocessor="scss" or svelte new appname --template=rollup or with create keyword like react.. . and when you launch the cli you can type h function to print doc This is just suggestion.

[swyxio]

for those who wanted a sapper/svelte overlay, i'm working on https://github.com/sw-yx/ssg which focuses on the static export but also should be a zero config sapper superset. i can add in the other templating stuff later, but right now am more focused on getting the data pipelining right.

[Tolsee]

Any progress on this?

[shogunpurple]

Would love to help out with this.

[swyxio]

https://github.com/jakedeichert/svelvet/ was a good candidate but is dead now

best way to help out is to start a project for this and lead it to completion :)

[orta]

In https://github.com/sveltejs/svelte/issues/4518 I mentioned a desire to also re-use the LSP infra to add a CI check for the JS/scss/etc inside .svelte files also

[jamesgeorge007]

Hey guys, please share your thoughts on https://github.com/jamesgeorge007/svelter-cli

[benmccann]

@kennethlarsen has done some work on creating a svelte CLI: https://github.com/kennethlarsen/baelte

It's in Rust though. That might not be the best fit for the community. I'd expect the CLI to be written in TypeScript

[kennethlarsen]

Hi! Yeah, while Rust might not be the ideal fit for the community it does come with some amazing performance benefits. I'll gladly open up my CLI project to more input for the Svelte community and help whoever is interested in contributing. It is already a working CLI used by a lot of people.

[tanhauhau]

Still early, but I'm working on https://github.com/tanhauhau/svelte-serve, thought it maybe related.

[benmccann]

svelte-check is now available. As @orta mentioned earlier (https://github.com/orta) it uses LSP infra to check .svelte files

[antony]

Closing this as there are a lot of community solutions, so lets see which one wins out.

Once we determine where people are headed, and we have decided that a CLI is definitely desirable, we might work towards building an RFC for the definitive CLI solution and blessing/embracing one of the community solutions as official, but right now, that isn't decided.