webcomponents-webpack-es6

Web Components project starter using ES6 and Webpack

Project setup includes:

• web-component
• Server Rendering
• Webpack2
• Webpack Dashboard
• Dev Middleware
• Web Components es5 shim
• Babel 6
• Boostrap
• Font Awsome
• Eslint
• Jest

TODO

• Uglify on production (doesn't work with es6 browsers)
• Fix jest tests - html templates, mock customElements

Installation

$ git clone https://github.com/sethbergman/webcomponents-webpack-es6.git app-name
$ cd app-name
$ npm install

Development

• Build once for (ready for Production):

  • $ npm run build
  • $ npm run build:serve

  The last command will boot up HTTP server on 3003 port and serve build/client directory in a default browser

• Hot reloading via webpack middlewares:

  • $ npm start
  • Point your browser to http://localhost:3000/, page hot reloads automatically when there are changes

Testing

To execute all unit tests, use:

$ npm run test

To run unit tests continuously during development (watch tests), use:

$ npm run test:watch

Expose App on Your Local Dev Machine

Assign yourself a unique publicly accessible url that will proxy all requests to your locally running webserver.

$ npm install -g localtunnel
$ npm start
$ npm run tunnel # run in a new tab 

You will receive a url, for example https://tbst.localtunnel.me, that you can share with anyone for as long as your local instance of lt remains active. Any requests will be routed to your local service at the specified port.

License

The code is available under the MIT license.