{"id":13671271,"url":"https://github.com/MrBenJ/webpack-dev-server-qr-code-plugin","last_synced_at":"2025-04-27T14:33:15.047Z","repository":{"id":142774989,"uuid":"169476819","full_name":"MrBenJ/webpack-dev-server-qr-code-plugin","owner":"MrBenJ","description":"Prints a QR Code to your terminal if you're using webpack-dev-server once you're done compiling. No more typing in IP addresses!","archived":false,"fork":false,"pushed_at":"2020-03-12T03:23:34.000Z","size":653,"stargazers_count":11,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T13:09:27.719Z","etag":null,"topics":["qr-code","qrcode","webpack","webpack-plugin"],"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/MrBenJ.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}},"created_at":"2019-02-06T21:06:13.000Z","updated_at":"2023-02-05T15:11:32.000Z","dependencies_parsed_at":"2024-01-14T17:03:09.930Z","dependency_job_id":"11a0a662-0913-4b76-bf77-247250d668bb","html_url":"https://github.com/MrBenJ/webpack-dev-server-qr-code-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBenJ%2Fwebpack-dev-server-qr-code-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBenJ%2Fwebpack-dev-server-qr-code-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBenJ%2Fwebpack-dev-server-qr-code-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBenJ%2Fwebpack-dev-server-qr-code-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrBenJ","download_url":"https://codeload.github.com/MrBenJ/webpack-dev-server-qr-code-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154403,"owners_count":21544491,"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":["qr-code","qrcode","webpack","webpack-plugin"],"created_at":"2024-08-02T09:01:04.696Z","updated_at":"2025-04-27T14:33:14.092Z","avatar_url":"https://github.com/MrBenJ.png","language":"JavaScript","readme":"# QR Codes For Local Development\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/MrBenJ/webpack-dev-server-qr-code-plugin.svg)](https://greenkeeper.io/)\n\n![Demo](demo.gif)\n\nNeed to test your site on a device?\n\nStop typing out IP addresses and jump into the future with QR Codes!\n\n## Getting Started\n\nInstall it!\n```sh\nnpm install webpack-dev-server-qr-code\n```\n\nNote: You must be using the `devServer` options inside of your webpack config for this to work!\n\nIn your Webpack config, add this line:\n\n```js\nconst WebpackQRCodePlugin = require('webpack-dev-server-qr-code');\n\nmodule.exports = {\n  /** This option must be present in your config */\n  devServer: {\n    /** port MUST be specified */\n    port: 9000,\n\n    /** Your 'host' value must be '0.0.0.0' for this to work */\n    host: '0.0.0.0'\n  },\n  /* ... */\n  plugins: [\n    /** your plugins */\n    new WebpackQRCodePlugin()\n    /** your other plugins */\n  ]\n};\n\n```\n\nBoom! You're finished!\n\nThe plugin will print a QR code to your terminal when you first run the app, with your `local IP`.\n\nMake sure your mobile device is on the same network as your computer, and you should be set!\n\n### Additional Options\n\nYou can pass in an object to the constructor class like this:\n\n```\nmodule.exports = {\n  /** ... */\n  plugins: [\n    new WebpackQRCodePlugin({ size: 'small' })\n  ]\n}\n```\n\nThe above code will generate a smaller QR code on your terminal. Here's the allowed options\n\n| key  | Type   | Required? | Description                                                                           | Default Value |\n|------|--------|-----------|---------------------------------------------------------------------------------------|---------------|\n| size | String | No        | Changes the size of the QR code printed out. Acceptable values are 'small' or 'large' | 'large'       |\n\n\nAny other options at this time will be ignored. If you put in a value that's not `large` or `small` for size, the plugin will still run, but still output a large sized QR code.\n\n\n## Hack with me!\n\nDo you like:\n* Contributing to Open Source Software?\n* Hacking and nerding out on Javascript?\n* Alcohol?\n\nIf you like one or all of those things, start hacking with me on this project:\n\n1. Clone the repo\n2. Install dependencies with `npm install`\n3. Open up `src/index.js` and start hackin' away:\n4. If you're new to Webpack plugins (this is my first one), check out [this guide from Webpack](https://webpack.js.org/contribute/writing-a-plugin/) on how to write a webpack.\n\nThis is a pretty small and fun little plugin, so contributions are welcome from anyone and everyone, regardless of skill level, gender, race, etc. Everyone is welcome to use and hack away on this as they please :).\n\nIf you contribute, I will buy you an alcoholic beverage of your choice, so what are you waiting for? ;)\n\n### Unit tests\n\nI loves me some unit testing. Run the tests with `npm test` and bingus bongus you is done.\n\nIf you break something (no worries friend! Happens to us all :D) CircleCI _should_ catch it on your branch/fork.\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMrBenJ%2Fwebpack-dev-server-qr-code-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMrBenJ%2Fwebpack-dev-server-qr-code-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMrBenJ%2Fwebpack-dev-server-qr-code-plugin/lists"}