My Book Club Project or Starting With Vue.js

Motivation

I'm living in small settlement where everybody knows everybody and we have no library for children yet... Since i'm inspired by the this article, i decided to create Book Club project and also to play with vue.js

Book club project

It should be only book list where each family will be able to publish some books of they own which they allow to lend. Every book has it synopsis, rating, reader recommended age (because most of reader are children), picture, author and owner. Every resident of our settlement can land any book for 30 days period

Site Planning

Home Page will display first 15 most popular books and search & filter input, each book in the list will display picture, synopsis and rating, and also owner and current holder

Lets Start With Vue.js

My first Challenge is to display the home page book gallery. Data may come meanwhile from static javascript:
In vue we must place model into "data" property of object:

new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: [
      { title: 'Tom Soyer' ,author:'Mark Twein', img:'//upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Tom_Sawyer_1876_frontispiece.jpg/200px-Tom_Sawyer_1876_frontispiece.jpg'},
      { title: 'Midnight Folk',author: 'John Masefield', img:'//upload.wikimedia.org/wikipedia/en/3/35/MidnightFolk.jpg'},
      { title: 'Emil From Leneberg' ,author:'Asterid Lindgren', img:'//upload.wikimedia.org/wikipedia/en/thumb/1/1c/Emil_i_L%C3%B6nneberga.jpg/190px-Emil_i_L%C3%B6nneberga.jpg'}
    ]
  }
})

Repeater

Vue has its own repeater syntax v-for:

 <div class="row">
    <div class="col-xs-4 text-center"  v-for="book in books">
      <a href="#" class="thumbnail">
        <img v-bind:src="book.img" width="200" height="276" >
        <span>{{ book.title }}</span>
      </a>
    </div>
  </div>  

Notice that for bind image source you may use v-bind syntax.
Here is running jsfiddle

Dockerize Your Angular CLI Project

Why docker?

Microservices

Microservices it is architecture pattern where project divided to self containing parts which can be run or test independently (as service). Docker makes you able to package parts of your projects and run them together.
Lets name some basic terminus of docker:

Image

Environment of some sort of machine (e.g. Ubuntu) with some tools preinstalled (e.g. node)

Container

One or more images composition that can be run with some parameters.
Containers can be easy moved to different environments like develop, qa or production(thats grate advantage of docker).

Example

Lets create simple container with which all members of your team will be able to start develop angular4 app with one singe command:

Lets create an image

To create an image you must add Dockerfile

# Create image based on the official Node 7.6.0 image from dockerhub
FROM node:7.6.0

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

since you don't want to copy node_modules you also need to add .dockerignore

node_modules/

After the files added to project only thing left is to run "build" command

docker build -t angular-client:dev .

after image created you can run it with following params:

docker build -t angular-client:dev .

Thats all - angular-client image created

Run the container

to get container running you can use following command:

docker run -it --volume=/Users/your-user/your-directory/your-project:/localDebugRepo -p 4200:4200  --workdir="/localDebugRepo" --memory=4g --memory-swap=4g --entrypoint=/bin/b
ash angular-client:dev

This command makes you able to log into your container machine now you can run app with following command:

npm start

Now you can view the app running on localhost:4200