DaxChen / Vue Firebase Starter
Programming Languages
Projects that are alternatives of or similar to Vue Firebase Starter
vue-firebase-starter
Progressive Web App (PWA) starter-kit using vue/vuex/vue(x)-router/offline-plugin, with sass, prerendering, muse-ui, and firebase/firebaseui!
Features
Everything in vue-cli:webpack
(hot reloading/vue file/webpack2/eslint/postcss+sass+stylus+less/...), plus:
- vue / vuex / vue-router / vuex-router-sync
- firebase
- vuexfire
- firebaseui
- muse-ui
- Offline Ready, Progressive Web App (PWA)
- prerendering for better SEO
Online Demo
Build Commands
# install dependencies
yarn # or `npm install`
# serve with hot reload at localhost:8080
yarn dev # or `npm run dev`
# build for production with minification and prerendering
yarn build # or `npm run build`
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
yarn run unit # or `npm run unit`
# run e2e tests
yarn run e2e # or `npm run e2e`
# run all tests
yarn test # or `npm test`
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Folder Structure
The folder structure is basically the same as vue-cli
's webpack
template.
Check the folder structure of the docs here.
βββ build # webpack config files
βββ config # project config (mainly used by webpack)
βββ dist # production bundled files when `npm run build`
βββ node_modules # npm dependencies
βββ src # the main src folder, see below for detail
βββ static # pure static assets (directly copied)
βββ test # unit tests and e2e tests
βββ index.html # the index.html template, used by html-webpack-plugin
βββ package.json # package info, build scripts and npm dependencies
src
βββ assets # module assets (processed by webpack)
βββ components # ui components
βββ router # vue-router routes
βββ sass # sass styles, _variables and _mixins
βββ store # vuex setting, store and modules
βββ views # also called `containers`, see below
βββ App.vue # main app component
βββ initFirebase.js # firebase settings, put your apiKeys here
βββ main.js # the entry point
βββ muse-ui-theme.less # muse-ui theme settings
βββ pwa.js # progressive web app (offline-plugin) runtime
To understand the difference between components
and views
(or containers
), check out this article by redux author Dan Abramov (@gaearon).
You can rename the views
to containers
if you prefer : )
Development
Muse-UI Theme
Muse-UI currently only support theme settings using less.
Check out the docs and change variables in this file src/muse-ui-theme.less
.
You can use the color palette from material design colors, watch the video to learn how to choose them.
Webpack Settings
Globals Variables
__DEV__
There is a __DEV__
variable that is defined by webpack, and will be replaced during compile time.
Therefore, you can use this in your code to separate debug code and production code.
For example, this
if (__DEV__) {
window.firebase = firebase
}
will make window.firebase available during development for easier debugging, but will be trimmed out when building for produciton.
Aliases
@
= src
When importing, the @
sign is aliased to src
directory, so no need to use ../../../
in nested directories anymore, just use @/store
, @/components
, etc.
Static folder path
Different from the default settings of vue-cli webpack template, I changed the assetsSubDirectory
from 'static'
to ''
.
This means that everything you put in the static/*
folder will be copied to the root of dist/*
, instead of dist/static/*
.
I did this because Netlify's _redirects
needs to be in the root of the published directory dist/
, see the following Deploy/Netlify
section for more info.
Progressive Web App (PWA)
The offline-plugin is only used in production build.
Thanks to the awesome offline-plugin, vue-firebase-starter is offline ready! It uses ServiceWorker and fallbacks to AppCache to cache webpack output assets (or other assets if specified).
To understand the life-cycle of ServiceWorker and how it is updated, check out this awesome video.
For more information, check out offline-plugin's docs.
Prerendering
vue-firebase-starter uses prerender-spa-plugin to prerender html when building for production.
Because prerender will generate rendered DOM into html, and vue needs to be able to take control after, make sure the root component has the same id as the element it's replacing.
Deployment
favicon
I recommend http://realfavicongenerator.net/, the best favicon generator I've used!
Just follow the instruction and put the extracted files in the static/
folder, and override the <head></head>
section in index.html
.
Netlify
I highly recommend you try out Netlify if you haven't!
Just signup, choose your GitHub/GitLab/BitBucket
account and repo, put in two settings:
- build command:
yarn build
- Publish directory:
dist
And you're all set! Every time you push to the chosen branch, you're site rebuilds and deploys automatically!
_redirects
To use Netlify with vue-router (or any other SPA), we need to setup a _redirects
file in the root of the published directory (NOT the root of project).
This is already done for you, check out statics/_redirects
.