Skip to content

Latest commit

 

History

History
282 lines (173 loc) · 8.61 KB

README.md

File metadata and controls

282 lines (173 loc) · 8.61 KB
Raw

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

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