{"id":14984159,"url":"https://github.com/dmnsgn/frontend-boilerplate","last_synced_at":"2025-04-09T20:09:26.562Z","repository":{"id":18382850,"uuid":"21563703","full_name":"dmnsgn/frontend-boilerplate","owner":"dmnsgn","description":"An ES20XX starter with common frontend tasks using Webpack 5 as module bundler and npm scripts as task runner.","archived":false,"fork":false,"pushed_at":"2023-04-15T21:04:59.000Z","size":5064,"stargazers_count":225,"open_issues_count":9,"forks_count":36,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-09T20:09:21.712Z","etag":null,"topics":["babel","boilerplate","eslint","frontend","glsl","javascript","prettier","starter","template","typescript","webpack","webpack5","webpack5-boilerplate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmnsgn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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},"funding":{"custom":["https://paypal.me/dmnsgn","https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3"]}},"created_at":"2014-07-07T08:50:56.000Z","updated_at":"2025-03-05T20:40:27.000Z","dependencies_parsed_at":"2024-12-03T03:04:24.915Z","dependency_job_id":null,"html_url":"https://github.com/dmnsgn/frontend-boilerplate","commit_stats":{"total_commits":245,"total_committers":7,"mean_commits":35.0,"dds":"0.25306122448979596","last_synced_commit":"b662f0ecf71acf38fb2ff0e704c8d81a2548c1a2"},"previous_names":["dmnsgn/gulp-frontend-boilerplate"],"tags_count":60,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Ffrontend-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Ffrontend-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Ffrontend-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Ffrontend-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmnsgn","download_url":"https://codeload.github.com/dmnsgn/frontend-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103871,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["babel","boilerplate","eslint","frontend","glsl","javascript","prettier","starter","template","typescript","webpack","webpack5","webpack5-boilerplate"],"created_at":"2024-09-24T14:08:34.215Z","updated_at":"2025-04-09T20:09:26.522Z","avatar_url":"https://github.com/dmnsgn.png","language":"JavaScript","funding_links":["https://paypal.me/dmnsgn","https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3"],"categories":[],"sub_categories":[],"readme":"# frontend-boilerplate\n\n[![dependencies](https://img.shields.io/librariesio/release/npm/frontend-boilerplate)](https://github.com/dmnsgn/frontend-boilerplate/blob/main/package.json)\n[![repo size](https://img.shields.io/github/repo-size/dmnsgn/frontend-boilerplate)](https://github.com/dmnsgn/frontend-boilerplate)\n[![version](https://img.shields.io/github/package-json/v/dmnsgn/frontend-boilerplate/master)](https://github.com/dmnsgn/frontend-boilerplate/blob/master/package.json)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)\n[![styled with prettier](https://img.shields.io/badge/styled_with-Prettier-f8bc45.svg?logo=prettier)](https://github.com/prettier/prettier)\n[![linted with eslint](https://img.shields.io/badge/linted_with-ES_Lint-4B32C3.svg?logo=eslint)](https://github.com/eslint/eslint)\n[![license](https://img.shields.io/github/license/dmnsgn/frontend-boilerplate)](https://github.com/dmnsgn/frontend-boilerplate/blob/main/LICENSE.md)\n\n\u003e An ES20XX starter with common frontend tasks using [Webpack 5](https://webpack.js.org/) as module bundler and npm scripts as task runner.\n\n[![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)\n[![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)\n[![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)](https://twitter.com/dmnsgn)\n\nIf you serve your files over HTTPS with HTTP/2, use compression (gzip, brotli...) for text-based resources, and respect [accessibility rules](https://developers.google.com/web/fundamentals/accessibility/), your [lighthouse](https://developers.google.com/web/tools/lighthouse/) score will be 100%.\n\n## Setup\n\n### Requirements\n\nNode `\"\u003e=15.0.0\"` (use brew or install it from [here](http://nodejs.org/download/))\n\n```bash\nbrew install node\n```\n\n### Clone the repository\n\n_OSX \u0026 Linux_:\n\n```bash\ngit clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git \u0026\u0026 cd frontend-boilerplate \u0026\u0026 rm -rf .git \u0026\u0026 git init\n```\n\n_Windows_:\n\n```bash\ngit clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git \u0026\u0026 cd frontend-boilerplate \u0026\u0026 rd /s /q .git \u0026\u0026 git init\n```\n\n### Dependencies\n\n```bash\nnpm install\n```\n\n### Configuration\n\nOpen `config/config.js`:\n\n| Key          | Description                                                                                                                | Type  |\n| :----------- | :------------------------------------------------------------------------------------------------------------------------- | :---: |\n| **PATHS**    | map of paths to the different folders needed by `webpack` and `npm scripts`                                                |  Map  |\n| **BROWSERS** | the browsers targeted for `babel-preset-env` and `browserslist` (see full list [here](https://github.com/ai/browserslist)) | Array |\n\nOpen `package.json`:\n\n| Key                    | Description                                                                                                                                     |  Type  |\n| :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----: |\n| **config.title**       | title used for metas and favicons                                                                                                               | String |\n| **config.url**         | absolute url used for metas, robotstxt, sitemap and banner                                                                                      | String |\n| **config.lang**        | language for index.html and favicons                                                                                                            | String |\n| **config.description** | title used for metas, favicons and banner                                                                                                       | String |\n| **config.imageWidth**  | width of the share image (default `${PACKAGE.config.url}/share.jpg`)                                                                            | String |\n| **config.imageHeight** | height of the share image (default `${PACKAGE.config.url}/share.jpg`)                                                                           | String |\n| **config.type**        | [Open Graph type](https://ogp.me/#types)                                                                                                        | String |\n| **config.card**        | [Twitter card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started)                                         | String |\n| **config.copyright**   | license acronym used for banner                                                                                                                 | String |\n| **config.handle**      | twitter handle for metas                                                                                                                        | String |\n| **config.analyticsUA** | google analytics UA                                                                                                                             | String |\n| **config.pages**       | list of pages with id and optional name, description, EJS template for [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) | Array  |\n| **author.name**        | author name used for favicons                                                                                                                   | String |\n| **author.url**         | author url used for favicons                                                                                                                    | String |\n\n## Develop\n\n```bash\nnpm run dev\n// or npm start\n```\n\n## Production\n\n```bash\nnpm run prod\n// or npm run build\n```\n\n## Features\n\n### Webpack [loaders](https://webpack.js.org/loaders/)\n\n- [Babel](https://babeljs.io/) with [preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env) and [TypeScript](https://github.com/babel/babel/tree/master/packages/babel-preset-typescript)\n- [PostCSS](https://github.com/postcss/postcss): see [config/loaders/styles.js](./config/loaders/styles.js)\n- [Sass](http://sass-lang.com/)\n- [Less](http://lesscss.org/)\n- [Stylus](http://stylus-lang.com/)\n- fonts as [Resources assets](https://webpack.js.org/guides/asset-modules/#resource-assets)\n- images as [Resources assets](https://webpack.js.org/guides/asset-modules/#resource-assets), with automatic avif and webp fallbacks with [convert-assets-webpack-plugin](https://github.com/dmnsgn/convert-assets-webpack-plugin/) and `\u003cpicture\u003e` wrapping using [posthtml](https://posthtml.org/), optimised with [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader)\n- videos as [Resources assets](https://webpack.js.org/guides/asset-modules/#resource-assets)\n- svg as [Resources assets](https://webpack.js.org/guides/asset-modules/#resource-assets) and optimised with [svgo-loader](https://github.com/rpominov/svgo-loader) or as sprite with [svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader)\n- [html-loader](https://github.com/webpack-contrib/html-loader)\n- [ejs-loader](https://github.com/okonet/ejs-loader)\n- [glslify](https://github.com/stackgl/glslify)\n- [markdown-it-loader](https://github.com/unindented/markdown-it-loader) with [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs) and [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right)\n\n### Webpack [plugins](https://webpack.js.org/plugins/)\n\n- [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): create global constants which can be configured at compile time\n- [HotModuleReplacementPlugin](https://webpack.js.org/plugins/hot-module-replacement-plugin/): enable Hot Module Replacement\n- [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) with [Lodash](https://lodash.com/docs/4.17.5#template) templates: simplify creation of HTML files\n- [HtmlWebpackProcessingPlugin](https://github.com/haoliangyu/html-webpack-processing-plugin#readme): HTML pre-processing and post-processing for html-webpack-plugin.\n- [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/): lightweight CSS extraction plugin\n- [CssMinimizerWebpackPlugin](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/): uses cssnano to optimize and minify your CSS.\n- [PurgecssWebpackPlugin](https://github.com/FullHuman/purgecss/tree/master/packages/purgecss-webpack-plugin): remove unused css.\n- [CrittersWebpackPlugin](https://github.com/GoogleChromeLabs/critters): inlines critical CSS and lazy-loads the rest.\n- [SpritesmithPlugin](https://github.com/mixtur/webpack-spritesmith): convert a set of images into a spritesheet and SASS/LESS/Stylus mixins\n- [CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin): Prepare compressed versions of assets to serve them with Content-Encoding (default to gzip). Requires server configuration so it is commented [here](./config/plugins.js)\n- [GenerateSW](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin): The GenerateSW plugin will create a service worker file for you and add it to the webpack asset pipeline.\n- [BannerPlugin](https://webpack.js.org/plugins/banner-plugin/): add a banner to the top of each generated chunk.\n- [ObsoleteWebpackPlugin](https://github.com/ElemeFE/obsolete-webpack-plugin): A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on Browserslist and prompts website users to upgrade it.\n- [WebpackBundleAnalyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer): Visualize size of webpack output files with an interactive zoomable treemap.\n\n### npm scripts\n\n- `npm run clean`: remove all the files from the `dist` directory\n- `npm run favicons`: generate [favicons](https://github.com/evilebottnawi/favicons) files and `/src/templates/_favicons.ejs`\n- `npm run robotstxt`: generate [robots.txt](https://github.com/itgalaxy/generate-robotstxt) file\n- `npm run sitemap`: generate [sitemap.xml](https://github.com/ekalinin/sitemap.js) file\n\n### Prettier [formatter](https://github.com/prettier/prettier)\n\n- [Prettier](https://github.com/prettier/prettier)\n- [ESLint Prettier Plugin](https://github.com/prettier/eslint-plugin-prettier)\n- [ESLint Prettier Config](https://github.com/prettier/eslint-config-prettier)\n\n## Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmnsgn%2Ffrontend-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmnsgn%2Ffrontend-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmnsgn%2Ffrontend-boilerplate/lists"}