Modern Web Boilerplate

This is a modern front-end boilerplate which is partially based on islands architecture with focus on improved DX (Developer Experience).

Modern Features

Feature	Advantage
Dynamic Imports	Reduced initial load times
Bundle Splitting	Reducing the loading and execution time
Tree Shaking	Dead code removal
Auto Prefixing	Supports more browsers
SPA	Improved UX with routing
PWA	Native app like performance
Image Optimization	Reduces Image size
Special Routing	Lightweight SPA
Rough Annotations	Modern site decorators
Type Checking	Reduced Bugs
Linting	Maintain Code Standards
Git Hooks	Improved DX (Developer Experience)
HMR	Quick response on code change
Workflows	Automated github workflows

Technologies Used

Technology	Why?
Svelte	DX, no Virtual DOM, build time compilation, reactivity and ease of use
Vite	Blazing fast, DX, HMR, Extensible plugins and framework agnostic
TypeScript	Type Checking, DX, Code Auto Completion and Superset of JavaScript
EsLint	Code Linting and Maintains Standards
Prettier	Code Formatting and Maintaining standards
Commitizen	Lints git commit messages
Husky	Git Hooks before and after git commit
Tinro	Lightweight Routing
Terser	JavaScript minification, mangling and tangling
PostCSS	CSS transformations
AutoPrefixer	Prefixes the CSS to support more browsers
GitHub Actions	Building and Deploying the Code in Github Pages
Dependabot	Automatic Dependency Updates
CodeQL	Discover vulnerabilities across a codebase with semantic code analysis engine
PWA	App like installation and Offline capabilities
Rollup	Aggressive Bundle Optimizations and TreeShaking
EsBuild	Ultra fast dependency pre bundling
Conventional Commits	Git commit messages standards
Release Please	Automated versioning and releasing packages based on commits
Image Sharp	Image optimizations out-of-the-box

Automation Scripts

yarn dev

• Starts a fast web server with HMR at http://localhost:5173

Runs

vite

yarn build

• Compiles the svelte code to highly optimized and bundled HTML, CSS and JavaScript in dist/ folder
• Optimizes images using Sharp and downloads custom fonts from google and bundles it up
• Produces the production code to be hosted

Runs

vite build

yarn preview

• Starts a simple server with builded production site

Runs

vite preview

yarn lint

• Lints the code with src directory and tries to fix the issues to ensure the code quality and standards across the entire codebase

Runs

eslint --ext .js,.ts,.svelte --ignore-path .gitignore --fix src

yarn format

• Formats the entire project with prettier to make the code base more clean which improves the the readability and thus makes the project more maintainable

Runs

prettier --write . '!**/dist'

yarn check

• TypeChecks the svelte files with TypeScript to reduce runtime bugs

Runs

svelte-check --tsconfig tsconfig.json

yarn prepare

• Setup Husky Git Hooks for various automation

Runs

husky install

yarn commit

• Runs commitizen and lints the commit messages to make release-please workflow to work well

Runs

cz

Automation Workflows

Husky Git Hooks

Pre Commit

• Runs all necessary linting, formatting and build workflows ensures code standards and makes sure that everything works fine before committing

Hook at: pre-commit

Runs following commands

yarn lint #eslint linting
yarn format #prettier formatting
yarn build #vite-rollup building

Post Commit

• Runs commit message linting to make sure the commit message needs all Conventional Commits standards which will be later used for automated versioning and release system by google's release please

Hook at: prepare-commit-msg

Runs following command

exec < /dev/tty && yarn commit --hook || true #lints commit with interactive prompts

GitHub Actions

DependaBot

• Automated dependencies update including critical security updates
• Maintained by GitHub and used by top projects and organizations all over the world

Workflow in: dependabot.yaml

CodeQL

• Analyzes Code Quality to make sure the code is not bad and does static analysis to find out common security vulnerabilities

Workflow in: codeql-analysis.yaml

Release Please

• Automated semantic versioning and releases based on the commits with automatic changelog generation and version bumps.
• Created by Google to use for their products

Workflow in: release-please.yaml

Deploy

• Automated build system which deploys the optimized compiled version of the site to gh-pages branch for GitHub Pages hosting

Workflow in: deploy.yaml

LICENSE

MIT

Contributions

All kind of contributions are welcomed

---

Made with ❤️ by Rajaniraiyn

---

⬆️⬆️ Move to Top ⬆️⬆️