Skip to content

Home

Jump to bottom
Kushagra Gour edited this page Jul 26, 2016 · 2 revisions

VueFire Hackathon Starter is a basic template single page app which provides with minimalistic things to get up a descent and good looking app up and running with features like User module, authentication etc.

This project is based upon webpack-simple template for Vue.js which in turn is based on vue-loader that allows writing single file components i.e. HTML, CSS and JavaScript of one component all in a single file. So every *.vue file you find in the project is an independent Vue.js component.

Index

Project Ideology

This starter kit is based on a very common product scenario as follows:

  • Any visitor can login in the app using Twitter/Facebook accounts, hence called as user.
  • Every user can then create items. An item can be anything such as invoice, notes etc - as long it is storable in firebase. For demo purposes, the starter kit allows user to create notes. Every item has a title and notes field. These items get stored under items key in Firebase and are linked to the created user under the users key by uid.
  • The concept of item is very basic. It can be shrinked or expanded to any level as per requirements of the product.
  • Every user can visit his profile page where he can see his created items. Profile pages can be viewed by anyone, even if not logged in.

Project Structure

  • index.html - Only HTML file served. Starting point.
  • assets - Images and vendor stylesheets.
  • src - Contains all the source code. All the common shared services, components etc are directly present inside src. Whereas route specific components are present in their corresponding folders.
  • main.js - Contains bootstrapping and routing configuration and hooks.
  • build-gh-pages - Builds the project on gh-pages branches if github is used for deployment.

File/Module Descriptions

App.vue

This is the main component that renders in index.html first of all. It contains the common header, footer and the routing placeholder element where every route inserts its corresponding component. Most of the common styles can be found here.

home/Home.vue

This is the component for the home page. Not much to tell here.

user/User.vue

Component for the User route, this is the template for user profile page. It can be reached by clicking the avatar in the header after logging in the app. The profile page shows the items created by the user.

item/Item.vue

This is the component for seeing an Item in read mode.

edit/Edit.vue

This is the component for editing an Item.

ItemTile.vue

A shared component to show any item as a small tile in the app. Used in user profile page.

Notification.vue, NotificationStore.js, Notifications.vue

These make up the notification system in the app. NotificationStore.js is a singleton service that keeps track of the notifications.

Modal.vue

Generic modal component used throughout the app for login, help etc.

Auth.js

Service to handle authentication. Use to login, logout or get user details.

ItemService.js

Basic service to fetch any item from Firebase.

Firebase backend

A new Firebase project has to be created before using this starter kit for actual purposes. Otherwise it keeps using the demo backend. There are primarily 2 things to ensure in your Firebase project:

  • Authentication: Do switch on the Twitter and Facebook authentication for your project. This will require to create app on Twitter and Facebook for your product and then add the app credentials into Firebase console. Read more here.

  • Security rules: Before going public, make sure you have right security rules to provide right access levels on the database. Example rules:

{
  "rules": {
    ".read": true, // Anybody can read anything

    "items": {
      "$itemId": {
        ".write": "auth != null && !data.exists() || auth.uid == data.child('createdBy').val()"
      }
    },

    "users": {
      "$userId": {
        ".write": "auth != null && auth.uid == $userId"
      }
    }
  }
}

Deployment

Webpack is used to build this project. To build the project, run npm run build. This does 3 things:

  1. Generates dist/build.js which is all the JavaScript along with the templates.
  2. Generates dist/style.css which is all the custom CSS in the components. This is done by the ExtractTextPlugin
  3. Hooks up the generates JS and CSS file in index.html. Webpack is also configured to cache bust both these resources using a hash as query param on every build. Caveat: Right now both build.js and style.css are cache busted with the a single hash. Therefore, even if just file changes, both will be fetched over network for the users.

Important: Webpack does the above mentioned modifications of index.html in the file itself, without making a copy. Therefore its recommended to run your production build on a separate branch so that your original index.html remains untouched.

Clone this wiki locally