{"id":13660628,"url":"https://github.com/andreasbm/web-config","last_synced_at":"2025-10-03T14:02:27.274Z","repository":{"id":33154192,"uuid":"152959020","full_name":"andreasbm/web-config","owner":"andreasbm","description":"A Rollup configuration to build modern web applications with sweet features as for example SCSS imports, Service Worker generation with Workbox, Karma testing, live reloading, coping resources, chunking, treeshaking, Typescript, license extraction, filesize visualizer, JSON import, budgets, build progress, minifying and compression with brotli and gzip.","archived":false,"fork":false,"pushed_at":"2023-12-16T18:16:17.000Z","size":2440,"stargazers_count":18,"open_issues_count":13,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T17:44:40.965Z","etag":null,"topics":["budgeting","compression","minifying","rollup","rollup-plugin","sass","scss","service-worker","treeshaking","typescript","web-application"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-10-14T09:38:32.000Z","updated_at":"2025-03-24T15:28:23.000Z","dependencies_parsed_at":"2024-01-15T20:50:35.994Z","dependency_job_id":"28c135fd-5d8a-42f0-9fa0-041d7642a797","html_url":"https://github.com/andreasbm/web-config","commit_stats":{"total_commits":365,"total_committers":1,"mean_commits":365.0,"dds":0.0,"last_synced_commit":"c68c03ca4e6c60c6fafef21cb3768ecd973431d5"},"previous_names":[],"tags_count":128,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/web-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249125313,"owners_count":21216701,"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":["budgeting","compression","minifying","rollup","rollup-plugin","sass","scss","service-worker","treeshaking","typescript","web-application"],"created_at":"2024-08-02T05:01:23.856Z","updated_at":"2025-10-03T14:02:27.194Z","avatar_url":"https://github.com/andreasbm.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003ch1 align=\"center\"\u003e@appnest/web-config\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@appnest/web-config?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@appnest/web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@appnest/web-config\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@appnest/web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://david-dm.org/andreasbm/web-config\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/andreasbm/web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://github.com/andreasbm/web-config/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/andreasbm/web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA Rollup configuration to help you build modern web applications.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003eThe configuration works extremely well with the libraries lit-html and lit-element. I wanted to share it so you can use it too or build on top of it.\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n* An extensible `create-rollup-config.js` for using Rollup with sweet features as for example SCSS imports, Service Worker generation with Workbox, live reloading, coping resources, chunking, treeshaking, Typescript, production minifying and compression with brotli and gzip.\r\n* An extensible `create-karma-config.js` to help with your Karma testing setup\r\n* A `tsconfig.json` file to configure your Typescript\r\n* A `tslint.json` file to configure your linting\r\n* A `typings.d.ts` file to configure your typings\r\n* A `.browserslistrc` file to configure how your files are transpiled\r\n* A `.gitignore` file you can use as inspiration for your own `.gitignore` file\r\n* [`rollup-plugin-compress` - A Rollup plugin that compresses the files in the bundle after building](src/lib/rollup-plugins/compress)\r\n* [`rollup-plugin-copy` - A Rollup plugin that copies resources from one location to another](src/lib/rollup-plugins/copy)\r\n* [`rollup-plugin-html-template` - A Rollup plugin that injects the bundle entry points into a HTML file](src/lib/rollup-plugins/html-template)\r\n* [`rollup-plugin-import-styles` - A Rollup plugin that makes it possible to import style files using postcss](src/lib/rollup-plugins/import-styles)\r\n* [`rollup-plugin-live-reload` - A Rollup plugin that live reload files as they changes](src/lib/rollup-plugins/live-reload)\r\n* [`rollup-plugin-minify-lit-html` - A Rollup plugin that minifies lit-html templates](src/lib/rollup-plugins/minify-lit-html)\r\n* [`rollup-plugin-replace` - A Rollup plugin that replaces an import with another import](src/lib/rollup-plugins/replace)\r\n* [`rollup-plugin-workbox` - A Rollup plugin that uses workbox to generate a service worker](src/lib/rollup-plugins/workbox)\r\n* [`rollup-plugin-budget` - A Rollup plugin that compares the sizes of the files to a specified budget](src/lib/rollup-plugins/budget)\r\n* [`rollup-plugin-clean` - A Rollup plugin that clean directories before rebuilding](src/lib/rollup-plugins/clean)\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#table-of-contents)\r\n\r\n## ➤ Table of Contents\n\n* [➤ Step 1 - Installation](#-step-1---installation)\r\n* [➤ Step 2 - Setup `rollup.config.ts`](#-step-2---setup-rollupconfigts)\r\n* [➤ Step 3 - Setup `.eslintrc.json`](#-step-3---setup-eslintrcjson)\r\n* [➤ Step 4 - Setup `tsconfig.json`](#-step-4---setup-tsconfigjson)\r\n* [➤ Step 5 - Setup `.browserslistrc`](#-step-5---setup-browserslistrc)\r\n* [➤ Step 6 - Setup `karma.conf.js`](#-step-6---setup-karmaconfjs)\r\n* [➤ Step 7 - Add start and build scripts to `package.json`](#-step-7---add-start-and-build-scripts-to-packagejson)\r\n* [➤ Step 8 - Setup `prettier.config.js`](#-step-8---setup-prettierconfigjs)\r\n* [➤ How to load stylesheets](#-how-to-load-stylesheets)\r\n\t* [Add the following to your `typings.d.ts` file!](#add-the-following-to-your-typingsdts-file)\r\n\t* [Load a global stylesheet (it will be added to the template file)](#load-a-global-stylesheet-it-will-be-added-to-the-template-file)\r\n\t* [Load a stylesheet as a string](#load-a-stylesheet-as-a-string)\r\n* [➤ Contributors](#-contributors)\r\n* [➤ License](#-license)\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-1---installation)\r\n\r\n## ➤ Step 1 - Installation\n\nThe fastest way to get started is to use the CLI. Run the following command to setup your project from scratch. If you choose to use the CLI you can skip the rest of the steps in this README file.\n\n```node\n$ npm init web-config new \u003cdir\u003e\n```\n\nTo use it in your project you can install it like this.\n\n```node\n$ npm i @appnest/web-config --D\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-2---setup-rollupconfigts)\r\n\r\n## ➤ Step 2 - Setup `rollup.config.ts`\n\nHere's an example on what your Rollup configuration file could look like:\n\n```javascript\nimport {resolve, join} from \"path\";\nimport pkg from \"./package.json\";\nimport {\n  defaultExternals,\n  defaultOutputConfig,\n  defaultPlugins,\n  defaultProdPlugins,\n  defaultServePlugins,\n  isLibrary,\n  isProd,\n  isServe\n} from \"@appnest/web-config\";\n\nconst folders = {\n  dist: resolve(__dirname, \"dist\"),\n  src: resolve(__dirname, \"src/demo\"),\n  src_assets: resolve(__dirname, \"src/demo/assets\"),\n  dist_assets: resolve(__dirname, \"dist/assets\")\n};\n\nconst files = {\n  main: join(folders.src, \"main.ts\"),\n  src_index: join(folders.src, \"index.html\"),\n  dist_index: join(folders.dist, \"index.html\")\n};\n\nexport default {\n  input: {\n    main: files.main\n  },\n  output: [\n    defaultOutputConfig({\n      dir: folders.dist,\n      format: \"esm\"\n    })\n  ],\n  plugins: [\n    ...defaultPlugins({\n      copyConfig: {\n        resources: [[folders.src_assets, folders.dist_assets]],\n      },\n      cleanerConfig: {\n        targets: [\n          folders.dist\n        ]\n      },\n      htmlTemplateConfig: {\n        template: files.src_index,\n        target: files.dist_index,\n        include: /main(-.*)?\\.js$/\n      },\n      importStylesConfig: {\n        globals: [\"main.scss\"]\n      }\n    }),\n\n    // Serve\n    ...(isServe ? [\n        ...defaultServePlugins({\n            dist: folders.dist\n        })\n    ] : []),\n\n    // Production\n    ...(isProd ? [\n        ...defaultProdPlugins({\n            dist: folders.dist\n        })\n    ] : [])\n  ],\n  treeshake: isProd,\n  context: \"window\"\n}\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-3---setup-eslintrcjson)\r\n\r\n## ➤ Step 3 - Setup `.eslintrc.json`\n\n```json\n{\n  \"extends\": \"./node_modules/@appnest/web-config/eslint.js\"\n}\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-4---setup-tsconfigjson)\r\n\r\n## ➤ Step 4 - Setup `tsconfig.json`\n\n```json\n{\n  \"extends\": \"./node_modules/@appnest/web-config/tsconfig.json\"\n}\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-5---setup-browserslistrc)\r\n\r\n## ➤ Step 5 - Setup `.browserslistrc`\n\nThe tools transpiling your code are using `browserslist` to figure out what is supported. Your `.browserslistrc` could look like this.\n\n```\nlast 2 Chrome versions\nlast 2 Safari versions\nlast 2 Firefox versions\n```\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-6---setup-karmaconfjs)\r\n\r\n## ➤ Step 6 - Setup `karma.conf.js`\n\n```javascript\nconst {defaultResolvePlugins, defaultKarmaConfig} = require(\"@appnest/web-config\");\n\nmodule.exports = (config) =\u003e {\n  config.set({\n    ...defaultKarmaConfig({\n      rollupPlugins: defaultResolvePlugins()\n    }),\n    basePath: \"src\",\n    logLevel: config.LOG_INFO\n  });\n};\n```\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-7---add-start-and-build-scripts-to-packagejson)\r\n\r\n## ➤ Step 7 - Add start and build scripts to `package.json`\n\nHere an example on what scripts you could add to your `package.json` file.\n\n```\n{\n  ...\n  scripts: {\n    \"b:dev\": \"rollup -c --environment NODE_ENV:dev\",\n    \"b:prod\": \"rollup -c --environment NODE_ENV:prod\",\n    \"s:dev\": \"rollup -c --watch --environment NODE_ENV:dev\",\n    \"s:prod\": \"rollup -c --watch --environment NODE_ENV:prod\",\n    \"s\": \"npm run s:dev\"\n    ...\n  }\n  ...\n}\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-8---setup-prettierconfigjs)\r\n\r\n## ➤ Step 8 - Setup `prettier.config.js`\n\n```js\nmodule.exports = {\n   ...require(\"../node_modules/@appnest/web-config/rettier.config.js\")\n};\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#how-to-load-stylesheets)\r\n\r\n## ➤ How to load stylesheets\n\n### Add the following to your `typings.d.ts` file!\n\nThis is to make Typescript not complaining about SCSS, CSS and JSON imports.\n\n```typescript\n/// \u003creference path=\"node_modules/@appnest/web-config/typings.d.ts\" /\u003e\n```\n\n### Load a global stylesheet (it will be added to the template file)\n\n**Step 1:** Import your stylesheet using the ES6 import syntax\n\n```javascript\nimport \"./main.scss\";\n```\n\n**Step 2:** Include the name of the stylesheet in your Rollup config\n\n```javascript\nexport default {\n  ...\n    defaultPlugins({\n       ...\n       importStylesConfig: {\n         globals: [\"main.scss\"]\n       },\n       ...\n    }),\n  ...\n}\n```\n\n### Load a stylesheet as a string\n\n```javascript\nimport css from \"./my-component.scss\";\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#contributors)\r\n\r\n## ➤ Contributors\n\t\n\n| [\u003cimg alt=\"Andreas Mehlsen\" src=\"https://avatars1.githubusercontent.com/u/6267397?s=460\u0026v=4\" width=\"100\"\u003e](https://twitter.com/andreasmehlsen) | [\u003cimg alt=\"You?\" src=\"https://joeschmoe.io/api/v1/random\" width=\"100\"\u003e](https://github.com/andreasbm/web-config/blob/master/CONTRIBUTING.md) |\n|:--------------------------------------------------:|:--------------------------------------------------:|\n| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/web-config/blob/master/CONTRIBUTING.md) |\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#license)\r\n\r\n## ➤ License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fweb-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-config/lists"}