skeleton icon indicating copy to clipboard operation
skeleton copied to clipboard

Node Skeleton Install Script

Open figuerom16 opened this issue 1 year ago • 6 comments

Edit: changed file to mjs extension. Edit: Added argument parsing. Edit: Added help arg. If anyone knows how to one line install Astro please comment.

Making a Node Skeleton install script for SkvelteKit, Vite, Astro. It's working, but still rudimentary in design. A few things I wanted to check on was if this fits the install pattern that the team is looking for in terms of scaffolding. Also if you want Tailwind: Aspect Ration and Line Clamp as install options or anything else that might help in addition. I do have a default install param for Sveltekit where calling node SkeletonInstall.js -a will do a one line install with the defaults below. Steps after this for me would be to:

  • Learn how to create an npm package.
  • Add suggested install blurbs for what to menu items to pick per framework
  • add prompts package to make prompts prettier
  • add which-pm-runs package to use for users PM
  • maybe use ora for load spinners, but the single package installs are short and eveyrone else already has a spinner.
  • Heavier Testing https://gitlab.com/figuerom16/misc/-/blob/main/SkeletonInstall.mjs

Let me know what you both think or how you'd like me to proceed. Since it's using node without any installed dependencies the script can be downloaded and run from command prompt for giving it a quick try. node SkeletonInstall.mjs

Script can do one line installations and bypass questions with arguments: --project -p <project_name> --framwork -f <Vite, Sveltekit, or Astro> This only looks at the first letter so -f v for Vite will work also. --theme -t <custom, skeleton, rocket, vintage, modern, sahara, seasfoam> --extras -e <@tailwindcss/forms+@tailwindcss/typography> this does an npm i -D on any package specified there and adds it to the plugins in tailwind.config.cjs. --help -h console.logs this. --auto -a boolean type. Including this will cause the program to do an automated install. If arguments aren't specified it will use it's defaults: project: skeleton_auto framework: SvelteKit theme skeleton tailwind_extras = @tailwindcss/forms+@tailwindcss/typography It currently only works for Vite (Svelte) and SvelteKit. Still looking for a one line install method for Astro.

figuerom16 avatar Sep 27 '22 18:09 figuerom16

Thanks @figuerom16 I'll copy my response from Discord here as well:

  • I don't think Tailwind's official plugins should be part of our script. Those can and should be "extracurricular" activities
  • Per NPM packages, I'll reach out to you directly on Discord (this is done now, check your DMs)
  • Definitely recommend Typescript. I think Node's made this easier to setup recently
  • We're very keen on automated testing, so good call with that.

Also, I'm not sure what sort of system you're using to build this. Something like Vite might be beneficial. I'm not sure what their workflow looks like for creating node apps though. But might allow for testing via Vitest, which we use for Skeleton itself and I highly recommend.

FYI I'll put this on my notes to check later tonight or early tomorrow, then I may have more specific feedback to provide.

Also pinging @niktek so he sees this.

endigo9740 avatar Sep 27 '22 18:09 endigo9740

@figuerom16 Finally had a chance to review this video I shared in Discord. Again, definitely recommend it to see what's kind of on the cutting edge for the Node CLI feature set: https://www.youtube.com/watch?v=gSLmWQonQ2c

NOTE: per Node v18.3.0

Summarized:

  • ESM style import syntax available, pairs with .mjs files (ex: import fs from 'node:fs';)
  • Argument parsing seems super useful for our use case
  • Native Fetch support - though probably not needed for us
  • Built in test runner, no need for Vite/Vitest
  • Lots of improvements for recursive file system commands, which may be useful for us

Unfortunately it doesn't look like Typescript is supported natively yet (I was thinking of Deno), but hopefully something they add soon!

I still need to do a proper code review through your script, but I've started pulling together a few notes. Hope to have some feedback to you in the next day or so.

endigo9740 avatar Sep 28 '22 07:09 endigo9740

@endigo9740 I did watch the video and:

  • Switched over to the ESM style since it's much nicer.
  • The native ParseArgs utitility is going to make arguments very easy to use I was thinking of doing something like node SkeletonInstall.mjs <project_name> <framework> <...more_options>
  • I will use fetch for testing. I'll have the server spin up then fetch method="HEAD" every second for five seconds until a response is returned then check if the status is 200. That should be a good final test.

ParsArgs will allow for easy use of the test runner. The tests I was thinking of doing per each framework:

  1. Make sure the project folder was created
  2. Test if the files we are updating exist (this one I'll probably report an error in the install script instead since writefile creates files)
  3. Test if regex matches what we are looking for in order to scaffold exists.
  4. The final fetch test mentioned above.

figuerom16 avatar Sep 28 '22 16:09 figuerom16

The changes look great! Everything mentioned sounds great, but I'm not sure of the use case for Fetch. What portion of the script requires HTTP communication? I wasn't clear on that.

endigo9740 avatar Sep 28 '22 20:09 endigo9740

Fetch would be for the test runner only. The test will go through the entire process including spinning up the server with npm dev run. Then attempt a fetch on the header. Return the results after a few attempts. Spin down and cleanup. It's something I'll have to work on since I've never done this in node, but I'd do it in bash with curl a lot.

figuerom16 avatar Sep 28 '22 21:09 figuerom16

Hey @figuerom16, I believe @niktek Had reached out to you on Discord to see if any more progress was made on this. Nik had been away for a move but is now back in full capacity. Just let know if we can help with anything.

Also FYI I recently went through writing up some new documentation guides for SvelteKit/Vite/Astro and realized this script might be useful for folks that want to just skip the boilerplate steps. That's igniting my interest in creating a version of this end users can use.

We still have a bit of a runway ahead of us before we can begin setting up additional repos/NPM packages for Skeleton, but I don't mind us getting as much prepped before that point as we can. Feel free to reach out to me in a DM on Discord and I can fill you in on the ETA for that.

endigo9740 avatar Oct 15 '22 19:10 endigo9740

Hi @endigo9740, I didn't see any notifications from @niktek on Discord, but that's fine as I've been away also and was caught up in another project. The script is still usable in its current state for setting up the boilerplate for new projects. I've been using it as node SkeletonInstall.mjs -a -f sveltekit -p my_new_project. It's using plain node still so no extra packages are required. The one piece I'm missing is a one line auto installer for Astro. I'll ask the Astro reddit side if someone has a one line scheme for that. Running the script without any arguments walks the user through the install process.

I did notice Node v19 has been released so I was going to try running it with that and see what new features are available for it. I'll update the script when the guides update as well.

figuerom16 avatar Oct 19 '22 19:10 figuerom16