{"id":22387813,"url":"https://github.com/jonasfroeller/webpack-webapp","last_synced_at":"2026-04-11T10:34:45.376Z","repository":{"id":213933714,"uuid":"726435726","full_name":"jonasfroeller/webpack-webapp","owner":"jonasfroeller","description":"Webpack frontend-webapp starter.","archived":false,"fork":false,"pushed_at":"2024-01-12T20:27:29.000Z","size":941,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T21:14:53.829Z","etag":null,"topics":["asciidoc","docker","docs","fonts","gh-pages","images","isc-license","jest-tests","postcss","scss","shoelace","tailwindcss","ts","web-components","webpack5","workflow"],"latest_commit_sha":null,"homepage":"https://jonasfroeller.github.io/webpack-webapp/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonasfroeller.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":"2023-12-02T11:48:57.000Z","updated_at":"2023-12-02T12:03:07.000Z","dependencies_parsed_at":"2023-12-24T12:32:02.981Z","dependency_job_id":"fa8a7c87-afaf-4f97-98d4-3987a09f2b02","html_url":"https://github.com/jonasfroeller/webpack-webapp","commit_stats":null,"previous_names":["jonasfroeller/webpack-webapp"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/jonasfroeller/webpack-webapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2Fwebpack-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2Fwebpack-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2Fwebpack-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2Fwebpack-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonasfroeller","download_url":"https://codeload.github.com/jonasfroeller/webpack-webapp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2Fwebpack-webapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31677819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["asciidoc","docker","docs","fonts","gh-pages","images","isc-license","jest-tests","postcss","scss","shoelace","tailwindcss","ts","web-components","webpack5","workflow"],"created_at":"2024-12-05T02:11:12.707Z","updated_at":"2026-04-11T10:34:45.329Z","avatar_url":"https://github.com/jonasfroeller.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-webapp\n\nWebpack frontend web app starter.  \nIncludes: Hosting(gh-pages), Testing(Jest), CICD(Husky, GitHub Actions, Docker), Docs (.adoc), asset handling(Images, Videos, Audios, Fonts...), TypeScript, Sass, TailwindCSS, Web Components(lit), Component Library(shoelace).  \nThe goal is to keep the bundle size as small as possible but still have a decent developer experience.\n\n## Workflow\n\n### Images, Videos, Audios, Fonts (`public/lib/assets`)\nYou could also put them inside of `public/static` and import them with `/\u003casset_name\u003e`, but if you do so, caching might cause you headaches.  \n(if in `public/lib/assets` the assets are given a unique hash at build time, if in `public/static` they are just copied to the root of the build folder)\n\n### Icons\nShoelace comes with a lot of icons: https://shoelace.style/components/icon.\n\n### Components (`public/lib/components`)\n\n#### Custom(Lit)\n\nReusable elements (components) should be written in TypeScript for type safety.  \nThey are then imported into the `\u003cpage_name\u003e.html` file as follows:\n\n```html\n\u003cscript type=\"module\" src=\"bundle.\u003ccomponent-name\u003e.js\" defer\u003e\u003c/script\u003e\n\u003ccomponent-name\u003e\u003c/component-name\u003e\n```\n\n#### Shoelace\n\nIf you don't want to use shoelace, you can delete the `shoelace` folder, delete the following in your `webpack.config.js` file to reduce the bundle size:\n\n```js\nmodule.exports = {\n    ...\n    plugins: [\n        ...\n        new CopyPlugin({\n            patterns: [\n                {\n                from: path.resolve(\n                    __dirname,\n                    'node_modules/@shoelace-style/shoelace/dist/assets',\n                ),\n                to: path.resolve(__dirname, 'dist/shoelace/assets'),\n                },\n            ],\n        }),\n        ...\n    ]\n    ...\n}\n```\n\n##### Importing Shoelace Components in your \u003cpage_name\u003e.js files\n\n```js\n// ShoelaceUI\nimport '@shoelace-style/shoelace/dist/themes/light.css';\nimport '@shoelace-style/shoelace/dist/themes/dark.css';\nimport '@shoelace-style/shoelace/dist/components/\u003ccomponent_name\u003e/\u003ccomponent_name\u003e.js';\nimport {setBasePath} from '@shoelace-style/shoelace/dist/utilities/base-path.js';\nsetBasePath('/dist/shoelace');\n```\n\n##### Using Shoelace Components in your \u003cpage_name\u003e.html files\n\n```html\n\u003csl-\u003ccomponent_name\u003e\u003e\u003c/sl-\u003ccomponent_name\u003e\u003e\n```\n\n### Scripts (`public/lib/script`)\nPage-specific scripts in `public/lib/script/pages`.\n\n#### How to Use Them?\n```js\nmodule.exports = {\n    // INFO: include the script in the build\n    ...\n    entry: {\n        ...\n        \u003cpage_name\u003e: './public/lib/script/pages/\u003cpage_name\u003e.js',\n        ...\n    },\n    ...\n\n    // INFO: import the `script/pages` script in its html template\n    plugins: [\n        ...\n        new HtmlWebpackPlugin({\n            filename: '\u003cpage_name\u003e.html',\n            template: 'public/routes/\u003cpage_name\u003e.html',\n            chunks: ['\u003cpage_name\u003e'], // only include the '\u003cpage_name\u003e' chunk\n        }),\n        ...\n    ]\n    ...\n}\n```\n\n### Styles (`public/lib/style`)\n[Tailwind](https://tailwindcss.com/) extensions in `main.css`.  \n**Suggestion**: Custom CSS in [SCSS](https://sass-lang.com/documentation/syntax/) syntax and [BEM](https://getbem.com/introduction/).  \nGeneral custom CSS: `style.scss`  \nComponent Specific/Custom Class: `\u003ccomponent/custom_class\u003e.scss`\n\n### Routes/Static Sites, Templates (`public/routes`)\nThis is where you put your HTML templates.  \nPure HTML only, no JS, and no CSS (except for TailwindCSS classes).\n\n### Static Elements (robots.txt, favicon.ico...) (`public/static`)\nThese are moved to the root of the `dist` folder.\n\n### Docs (`docs`)\nYou can write them in AsciiDoc format.  \nThey are automatically converted to HTML and moved to the root of the `dist/docs` folder.\n\n### NPM Packages\nDon't forget to install the dependencies with `--save-dev` or `-D` if they are only used for development.  \nProduction dependencies should be as slim as possible, because that is the goal of using webpack and not some large framework.  \n(Currently only Express as the NodeJS server and Cors for setting Cors headers for the backend is installed as a production dependency.)\n\n## CICD\n\n### GitHub Actions\nThe workflow is defined in `.github/workflows/cicd.yml`.\nIt is triggered on every push to the `main` branch.  \n\n**jobs**: \n* `test-and-build-frontend`,\n* `push-frontend-to-docker-hub` (don't forget to set ``DOCKERHUB_USERNAME`` and ``DOCKERHUB_TOKEN`` as secrets  \nin the repo settings AND change the image name in the workflow file to your own (example: \u003cusername/app_name:latest\u003e).),\n* `publish-frontend-to-github-pages`\n\n### Locally (Husky)\nA `pre-commit` hook is defined in `.husky/pre-commit` (formats code).  \nA `pre-push` hook is defined in `.husky/pre-push` (lints code).  \nYou can disable them by adding `--no-verify` to your commit/push command or by deleting  \nthe `.husky` folder or you could simply update the file to your liking.\n\n## Build Config (`webpack.config.js`)\nYou can find the build config in `webpack.config.js`.\n\n## Testing\n\n### Jest\nYou can find the Jest config in `jest.config.js`.  \nYou can write the Jest tests in `public/lib/script/__tests__`.\n\n## Commands (`package.json(.scripts)`)\n\nStart Webpack development server:\n```bash\nnpm dev\n```\nBuild/bundle for production:\n```bash\nnpm build\n```\nPreview the bundle:\n```bash\nnpm preview\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonasfroeller%2Fwebpack-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonasfroeller%2Fwebpack-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonasfroeller%2Fwebpack-webapp/lists"}