Starter templates for smooth DX

Description • Core dependencies • DX dependencies • Package commands • Pre-requisites • Quick start

Description

Basic set of typescript-based starter templates. To switch between template check git branches:

1. Basic starter template based on pure typescript:

git checkout ts-template

2. Functional programming starter template based on fp-ts (CURRENT SELECTED VERSION):

git checkout fp-ts-template

3. Basic starter template based on Nest.js:

git checkout nest-template

Core dependencies

• fp-ts – functional programming in TypeScript.
• zod – typeScript-first schema validation with static type inference (for validating environment variables).

DX dependencies

Dependencies updating

• pnpm – a fast, efficient package manager that speeds up installation and leverages caching.

• renovate – bot for automated dependency updates.

  • check official guide to install bot
  • check interactive dashboard to configurate repository
  • check renovate.json file for manual configuration
    • replace baseBranches: ["ts-template", "fp-ts-template", "nest-template"] in renovate.json with your own branch(s) which should be track down by renovate bot

• npm-check-updates – explicitly check and update project's dependencies.

• .npmrc – configuration file customizing pnpm behavior:

  • shamefully-hoist=true: makes the package manager hoist dependencies to the root of node_modules, creating a flatter structure similar to npm's default. This can improve compatibility with packages that expect a flat dependency tree.

• .nvmrc – specifies the Node.js version that should be used for the project, ensuring a consistent runtime environment for all developers and CI systems.

Dependencies graph visualizing

• dependency-cruiser – analyzes and visualizes your project’s dependency graph, helping maintain a clean architecture.

Static type checking & Typescript dev server

• tsx – runs TypeScript files on‑the‑fly with watch and debug support, eliminating the need for a separate build step during development.

• TypeScript – brings static type checking and modern JavaScript features for enhanced code reliability.

  • check tsconfig.json file for manual configuration

Bundler & Plugins

• vite bunder – a modern, lightning‑fast build tool for optimized production builds.

  • check vite.config.ts file for manual configuration

• vite-bundle-analyzer – provides visual insights into your bundle size and composition for performance tuning.

• vite-bundle-visualizer – do the same as vite-bundle-analyzer but with slightly different UI and save output result as html file into ./docs folder.

• vite-plugin-dts – automatically generates TypeScript declaration files during the build for better downstream type support.

• vite-tsconfig-paths – resolves TypeScript path aliases in Vite, making module imports cleaner and easier to manage.

Code formatting & styling

• Prettier – code formatter only for resolving maximum line length (printWidth)

• .editorconfig – defines consistent coding styles (such as indentation, line endings, and charset) across different editors and IDEs. It helps ensure that all contributors follow the same formatting rules, regardless of their personal editor settings.

• ESLint – enforces code quality and style rules, catching errors early in the development process.

• @antfu/eslint-config – ESLint configuration tailored for modern TypeScript projects based on flat eslint config.

• eslint-plugin-functional – ESLint plugin enforcing the accordance to functional programming paradigm.

CI/CD

• simple-git-hooks – simplifies Git hook management (e.g. running typechecks before push) to enforce code quality.

• Commitizen (cz-conventional-changelog) – standardizes commit messages using conventional changelog formats for better release notes.

• semantic-release (along with its plugins like @semantic-release/changelog, @semantic-release/commit-analyzer, @semantic-release/git, @semantic-release/github, @semantic-release/npm, and @semantic-release/release-notes-generator) – automates versioning, changelog generation, and release publishing, streamlining the entire release process.

  • check releaserc.json file for manual configuration
    • docs prefix will trigger new patch release, if you want avoid this behavior remove appropriate option from config file

• ci/cd workflows – automated building, security audit, linting, generating BSOM and semantic release with best practices of confuring github pipelines.

  • check .github/workflows/ci.yml file for manual configuration
    • update branch names for push and pull_request events
    • uncomment release job to enable auto semantic release
    • create (and add it in repository secrets) BOT_SECRET_GITHUB_TOKEN with appropriate permissions (check release.permissions) in order to allow renovate bot push release commits directly into main branch bypassing rules

Misc

• 0x – generates flamegraphs for performance profiling and optimization insights.
• debugging – permits to debug typescript code directly in vscode. For more information check official guide from tsx

Package commands

