npm-web-sampler

CODE_OF_CONDUCT | CONTRIBUTING | LICENSE | SECURITY | CHANGELOG | TODOs

• 
• 
• 
• 

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		.venv/	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
HTML LINT	.htmlnanorc	HTML LINT: Static code analysis tool you can use to check your HTML code
JSCPD	.jscpd.json	JSCPD: Copy/Paste Detector
Lychee	.lycheeignore	Lychee: Link checker
PostHTML	.posthtmlrc	PostHTML: Tool to transform HTML/XML with JS plugins
Trivy	trivy.yaml	Trivy: Find vulnerabilities in container images and filesystems

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

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

Development

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