Giter Club home page Giter Club logo

webpack-dev-server-qr-code-plugin's Introduction

QR Codes For Local Development

Greenkeeper badge

Demo

Need to test your site on a device?

Stop typing out IP addresses and jump into the future with QR Codes!

Getting Started

Install it!

npm install webpack-dev-server-qr-code

Note: You must be using the devServer options inside of your webpack config for this to work!

In your Webpack config, add this line:

const WebpackQRCodePlugin = require('webpack-dev-server-qr-code');

module.exports = {
  /** This option must be present in your config */
  devServer: {
    /** port MUST be specified */
    port: 9000,

    /** Your 'host' value must be '0.0.0.0' for this to work */
    host: '0.0.0.0'
  },
  /* ... */
  plugins: [
    /** your plugins */
    new WebpackQRCodePlugin()
    /** your other plugins */
  ]
};

Boom! You're finished!

The plugin will print a QR code to your terminal when you first run the app, with your local IP.

Make sure your mobile device is on the same network as your computer, and you should be set!

Additional Options

You can pass in an object to the constructor class like this:

module.exports = {
  /** ... */
  plugins: [
    new WebpackQRCodePlugin({ size: 'small' })
  ]
}

The above code will generate a smaller QR code on your terminal. Here's the allowed options

key Type Required? Description Default Value
size String No Changes the size of the QR code printed out. Acceptable values are 'small' or 'large' 'large'

Any 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.

Hack with me!

Do you like:

  • Contributing to Open Source Software?
  • Hacking and nerding out on Javascript?
  • Alcohol?

If you like one or all of those things, start hacking with me on this project:

  1. Clone the repo
  2. Install dependencies with npm install
  3. Open up src/index.js and start hackin' away:
  4. If you're new to Webpack plugins (this is my first one), check out this guide from Webpack on how to write a webpack.

This 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 :).

If you contribute, I will buy you an alcoholic beverage of your choice, so what are you waiting for? ;)

Unit tests

I loves me some unit testing. Run the tests with npm test and bingus bongus you is done.

If you break something (no worries friend! Happens to us all :D) CircleCI should catch it on your branch/fork.

webpack-dev-server-qr-code-plugin's People

Contributors

mrbenj avatar greenkeeper[bot] avatar

Stargazers

Дмитрий avatar shinn lancelot avatar Eugene Dzhumak avatar Tim Phillips avatar 忽如寄 avatar Tim Bendt avatar David Guttman avatar Brendan Sheehan avatar Lynn Romich avatar esque.studio avatar Jeff Wainwright avatar

Watchers

James Cloos avatar  avatar

webpack-dev-server-qr-code-plugin's Issues

Plugin does not take into account HTTPS servers types

I have the following setup in my webpack config file :

server: {
    type: 'https',
    options: {
        key: readFileSync(getHttpsServerOptionFilePath('localhost-certificate-key.pem')),
        cert: readFileSync(getHttpsServerOptionFilePath('localhost-certificate.pem'))
    }
},

As you can see, I am serving the local IPv4 LAN address with https, using a locally self signed cert (with mkcert).

But your plugin has hardcoded the http:// protocol for the address... See this line

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.