npm-web-sampler

CODE_OF_CONDUCT | CONTRIBUTING | LICENSE | SECURITY | CHANGELOG | TODOs

• pull_request
  • 
  • 
  • 
  • 
  • 
• main
  • 
  • 
• any
  • 
  • 
  • 

AI

• AGENT.md
• copilot-instructions.md
• GEMINI.md
• CLAUDE.md

Summary

A web sampler of technologies and tools that can be used to quickly scaffold a web-project

• npm
• bower
• pip ( & pipx)
• grunt
• jasmine: jest, testem & frisby
• semantic-release: To automagically create releases
• docker ( & docker-compose )
• helm: To Deploy to Kubernetes
• megalinter
• parcel: Bundler

Motivation

This project goes to great lengths to prove all the DevOps & CI/CD work needed for something like simple static index.html.

This is ALL THE BELLS AND WHISTLES, but WITHOUT the Christmas tree 🎄.

Purpose

Demonstrate the amount of code and overhead needed for devops, even without having an actual project.

Package Managers

name	file	lock file	destination	comments
npm	package.json	package-lock.json	node_packages/	Node packages
bower	bower.json		repositories/	git clone {repo}@main
pip	requirements*.txt	requirements.frozen.txt	.venv/	pip install -r requirements.txt
pipx	requirements.pipx.txt		~/.local.bin/*	pip executable-only packages

Warning

bower is DEPRECATED. We only use the task runner. But NOT the bower registry.

Note

gil (pip install) could replace bower for git clone {repo}@main functionality. I wish npm would allow this.

Task Runners

name	file	comments
npm/npx	package.json	See scripts
yarn	package.json	See scripts:yarn:*
grunt	Gruntfile.js	For advanced tasks

Linting

tool	file
prettier	.prettierrc*
htmllint	.htmllintrc (via grunt)
lint-staged	.lintstagedrc.json
standardx	.eslintrc*

MegaLinter

+----MATCHING LINTERS-----+----------+----------------+------------+
| Descriptor | Linter     | Criteria | Matching files | Format/Fix |
+------------+------------+----------+----------------+------------+
| COPYPASTE  | jscpd      |          | project        | yes        |
| REPOSITORY | checkov    |          | project        | yes        |
| REPOSITORY | devskim    |          | project        | yes        |
| REPOSITORY | dustilock  |          | project        | yes        |
| REPOSITORY | git_diff   |          | project        | yes        |
| REPOSITORY | gitleaks   |          | project        | yes        |
| REPOSITORY | grype      |          | project        | yes        |
| REPOSITORY | kics       |          | project        | yes        |
| REPOSITORY | secretlint |          | project        | yes        |
| REPOSITORY | syft       |          | project        | yes        |
| REPOSITORY | trivy      |          | project        | yes        |
| REPOSITORY | trivy-sbom |          | project        | yes        |
| REPOSITORY | trufflehog |          | project        | yes        |
+------------+------------+----------+----------------+------------+

name	file	does
MegaLinter	.mega-linter.yml	MegaLinter: All-in-one linter
Code Spell Checker	.cspell.json	Code Spell Checker
DjLint	.djlintrc	DjLint: HTML, Markdown and YAML linter and formatter
Gherkin Lint	.gherkin-lintrc	Gherkin Lint: Linter for Gherkin syntax
MarkdownLint	.markdownlint.json	MarkdownLint: Markdown style checker
JSCPD	.jscpd.json	JSCPD: Copy/Paste Detector
Lychee	.lycheeignore	Lychee: Link checker
Trivy	trivy.yaml	Trivy: Find vulnerabilities in container images and filesystems

Building

See Parcel docs.

Configuration

name	file	does
HTML Nano	.htmlnanorc	Minification
PostHTML	.posthtmlrc	PostHTML: Tool to transform HTML/XML with JS plugins

Testing

[B]ehavior [D]riven [D]evelopment

• features/
• testem.yml: Test'em (run unit tests in all browsers)
• __tests__/
  • *.unit.spec.js: jest+jasmine unit tests
  • *.rest.spec.js: jest+jasmine+frisby RESTful Integration tests
  • *.se.spec.js: jest+selenium Integration tests: (See below)
  • *.pw.spec.js: jest+playwright Integration tests

Selenium

• selenium/
• __tests__/
  • *.se.spec.js: Integration tests
  • *.se.js: Manual tests

Containerizing

Docker

Linux

Alpine VS Debian

Feature	Debian	Alpine Linux
Base Size	~100MB to 1GB	~5MB (Node wrapper adds ~40MB)
C Library	glibc (Standard GNU)	musl (Ultra-lightweight)
Package Manager	apt / apt-get	apk
Shell	bash	sh (via BusyBox)

Debian

Note

Generated from Gemini

Version	Codename	Toy Story Meaning	Current Status in Docker
Debian 15	Duke	Duke Caboom (daredevil motorcyclist)	Future release (planned).
Debian 14	Forky	Bonnie's homemade spork toy	Testing branch (experimental).
Debian 13	Trixie	The blue plastic Triceratops	Current Stable. Best for bleeding-edge compilers.
Debian 12	Bookworm	The smart green toy worm with a flashlight	Old Stable. Highly compatible, default for most modern apps.
Debian 11	Bullseye	Woody's wooden toy horse	Old-Old Stable. Getting older, actively nearing End of Life.
Debian 10	Buster	Andy's real-life pet dachshund	Archived / EOL. Avoid using for new builds.
Debian 9	Stretch	The purple rubber toy octopus	Archived / EOL. Deprecated across modern Docker builds.

See Linux Debian codenames

Dockerfiles

Name	Purpose
Dockerfile	Current
Dockerfile.next	Experimental (future)

docker compose

Entry point for docker. It simplifies development by docker compose up-to-victory.

Setup

env

.env files

1. Copy .env.*.local.example to .env.*.local and modify as needed. i.e.-
   1. .env.development.local.example

env/ folder

Convenient scripts to export FOO into memory,

1. Copy .*.src.sh.example to .*.src.sh and modify as needed. i.e.-
   1. google.src.src.sh.example: For npx gemini CLI
   2. kaggle.src.sh.example: For kaggle CLI

Husky

Install:

$> npm run husky:install

See .husky/

Uninstall:

$> npm run husky:uninstall

Dependencies

1. $> npm run setup
2. $> npm install

Build

dist/

$> npm run dist

Test

Unit

$> npm test

Browsers

$> npm run testem:ci

Integration

$> npm run validate

Verify

Build + Test

$> npm run verify

w/ Docker

$> npm run verify:docker

References

• Conventional Commits
• Playwright vs Selenium: What are the Main Differences and Which is Better?

Medium

• Container Security: A Complete Overview of GitHub Actions Integrated Image Scanning Tools
• Using dotenv with Jest
• Deploy Your Programs onto Minikube with Docker and Helm
• Docker + Kubernetes + Helm: A comprehensive step-by-step using Java
• Setting up ESlint with Standard and Prettier
• Jest + Selenium WebDriver

Container-ization

• How to Use Your Own Registry
• Deploying a Docker Container to Kubernetes using Helm and Helm Charts

GitHub

• percebus /
  • commons
  • percebus-assets

Logos

	BrowserBase.com
		semantic-release