Name	Command	Description	Use Cases
dev	npx tsx --env-file=.env --watch ./src/main.ts	Runs the application in development mode with file watching.	Active development with auto‑reloading.
start	npx tsx --env-file=.env ./src/main.ts	Starts the application without watch mode.	Quick startup for local testing.
start:prod	NODE_ENV=production node --env-file=.env ./dist/main.js	Runs the production build of the application.	Production deployment and testing.
debug	npx tsx --inspect --env-file=.env ./src/main.ts	Runs the application with Node.js inspector enabled (attach to process). In order to run debug in launch mode, use debug tab in vscode.	Debugging during development
commit	cz	Launches Commitizen to standardize commit messages.	Ensuring consistent commit messages.
flamegraph	NODE_ENV=production 0x -- node --env-file=.env ./dist/main.js	Generates a flamegraph for performance profiling.	Analyzing performance bottlenecks.
graph:generate:nested	npx depcruise src --include-only '^src' --progress --config .dependency-cruiser.cjs --output-type dot | dot -T svg -Grankdir=TD | tee docs/dependency-graph-nested.svg | node node_modules/dependency-cruiser/bin/wrap-stream-in-html.mjs > docs/dependency-graph-nested.html	Generates a nested dependency graph of the source code.	Detailed visualization of module interdependencies.
graph:generate:top-level	npx depcruise src --include-only '^src' --config .dependency-cruiser.cjs --output-type ddot | dot -T svg -Grankdir=TD | tee docs/dependency-graph-top-level.svg | node node_modules/dependency-cruiser/bin/wrap-stream-in-html.mjs > docs/dependency-graph-top-level.html	Generates a top‑level dependency graph of the source code.	Overview of primary dependency structure.
graph:generate	npm run graph:generate:top-level && npm run graph:generate:nested	Runs both top‑level and nested dependency graph generation.	Comprehensive dependency visualization.
graph:check	npx depcruise src	Checks the dependency structure of the project.	Validating dependency rules and detecting issues.
prebuild	npx rimraf --glob ./dist	Cleans the distribution folder by removing previous build artifacts.	Pre‑build cleanup before starting a new build.
build	npx vite build	Builds the application using Vite.	Creating a production‑ready build.
typecheck	tsc --noEmit	Runs TypeScript type checking without emitting output files.	Verifying type correctness before deployment.
format	npx prettier --write src/	Formats source files using Prettier.	Enforcing code style consistency.
eslint	npx eslint	Lints the codebase using ESLint.	Code quality and style checks.
eslint:fix	npx eslint --fix	Lints and auto‑fixes issues in the codebase.	Quick auto‑correction of linting errors.
analyze	analyze -c ./vite.config.ts	Performs bundle size analysis using Vite’s config.	Gaining insights into bundle size.
analyze:v2	npx vite-bundle-visualizer -c ./vite.config.ts --output ./docs/bundle-size.html --open.ts	Performs bundle size analysis using Vite’s config (and save as html).	Gaining insights into bundle size.
upgrade:check	npx npm-check-updates --format group	Checks for available dependency updates and groups them.	Reviewing potential updates before applying them.
upgrade:interactive	npx npm-check-updates --interactive	Runs an interactive mode to selectively upgrade dependencies.	Manually selecting which dependencies to update.
upgrade:all	npx npm-check-updates --format group -u	Upgrades all dependencies as per grouped updates.	Bulk upgrading dependencies to the latest versions.
semantic-release	semantic-release --extends ./releaserc.json	Automates versioning and publishing based on commit history.	CI/CD automated release process.
update-git-hooks	npx simple-git-hooks	Updates Git hooks in your repository.	Maintaining standardized Git hook behavior.

Pre-requisites

• Node.js (checked on v20.15.1)
• pnpm

Quick start

1. Clone all templates or only specific one:

git clone https://github.com/Skippia/universal-starter-templates.git

• ts-template

git clone --single-branch --branch ts-template https://github.com/Skippia/universal-starter-templates.git

• fp-ts-template

git clone --single-branch --branch fp-ts-template https://github.com/Skippia/universal-starter-templates.git

• nest-template

git clone --single-branch --branch nest-template https://github.com/Skippia/universal-starter-templates.git

2. Checkout directory and install dependencies:

cd universal-starter-templates && pnpm i

3. (Optionally) install git hooks (by default – typecheck project files on git push):

npm run update-git-hooks