{"id":15379285,"url":"https://github.com/andreasbm/create-web-config","last_synced_at":"2025-06-14T08:08:04.424Z","repository":{"id":94647799,"uuid":"176165392","full_name":"andreasbm/create-web-config","owner":"andreasbm","description":"A CLI to help you get started building modern web applications.","archived":false,"fork":false,"pushed_at":"2019-11-02T23:00:49.000Z","size":605,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-20T05:04:03.933Z","etag":null,"topics":["codesplitting","karma","lit-element","minifying","rollup","setup","testing","treeshaking","typescript"],"latest_commit_sha":null,"homepage":null,"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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-17T21:53:57.000Z","updated_at":"2021-09-20T13:37:07.000Z","dependencies_parsed_at":"2023-05-23T18:30:48.348Z","dependency_job_id":null,"html_url":"https://github.com/andreasbm/create-web-config","commit_stats":{"total_commits":37,"total_committers":1,"mean_commits":37.0,"dds":0.0,"last_synced_commit":"67fd150797f28b976a5fe8016bf0a5dc5c45f3d1"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fcreate-web-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fcreate-web-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fcreate-web-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fcreate-web-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/create-web-config/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fcreate-web-config/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":257264341,"owners_count":22516831,"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":["codesplitting","karma","lit-element","minifying","rollup","setup","testing","treeshaking","typescript"],"created_at":"2024-10-01T14:18:42.798Z","updated_at":"2025-06-14T08:08:04.385Z","avatar_url":"https://github.com/andreasbm.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003ecreate-web-config\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/create-web-config?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/create-web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/create-web-config\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/create-web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://david-dm.org/andreasbm/create-web-config\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/andreasbm/create-web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://github.com/andreasbm/create-web-config/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/andreasbm/create-web-config.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA CLI to help you get started building modern web applications.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/create-web-config/master/example.gif\" width=\"600\"\u003e\n\u003c/p\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)\r\n\r\n## ➤ Usage\n\nTo create a new app you run the following command.\n\n```\n$ npm init web-config new \u003cdir\u003e\n```\n\nThis command will create a project from scratch for you with sweet features as for example SCSS imports, Karma testing, live reloading, coping resources, chunking, treeshaking, Typescript, license extraction, filesize visualizer, JSON import, budgets, build progress, minifying, compression with brotli and gzip and much more.\n\nThat's it! Behind the curtains, the library [web-config](https://github.com/andreasbm/web-config) is used.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#configuration)\r\n\r\n## ➤ Configuration\n\nThe below table shows how to configure the new command.\n\n```\nUsage: new [options] \u003cdir\u003e\n\nSetup a new project from scratch.\n\nOptions:\n  --dry            Runs the command without writing any files.\n  --lit            Adds lit-element and various webapp related libraries to the setup.\n  --no-install     Doesn't install node_modules.\n  --sw             Adds a service worker to the setup.\n  --src \u003cstring\u003e   Name of the folder with the transpiled output (default: \"src\")\n  --dist \u003cstring\u003e  Name of the folder with the source code (default: \"dist\")\n  -h, --help       output usage information\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#example)\r\n\r\n## ➤ Example\n\nBelow are two examples on how to use the command. The commands will both create a project in a folder called \"my-project\". The first one will create a simple configuration while the other will configure the project to use [lit-element](https://github.com/Polymer/lit-element).\n\n```\n$ npm init web-config new my-project\n$ npm init web-config new my-project --lit\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#overview)\r\n\r\n## ➤ Overview\n\nHere's an overview of the files that are generated for you.\n\n\n| File                             | Description                                      |\n|----------------------------------|--------------------------------------------------|\n| `.browserslistrc`                | Specifies which browsers are supported by your build. |\r\n| `.gitignore`                     | Files ignored when adding files to git.          |\r\n| `karma.conf.js`                  | Configuration for the testing setup with karma.  |\r\n| `package.json`                   | Specifies dependencies and other information about your project. |\r\n| `README.md`                      | Gives an introduction to your project.           |\r\n| `rollup.config.ts`               | Rollup configuration for the build.              |\r\n| `tsconfig.json`                  | Configuration for Typescript.                    |\r\n| `.eslintrc.json`                 | Configuration for how your files should be linted. |\r\n| `.eslintignore`                  | Configuration for which files should be ignored by the linter. |\r\n| `typings.d.ts`                   | Additional typings for Typescript.               |\r\n| `src/index.html`                 | Entry HTML for your webapp.                      |\r\n| `src/main.ts`                    | Entry JS for your webapp.                        |\r\n| `src/main.scss`                  | Styles loaded and appended to the document.      |\r\n| `src/robots.txt`                 | Specifies how crawlers should handle your site.  |\r\n| `src/assets/manifest.json`       | Web manifest.                                    |\r\n| `src/pages/home-element.ts`      | Element for the home page.                       |\r\n| `src/pages/home-element.scss`    | SCSS for the home element.                       |\r\n| `src/pages/home-element.test.ts` | Tests for the home element.                      |\n\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#100100-lighthouse-score)\r\n\r\n## ➤ 100/100 Lighthouse score\n\nIf you add a service worker by running the `$ npm init web-config new my-project --sw` command you'll get to enjoy a 100/100 Lighthouse score from the beginning.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/create-web-config/master/lighthouse.png\" width=\"500\"\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#local-installation)\r\n\r\n## ➤ Local installation\n\nYou can also install the library locally and use the CLI you can run the following command.\n\n```\n$ npm i create-web-config\n```\n\nThen you would use the CLI like this.\n\n```\n$ web-config new my-project\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.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) |\n|:--------------------------------------------------:|\n| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) |\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)\r\n\r\n## ➤ License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fcreate-web-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fcreate-web-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fcreate-web-config/lists"}