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 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
srcdirectory 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-pagesbranch for GitHub Pages hosting
Workflow in: deploy.yaml
LICENSE
Contributions
All kind of contributions are welcomed
