{"id":18438687,"url":"https://github.com/seapagan/sp-build","last_synced_at":"2026-04-11T08:03:33.573Z","repository":{"id":50469125,"uuid":"518813037","full_name":"seapagan/sp-build","owner":"seapagan","description":"A Webpack-based build-tool for Frontend development with HTML/CSS/JS etc","archived":false,"fork":false,"pushed_at":"2024-02-08T03:49:40.000Z","size":1920,"stargazers_count":1,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-15T01:37:20.680Z","etag":null,"topics":["build-tool","javascript","template","typescript","web-template","webpack","webpack5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seapagan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-28T11:10:25.000Z","updated_at":"2023-07-22T08:50:17.000Z","dependencies_parsed_at":"2024-11-06T06:36:27.539Z","dependency_job_id":null,"html_url":"https://github.com/seapagan/sp-build","commit_stats":null,"previous_names":[],"tags_count":6,"template":true,"template_full_name":null,"purl":"pkg:github/seapagan/sp-build","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seapagan%2Fsp-build","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seapagan%2Fsp-build/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seapagan%2Fsp-build/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seapagan%2Fsp-build/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seapagan","download_url":"https://codeload.github.com/seapagan/sp-build/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seapagan%2Fsp-build/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31673068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build-tool","javascript","template","typescript","web-template","webpack","webpack5"],"created_at":"2024-11-06T06:21:08.978Z","updated_at":"2026-04-11T08:03:33.537Z","avatar_url":"https://github.com/seapagan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack build system for simple development \u003c!-- omit in toc --\u003e\n\n[![Tests](https://github.com/seapagan/sp-build/actions/workflows/node.js.yml/badge.svg)](https://github.com/seapagan/sp-build/actions/workflows/node.js.yml)\n[![CodeQL](https://github.com/seapagan/sp-build/actions/workflows/codeql.yml/badge.svg)](https://github.com/seapagan/sp-build/actions/workflows/codeql.yml)\n[![Dependency\nReview](https://github.com/seapagan/sp-build/actions/workflows/dependency-review.yml/badge.svg)](https://github.com/seapagan/sp-build/actions/workflows/dependency-review.yml)\n\nThis is a setup for plain HTML/CSS/JS coding, when using a Library or Framework\nis too much. It gives a real-time update in development mode and optimized,\nminimized code for production. JS/TS, CSS/SCSS/SASS ready.\n\n- [How to get](#how-to-get)\n- [How to use](#how-to-use)\n  - [Development](#development)\n  - [Specific Notes](#specific-notes)\n    - [Stylesheet files](#stylesheet-files)\n      - [CSS Modules](#css-modules)\n      - [Vendor Prefixes](#vendor-prefixes)\n    - [Typescript](#typescript)\n    - [Environment Variables](#environment-variables)\n    - [Favicon](#favicon)\n    - [Inline SVG](#inline-svg)\n    - [Source Maps](#source-maps)\n    - [Validation](#validation)\n  - [Testing](#testing)\n  - [Production](#production)\n- [Implemented functionality](#implemented-functionality)\n- [Planned functionality](#planned-functionality)\n- [Bugs](#bugs)\n\nCurrently a work in progress, I still have several additions. Works fine for\nHTML/CSS/JS projects though.\n\n## How to get\n\n- **Easiest Way**: Goto the repository page for this project in GitHub and press\n  the `Use this Template` button. This will create a new repository in your own\n  account with a clean Git history. Clone this to your local development\n  machine and start working. You could even fire up a GitHub codespace and start\n  working straight away!\n\nOther options are:\n\n- Clone the repo from GitHub. Remember to remove the `.git` directory inside and\nreinitialize with `git --init`.\n- Download the latest public release\n  [here](https://github.com/seapagan/sp-build/releases/latest)\n- Download the latest tarball from the main branch\n  [here](https://github.com/seapagan/sp-build/archive/main.tar.gz). This may\n  contain breaking code.\n- Use [Degit](https://github.com/Rich-Harris/degit) to get a clean clone of the\n  repo you can use straight away:\n\n  ```bash\n  npx degit https://github.com/seapagan/sp-build \u003cfolder to put it\u003e\n  ```\n\nThe last 3 options do not contain the `.git` directory so you can then go ahead\nand initialize as usual with `git --init`\n\n## How to use\n\nBefore working, install the development dependencies using `npm install` or\n`yarn install` from the project root.\n\n### Development\n\nOpen a terminal in the downloaded code and run:\n\n```bash\nnpm run dev\n```\n\nor if you prefer `Yarn` then:\n\n```bash\nyarn dev\n```\n\nThis creates a development server running on the default port of `8080` which\nyou can then open in a browser at \u003chttp://localhost:8080\u003e. This will\nautomatically update when you make any changes to the HTML, CSS or JS files.\n\nRemove the current placeholder HTML/CSS/JS and start coding!!\n\n\u003e Running `npm run build` or `yarn build` will create an un-minified version of\n\u003e the produced code for info and checking.\n\n### Specific Notes\n\nThe following notes are of interest.\n\n#### Stylesheet files\n\nYour CSS files need to be imported in the JS file instead of the HTML. In a\nproduction bundle, these will be combined and extracted then minified. Import\nthem at the top of your JS file, for example:\n\n```javascript\nimport \"./styles/site.css\";\n```\n\nYou can also use `SASS` or `SCSS` instead of plain CSS, simply by renaming the\nfile extensions\n\n##### CSS Modules\n\n[CSS Modules](https://github.com/css-modules/css-modules) are enabled for\nCSS/SCSS and SASS. They should have the file name format of `\u003cNAME\u003e.module.css`\n(or SCSS etc), and are imported as above.\n\n##### Vendor Prefixes\n\nAll generated CSS will have the specific vendor-prefixes applied to suport\ncompatibility with older browser versions. Applies in both standard and Module\nsetups.\n\n#### Typescript\n\nBy default the build system uses plain JavaScript. if you prefer to use\nTypeScript, simply rename the `index.js` to `index.ts`, stop and restart the dev\nserver then code as normal. TypeScript and supporting libraries are already\ninstalled.\n\n#### Environment Variables\n\nIf you have a `.env` file in your project root, the script will load environment\nvaraibles from this and make them available using `process.env.MY_VARIABLE`.\nVariables are expanded if needed:\n\n.env:\n\n```ini\n# This is a comment\nMY_TEST_VARIABLE=\"This is a Test\"\nEXPANDED_VARIABLE=${MY_TEST_VARIABLE} with expansion.\n```\n\nscript.js:\n\n```javascript\nconsole.log(process.env.MY_TEST_VARIABLE)\nconsole.log(process.env.EXPANDED_VARIABLE)\n```\n\noutput:\n\n  ```console\n  This is a Test\n  This is a Test with expansion.\n  ```\n\nIf you are using a hosting provider that allows you to set ENV variables in\ntheir interface (eg Heroku, Vercel etc), the script will also pull up them - in\nthis case dont include the `.env` file.\n\nNOTE: As with all systems using `dotenv`, the variables are injected into the\nscript at **BUILD** time, **NOT** runtime! **Do not use this for any secret or\nsecure variables as they will appear in the final bundle**.\n\n#### Favicon\n\nIf you put a `favicon.ico` file in the [src](src) directory, it will\nautomatically be added to the `dist` folder and the HTML. You will need to stop\nand restart the dev server after adding the favicon, if it is running.\n\n#### Inline SVG\n\nSVG files will be automatically inlined to the bundle, unless they are too large\nin which case they will be loaded from disk as usual.\n\n#### Source Maps\n\nBy default we generate inline source maps for Development mode and high-quality\nexternal source map files for Production. These `*.map` files can be deleted if\nyou want, but will only be loaded if the Browser Dev Tools are open so won't\ncause any slowdown in Production. They are very useful for error reports from\nlive sites, and the lack of them does not really make your code more secure.\n**If you are storing secrets or API keys in front-end JavaScript then they are\ninsecure regardless!!**\n\n#### Validation\n\nThis is run automatically on HTML files (using `html-validate`), JavaScript\nfiles (using `ESLint`) and CSS/SCSS/SASS files using `StyleLint`, **The build\nprocess or dev-server will fail if there are any validation errors!**.\n\n### Testing\n\n[Jest](https://jestjs.io/) testing is integrated to the build system. To run the\ntest watcher type:\n\n```bash\nnpm run test\n```\n\nor\n\n```bash\nyarn test\n```\n\nThere is an example test file [index.test.js](src/index.test.js) which you can\nlook at and replace with your own code.\n\n**Note that at this time testing Typescript is not configured.**\n\nIn addition, [Testing Library](https://testing-library.com/) is installed and configured,\nboth for `dom` and `jest-dom`\n\n### Production\n\nOnce your code is ready to go live, you can create an optimized and minimized\nversion. To do this run:\n\n```bash\nnpm run prod\n```\n\nor for `Yarn`:\n\n```bash\nyarn prod\n```\n\nThis (if you have no errors) will create / overwrite the `dist` directory with\nyour new index.html and minimized CSS, JS plus the respective `.map` files. This\nfolder can be served from any standard web server or GH-Pages / Netlify etc.\n\n## Implemented functionality\n\n- Development server that hot-reloads on all code changes\n- Create a standalone production build that can run in a browser.\n- [Babel](https://babeljs.io/) for Javascript files to transpile to\n  backwards-compatible code for older browsers.\n- JS and CSS are compressed and named with a Hash for each code change. The HTML\n  file is automatically updated with these.\n- [CSS modules](https://github.com/css-modules/css-modules) are enabled for CSS,\n  SCSS and SASS files.\n- [PostCSS](https://github.com/postcss/postcss) is enabled, allowing the use of\n  their many plugins. Simply install and then add them to the\n  `postcss.config.js` file in the root.\n- [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)\n  is included to enable the use of experimental CSS features or those currently\n  with limited browser support.\n- Generated CSS has vendor prefixes applied using\n  [AutoPrefixer](https://www.npmjs.com/package/autoprefixer)\n- [ESLint](https://eslint.org/) (JS), [StyleLint](https://stylelint.io/) (CSS)\n  and [HTML-Validate](https://gitlab.com/html-validate/html-validate) (HTML) are\n  run automatically.\n- [SCSS or SASS](https://sass-lang.com/) is automatically detected and compiled\n  on the fly.\n- [Typescript](https://www.typescriptlang.org/) is integrated. You can use\n  either TS or JS as required.\n- Environment variables are read from a `.env` file if it exists and injected\n  into the bundle.\n- Adds favicon automatically if exists in the `src` folder.\n- Separate Sourcemap files are generated for Production.\n- Smaller SVG files will be inlined to the bundle instead of having separate\n  files.\n\n## Planned functionality\n\n- Integrate `favicons-webpack-plugin` to auto generate favicons for different\n  devices\n- Look at possible integration of\n  [postcss-normalize](https://github.com/csstools/postcss-normalize) since we\n  now have postcss enabled.\n- possibly install [postcss-nested](https://github.com/postcss/postcss-nested)\n  to allow nesting like SCSS in plain CSS (it already allows nesting in CSS to\n  the proposed [CSS Nesting Specification](https://drafts.csswg.org/css-nesting-1/))\n  using  `postcss-present-env`\n\n## Bugs\n\n- ESLint does not understand Typescript in (at least) VSCode and gives editor\n  warnings / errors. This does not stop compilation though.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseapagan%2Fsp-build","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseapagan%2Fsp-build","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseapagan%2Fsp-build/lists"}