Boilerplate CLI

This is a beta version of the Cossette Frontend Boilerplate CLI.

The boil command

The boil command is the base of the boilerplate CLI. It currently accepts no argument and it has no options.

What it does

The command creates a fresh Svelte project with libraries and configurations in the current directory. See technical details for a list of everthing it does and install.

How to use

• Create a new project on Bitbucket
• Clone the empty GIT repo to a local directory that we will call location is this README.
• Install pnpm globally, with your methode of choice : https://pnpm.io/installation
• Install the Boilerplate CLI globally

  pnpm add -g cossette-boilerplate-cli

• Go to the (almost) empty directory

  cd path/to/location

• Run the boil command to execute the package.
• Run pnpm run dev when everything is done to start coding!

Technical details

See here every command the boil directive executes:

• Create a fresh SvelteKit install in a new directory

npm init @svelte-add/kit@latest ./svelte-base-install -- --demos false --with typescript

• Move every file from the install to the main directory

shopt -s dotglob nullglob; mv svelte-base-install/* ./

• Install first batch of dependencies

pnpm install -D npm-run-all postcss postcss-calc postcss-import postcss-mixins postcss-nested autoprefixer tailwindcss tailwind-scrollbar-hide @tailwindcss/aspect-ratio typesafe-i18n

• Clone files from our (Cossette) Svelte-base repository

git clone [email protected]:cossette-qc/boilerplate-svelte-base.git

• Remove useless directories from main directory

rm -rf src/ static/ svelte-base-install/

• Remove .git directory from the cloned repository

rm -rf boilerplate-svelte-base/.git

• Remove package.json from the boilerplate

rm -rf boilerplate-svelte-base/package.json

• Move every file from the cloned repository to the main directory

shopt -s dotglob nullglob; mv boilerplate-svelte-base/* ./

• Remove useless directory

rm -rf boilerplate-svelte-base/

• Force install of dependencies with pnpm, to enable fetching external sources

pnpm install -f

• Install GSAP from external source and other dependencies

pnpm install -D gsap@npm:@gsap/business@^3.11.5 @splidejs/splide @splidejs/svelte-splide @studio-freight/lenis

• Add node scripts to package.json

sed -i '' 's/\"dev\": \"vite dev\"/\"dev\": \"npm-run-all --parallel vite typesafe-i18n\"/' package.json

• Add commands for linting, formatting and Typesafe i18n

...
vite: "vite dev --host --port 3000 --open",
lint: 'prettier --check --ignore-path=../../.prettierignore . && eslint "src"',
format: 'prettier --write --ignore-path=../../.prettierignore .',
"typesafe-i18n": 'typesafe-i18n'
...

• Go back?

cd ../

Roadmap

Here are the things that we would like to add to the boilerplate in the near future

CMS support

• Add out-of-the-box structure and settings for Craft, Dato or other.

Add deployment adapter

• Add Adapter for Netlify or Vercel automatically