Investigate CLI options

I was looking at other create_blank_app cli tools and the one that seemed the most promising is create_nuxt_app.

They have the following structure:

SAO

They use a tool called SAO which is a scaffolding tool. It lets you define specific generators, that can combine different parts of a scaffold together. You can then pass options to the generators to scaffold a custom project based on the user input.

I would recommend that we create seperate branches for each lib (addon that can be changed eg. CSS framework or backend). Once we have the seperate branches we can compare them with main and see which files will need to be updated.

This is their SAO generator file. It defines where to get the different parts of the project that can then be installed: https://github.com/nuxt/create-nuxt-app/blob/master/packages/create-nuxt-app/lib/saofile.js

Inside the generator file you can define actions to build the starter:

Actions

Adds files to the template

if (this.answers.ui !== 'none') {
  actions.push({
    type: 'add',
    files: '**',
    templateDir: join(frameworksDir, this.answers.ui)
  })
}

Move files from one place to another

actions.push({
  type: 'move',
  patterns: {
    gitignore: '.gitignore',
    '_package.json': 'package.json',
  }
})

Modify a file

actions.push({
  type: 'modify',
  files: 'package.json',
  handler (data) {
    return { ...data, ...pkg.load(generator) }
  }
})

Remove a file

actions.push({
  type: 'remove',
  files: 'package.js'
})

Templates

In a separate folder they have all the required files to add a specific technology or framework. While their system is a bit more simple then ours (no backend), I think we can split specific parts of our starter into smaller segments.

Lets take the backend as an example: We could move all the files we need for the backend to work in another folder. In our case these files would be:

• package.json with only the extra packages and scripts needed to run the backend
• /server
• /tests/server

When the developers selected with-backend these files will be copied over. The templates folder is a seperate npm package, which is installed inside the CLI package. Through this the files can be accessed.

Prompts

They have one file in which all their questions are defined: https://github.com/nuxt/create-nuxt-app/blob/master/packages/create-nuxt-app/lib/prompts.js These questions are asked and the answers are collected. SAO comes with a custom prompt system that we can use!

Conclusion

This option for the CLI will require a rewrite of the sidebase template. We will have to decide if we want to keep a demo version of sidebase in this repo, or if we create a new repo (or use sidebase-libs), however I believe this is the best option we can take to ensure we can continue to expand sidebase!

[zoey-kaiser]

So as discussed orally: plop seems to be the most maintained + allows us to also change code inside the files we copy easily if we want to via variables. One last thing to checkout before deciding: Do we have to use .hbs files always or do we have the option to put in vanillas ts and js files if we do not want variable-interpolation?

In this example here, they show how they use a .txt file as a template file. Therefore I assume other files should work as well!

https://github.com/plopjs/plop#using-a-dynamic-actions-array

[BracketJohn]

Thanks!

Other options I found are: plop, hygen, slush.

Can you also look into those and see how they compare to sao / yeoman? Maybe one of them has a fresher approach -> SAO is deprecated by the maintainer.