Jlevyd15/bower_install.md

## bower_install.md

      
    Raw
  

              bower_install.md
            
          
    #1. Check if node is installed


open Terminal and run the command below
node -v
if it outputs something like this v8.9.1 then continue to setp 3.

#2. Install node.js


go HERE and click the left green button to install the LTS version of node.js
repeat step #1. to make sure the install was successfull.

#3. Install Bower package manager


run this command
npm i -g bower
if you get errors about permissions run this one instead
sudo npm i -g bower

#4. To install a bower package


we'll use the example for installing a the gallery web component HERE


in Terminal navigate to your project folder (I.e. where your html and other source code is stored)
- cd path/to/your/project
next we'll install the web component into your project, run the command below
bower install --save supachailllpay/photo-gallery

#5. Use the newly installed web component


add these two lines between the <head> tags of the html file

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/photo-gallery/photo-gallery.html">

next drop the snippet below somewhere into your html file

<photo-gallery height='120'>
<div class='item' data-url='https://images.unsplash.com/photo-1500487003906-9baadc8d610d?auto=compress,format&fit=crop&w=334&h=&q=80&aspect-ratio=0.67'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1483653085484-eb63c9f02547?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1499958919714-e10d2741a387?auto=compress,format&fit=crop&w=334&h=&q=80&aspect-ratio=0.67'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1503263892381-7f7fd5e5ec15?auto=compress,format&fit=crop&w=376&h=&q=80&aspect-ratio=0.75'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1429554429301-1c7d5ae2d42e?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1501422955948-a75c84b11ecf?auto=compress,format&fit=crop&w=752&h=&q=80&aspect-ratio=1.50'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1455796653466-32048b2b780e?auto=compress,format&fit=crop&w=749&h=&q=80&aspect-ratio=1.50'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1463414689943-2aca18b2242b?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.78'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1428976365951-b70e0fa5c551?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
<div class='item' data-url='https://images.unsplash.com/photo-1500284306430-8f3cad668bb2?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
</photo-gallery>
#6. Create a local server for testing


create a new file at the root of the project folder called server.js
copy and paste the below code into your new server.js file

const http = require('http');
const fs = require('fs')
const port = 8080;

const requestHandler = (req, res) => {
  console.log(req.url)
  fs.readFile(__dirname + req.url, function (err,data) {
      if (err) {
        res.writeHead(404);
        res.end(JSON.stringify(err));
        return;
      }
      res.writeHead(200);
      res.end(data);
  });
}
const server = http.createServer(requestHandler)

server.listen(port, (err) => {
  if (err) return console.log('something bad happened', err)
  console.log(`server is listening on ${port}`)
})

once you'vre created the new file go to Terminal and run this command
node server.js
go to your browser and open up http://localhost:8080/index.html