:bento: Full-Stack solution to quickly build PWA applications with Vue.js and Firebase

Overview

Npm version CircleCI Documentation Maintenance Dependencies DevDependencies License: MIT

Welcome to bento-starter ๐Ÿ‘‹

Bento-starter


๐Ÿฑ bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications using tools like Vue.js, Firebase, Progressive Web Apps support, dynamic offline support... The goal of this project is to provide a powerful and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly.

As this project is a template project and not a CLI, you have access to the entire app configuration so you can change it according to your needs.

๐Ÿ“– Documentation

Want to setup this stack ?

๐Ÿ‘‰ The full documentation is available here

Demo

๐Ÿ‘‰ https://bento-starter.firebaseapp.com

Install the PWA demo from Google Play Store ๐Ÿ‘‰ bento-starter Google Play Store


demo


Lighthouse score :

Lighthouse score

Optional preconfigured Github Actions workflow :

  • โœ”๏ธ Check tests and quality
  • โš™๏ธ Build the project
  • ๐Ÿš€ Deploy to firebase hosting

The stack is made up of :

  • ๐Ÿค˜ Vue.js : front-end framework
  • ๐Ÿ”ง Vue-cli : standard tooling for vue.js development
  • ๐Ÿ” Vuex : state management
  • ๐Ÿ’พ Firestore : cloud NoSQL Database
  • ๐Ÿ  Firebase hosting : fast and secure web hosting
  • ๐Ÿ‘ค Firebase authentication : for easy authentication
  • ๐Ÿ“ฑ PWA : progressive web app support
  • ๐Ÿ’„ Prettier : code formatting rules
  • ๐Ÿšจ Eslint : control code quality
  • โœ… Jest : unit testing
  • โœ… Cypress : e2e testing
  • ๐Ÿ” Vue head : meta description per page
  • ๐Ÿ“„ [Optional]prerender spa plugin : pages prerendering
  • ๐Ÿ’š [Optional]circleci : continuous integration/deployment
  • ๐Ÿ“ฆ [Optional]bundlesize : control your js bundles sizes

App embedded features :

  • ๐Ÿ‘ค Google authentication
  • ๐Ÿ“ด Offline support (dynamic & static caching)
  • ๐Ÿ†• New version available prompt on new app deployments
  • โž• Add to home screen prompt for ios & android
  • โ†ฉ๏ธ Smart redirection for auth protected routes
  • โœจ Products page example to demonstrate app data management with firestore and vuex
  • ๐Ÿ’ช Better PWA support for all browsers with PWACompat

โœจ Contributors

Thomas Betous
Thomas Betous

๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ฌ ๐Ÿค” ๐Ÿ‘€ ๐Ÿšง
Franck Abgrall
Franck Abgrall

๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ฌ ๐Ÿค” ๐Ÿ‘€ ๐Ÿšง
Thibaud Courtoison
Thibaud Courtoison

๐Ÿ“–
Mathias Bernardeau
Mathias Bernardeau

๐Ÿ’ป ๐Ÿค”
James Perkins
James Perkins

๐Ÿ’ป ๐Ÿ› ๐Ÿ’ฌ
Antoine CELLIER
Antoine CELLIER

๐Ÿ’ป
0xflotus
0xflotus

๐Ÿ“–
Gr3gory B3van
Gr3gory B3van

๐Ÿค”
Roy Bakker
Roy Bakker

๐Ÿ›
Adam Bar
Adam Bar

๐Ÿค”
Chidindu Ogbonna
Chidindu Ogbonna

๐Ÿ’ป
Vincent Bourdeau
Vincent Bourdeau

๐Ÿ’ป

Show your support

โญ๏ธ this repo

๐Ÿ’ฌ Chat

Want to chat with us ? ๐Ÿ‘‰ join bento-starter slack

License

This project is MIT licensed.

Comments
  • npm run setup errors on macOS and latest stable npm and node

    npm run setup errors on macOS and latest stable npm and node

    I am on macOS and these are my npm and node versions:

    npm --v
    6.9.0
    node -v
    v12.3.1
    

    This is the log I get if running npm run setup as mentioned in documentation.

    I also tried using node v10.16.0I and npm 6.9.0. Also tried using Yarn but I still run into warnings/errors. Which should be the latest version?

    Can you point me to the right direction? Since the documentation requirement says node9.3.0 + and [email protected] + I thought that using newest stable versions would be fine, correct me if I am wrong.

    opened by MaeseppTarvo 8
  • Add email / password firebase authentication

    Add email / password firebase authentication

    Is your feature request related to a problem? Please describe. Currently Google authentication is provided as an app embedded feature, which is great! However this is not always the go-to authentication method for most apps.

    Describe the solution you'd like It would be great to additionally have the option to register + login using the email and password firebase method. As an extra, additional parameters could be passed (for example "displayName", "logoURL" or accountType).

    :beginner: good first issue :question: question 
    opened by zemiguelll 8
  • Using Unix comands in setup script causes Windows run setup to fail

    Using Unix comands in setup script causes Windows run setup to fail

    Describe the bug When creating a fresh bento starter, on a windows machine. When you check out and run the npm run setup in Vscode it causes the job to fail due to UNIX commands. To Reproduce Steps to reproduce the behavior:

    1. Check out clean copy
    2. Run npm run setup from vscode or command line
    3. Select Y when asked about new repo
    4. Error; Error: Command failed rm -Rf .git

    Expected behavior A user shouldn't be expected to use git bash or similar UNIX wrapper on a windows machine to get started. You should stop using rimraf and do an OS check. If UNIX use 'rm -rf' as its more efficient than rimraf and then use the rd /s /q "path" for windows.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: Windows 10 Enterprise / VSCODE June release
    • Browser N/A
    • Version N/A

    Additional context This works fine from git bash, or similar wrapper. Fails on vscode using windows command prompt.

    See below for error:

    2019-06-13 08_30_04-Window

    :bug: bug :beginner: good first issue 
    opened by perkinsjr 6
  • Adding Register and Login with Email.

    Adding Register and Login with Email.

    The following is to resolve issue #179

    A quick explanation of the changes:

    Added a new vue view called Register which handles the creation of a new user.

    JS handles the auth and then after an update of the Photo and Display name is added, if its null it will do nothing but it shows us how to add a new photo / display name.

    On the login page, two inputs were added for email and password and a new button that handles auth via email and password.

    This should be a good start, let me know what you think and what we could do / need to do.

    opened by perkinsjr 6
  • updated ESLint-plugin-import peer dependency breaking

    updated ESLint-plugin-import peer dependency breaking

    Describe the bug The recent release of 2.19.0 and 2.19.1 of eslint-plugin-import introduce some errors. Specifically installing 2.18.2 (and not running install as ^2.18.2) resolves this for now at least.

    To Reproduce When adding the following peer dependency: [email protected] requires a peer of eslint-plugin-import@^2.18.2

    npm i eslint-plugin-import@^2.18.2 will install 2.19.1 and result in the following errors (27 times for some version of):

    error: Missing file extension for "@/router"
    
    import router from โ€˜@/routerโ€™
    
    

    Downgrading to 2.19.0 results in the following error:

    ERROR  TypeError: Cannot read property 'value' of null
    Occurred while linting /Users/md/www/bento-debug/src/misc/helpers.js:7
    

    And 2.18.2 (the version before 2.19.0) seems to be the latest that runs without error, so be sure to install the dependency specific to that version unless this is resolved using:

    npm i [email protected]

    Additional context This is more a heads up for anyone recklessly installing peer dependencies (as I was) and then inheriting this mess of new errors. From what I have read, however, there may be some configuration options to help thwart this; perhaps along the lines of eslint-import-resolver-webpack eslint-import-resolver-webpack on npm site But I really don't know. Putting that link above as a resource for those that would know, not as a suggested solution.

    opened by hwlmatt 5
  • npm i Step..

    npm i Step..

    I got this ..

    zuhair@DESKTOP-K9ATPC4 MINGW64 ~/Desktop/Bento/bento-starter (master) $ npm i npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@0. I'll try to do my best with it!

    [email protected] install C:\Users\zuhair\Desktop\Bento\bento-starter\node_modules\iltorb detect-libc prebuild-install || node-gyp rebuild

    prebuild-install WARN install No prebuilt binaries found (target=10.15.3 runtime=node arch=x64 platform=win32)

    C:\Users\zuhair\Desktop\Bento\bento-starter\node_modules\iltorb>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild ) gyp ERR! configure error gyp ERR! stack Error: Command failed: C:\Program Files\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack File "", line 1 gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack ^ gyp ERR! stack SyntaxError: invalid syntax gyp ERR! stack gyp ERR! stack at ChildProcess.exithandler (child_process.js:294:12) gyp ERR! stack at ChildProcess.emit (events.js:189:13) gyp ERR! stack at maybeClose (internal/child_process.js:970:16) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5) gyp ERR! System Windows_NT 10.0.17763 gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild" gyp ERR! cwd C:\Users\zuhair\Desktop\Bento\bento-starter\node_modules\iltorb gyp ERR! node -v v10.15.3 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^6.1.1 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of eslint-plugin-react@^7.11.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] install: detect-libc prebuild-install || node-gyp rebuild npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\zuhair\AppData\Roaming\npm-cache_logs\2019-04-24T21_41_32_370Z-debug.log

    opened by ZuhairAbdulJabbar 5
  • Type inconsistency when creating new products or loading products from Database

    Type inconsistency when creating new products or loading products from Database

    Describe the bug The Timestamp to Dateconversion for objects behaves differently for newly created products and existing products that are converted viaconvertObjectTimestampPropertiesToDateingeneric-db.js`.

    The crucial parts in generic-db.js are: create method sets createTimestamp and updateTimestamp directly to a Date:

    ...
    return {
          id: docId,
          ...data,
          createTimestamp: new Date(), <<<<<< Type is Date
          updateTimestamp: new Date() <<<<<< Type is Date
        }
    

    ...whereas read and readAll methods use convertObjectTimestampPropertiesToDate to convert the timestamps from Firestore to Dates. But the issue is that in convertObjectTimestampPropertiesToDate, existing properties are not replaced but a new newObj object is added with the converted values.

    return {
          ...obj,
          newObj
        }
    

    So in the end, a loaded product from the database looks like this:

    product: {
      ...,
      createTimestamp <<< Timestamp
      updateTimestamp <<< Timestamp
      newObj: {
        createTimestamp <<< Date
        updateTimestamp <<< Date
      }
    }
    

    To Reproduce Steps to reproduce the behavior:

    1. Load Products page
    2. Set breakpoint in the browser to investigate objects

    Expected behavior Objects have the same properties with the same types when being loaded from the DB or returned from the create method.

    opened by sceee 4
  • Windows Setup Problems

    Windows Setup Problems

    Describe the bug Running npm run setup error with a bunch of the errors below

    npm WARN tar ENOENT: no such file or directory, open 'C:\Users\hcmlo\Documents\Work\projects\textloop\node_modules\.staging\@types\lodash-b2c07a52\ts3.1\fp\zipWith.d.ts'
    

    Here are the 2 logs output.

    2019-12-02T15_21_44_116Z-debug.log 2019-12-02T15_21_04_245Z-debug.log

    running npm install and then npm run setup will complete the install. At this point npx will no longer work and error out when npx firebase login

    internal/modules/cjs/loader.js:305
          throw err;
          ^
    
    Error: Cannot find module 'C:\Users\hcmlo\AppData\Roaming\npm\node_modules\npx\node_modules\libnpx\index.js'. Please verify that the package.json has a valid 
    "main" entry
        at tryPackage (internal/modules/cjs/loader.js:297:19)
        at Function.Module._findPath (internal/modules/cjs/loader.js:528:18)
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:784:27)
        at Function.Module._load (internal/modules/cjs/loader.js:690:27)
        at Module.require (internal/modules/cjs/loader.js:852:19)
        at require (internal/modules/cjs/helpers.js:74:18)
        at Object.<anonymous> (C:\Users\hcmlo\AppData\Roaming\npm\node_modules\npx\index.js:3:13)
        at Module._compile (internal/modules/cjs/loader.js:959:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
        at Module.load (internal/modules/cjs/loader.js:815:32) {
      code: 'MODULE_NOT_FOUND',
      path: 'C:\\Users\\hcmlo\\AppData\\Roaming\\npm\\node_modules\\npx\\node_modules\\libnpx\\package.json',
      requestPath: 'libnpx'
    }
    
    opened by hcmlopes 4
  • Lighthouse integration to CI (minimum score & budget)

    Lighthouse integration to CI (minimum score & budget)

    Lighthouse integration to CI.

    • Minimum score requirements can be found in package.json , they can be configured manually.
    • Budget can be found in ci-scripts/budget.json, as per Google documentation (default value are from here : https://developers.google.com/web/tools/lighthouse/audits/budgets)
    • This adds a last step in circle ci, after deployment. It won't cancel/revert deployment if the audit doesn't pass.
    • Unfortunately, Google doesn't have an official Docker image for lighthouse + node, so I found another one on docker hub
    opened by thomasmarcelin 4
  • CI/CD Please upgrade your Node version.

    CI/CD Please upgrade your Node version.

    Describe the bug Can't finalize CI/CD setup. Jobs failed with this error message : npm run lint npm info it worked if it ends with ok npm info using [email protected] npm info using [email protected] npm info lifecycle [email protected]~prelint: [email protected] npm info lifecycle [email protected]~lint: [email protected]

    [email protected] lint /home/circleci/repo vue-cli-service lint

    ERROR You are using Node v7.10.1, but vue-cli-service requires Node >=8. Please upgrade your Node version.

    I don't understand why it's saying that i'm using Node v7.10.1. As on my laptop i have version 10 install. I have even change the version in package.json to "engines": { "npm": ">=6.4.0", "node": ">=10.5.0" },

    opened by Foetus6907 4
  • To go OSS all the way, consider deploying to a parse server instead of firebase

    To go OSS all the way, consider deploying to a parse server instead of firebase

    Firebase is vendor lock-in. It is not OSS.

    Describe the solution you'd like As parse server project is indeed OSS and fully maintained, wouldn't make sense to deploy ins a Parse server instance?

    Additional context My startup is based on Parse server and it provides ~95% of the same features. I'm not a developer so i cannot measure the complexity of this feature.

    :heavy_plus_sign: feature request 
    opened by lucasverra 4
  • Login method is wasting reads

    Login method is wasting reads

    The login method is badly written, everytime you login, it reads the database to check if the user has its own collection or not.

    I am talking about this file

    authentication.actions.js

    Here is how i fixed it for me

    login: async ({ commit, dispatch }, firebaseAuthUser) => {
    // ##########  ctime is the account creation timestamp. stime is the last login timestamp ########
        const ctime = firebaseAuthUser.metadata.a
        const stime = firebaseAuthUser.metadata.b
        let user
    
        // ##########  CHECK IF THE USER LOGGED IN FOR THE FIRST TIME ########
        if (ctime === stime){
          user = await createNewUserFromFirebaseAuthUser(firebaseAuthUser)
        } else {
               const authuser = firebaseAuthUser.providerData[0]
                user = {displayName:authuser.displayName , id: firebaseAuthUser.uid, email:authuser.email, photoURL:authuser.photoURL, created:ctime , lastLogin:stime}
        }
    
        commit('setUser', user)
        dispatch('products/getUserProducts', null, { root: true })
      }
    

    No more useless reads , and it's faster. If someone can put a pull request for this because i didn't fork the repo

    opened by Revln9 0
Releases(v1.0.0)
Owner
Franck Abgrall
๐Ÿ“„ VuePress core team - Speaker / Consultant / Trainer - Tweet me at @FranckAbgrall ๐Ÿฆ
Franck Abgrall
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Build performant, native and cross-platform desktop applications with native Vue + powerful CSS like styling.๐Ÿš€

Vue NodeGui Build performant, native and cross-platform desktop applications with Vue. ?? Vue NodeGUI is powered by Vue ?? and Qt5 ?? which makes it C

NodeGui 765 Dec 30, 2022
quickly start your Vue dev server

vue-fast-dev-server 10ๅ€็ผฉ็Ÿญๆ‚จ็š„vue dev serverๅฏๅŠจๆ—ถ้—ด ๅฎ‰่ฃ… npm install vue-fast-dev-server --save-dev vue.config.js const path = require('path') module.exports

null 22 Feb 28, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | ็ฎ€ไฝ“ไธญๆ–‡ Talk is cheap,

Baidi Liu 187 Jan 2, 2023
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | ็ฎ€ไฝ“ไธญๆ–‡ | ๆ—ฅๆœฌ่ชž | Spanish SPONSORED BY ๆดปๅŠจๆœๅŠก้”€ๅ”ฎๅนณๅฐ ๅฎขๆˆทๆถˆๆฏ็›ด่พพๅทฅไฝœ็พค Introduction vue-element-admin is a production-ready front-end solution for admin inter

่Šฑ่ฃค่กฉ 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
๐ŸŽ‰ ๅŸบไบŽ vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus ็š„ๅŽๅฐ็ฎก็†็ณป็ปŸvue3-element-admin

vue3-element-admin ?? ๅŸบไบŽ Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus ็š„ๅŽๅฐ็ฎก็†็ณป็ปŸ ็ฎ€ไป‹ vue3-element-admin ๆ˜ฏไธ€ไธชๅŽๅฐๅ‰็ซฏ่งฃๅ†ณๆ–นๆกˆ๏ผŒๅฎƒๅŸบไบŽ vue3 ๅ’Œ element-plu

้›ชๆœˆๆฌงๅทด 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

ะั€ั…ะธะฟั†ะตะฒ ะ•ะฒะณะตะฝะธะน 63 Dec 30, 2022
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Catamyst Frontend Stack - Discussion and demo for Frontend Web Development with Modern Tech Stack

Catamyst Frontend Stack Discussion and demo for Frontend Web Development with Modern Tech Stack. Made by M Haidar Hanif from Catamyst. Haidar is the F

Catamyst Community 48 Dec 24, 2022
Modern Vue Stack 2022. Joyful development experience ๐ŸŽ‰

Modern Vue Modern Vue stack 2022 with Micro front end & Monorepo ?? . Joyful development experience ?? . The main branch will keep clean for quickly c

han 263 Dec 18, 2022
@auth0/auth0-spa-js wrapper in the "Vue way", with full TS support

vue-auth0 This is a wrapper around @auth0/auth0-spa-js meant to ease the usage into Vue projects. This is heavily inspired by the snippet into Auth0 o

Dreamonkey S.r.l. 5 Oct 18, 2022
demo for full-stack ci/cd

vue + nestjs (TypeScript) Features CI/CD full-stack mutiple-env (test: http://81.70.221.165:8026 / production: http://81.70.221.165) continuing๏ฝž welco

Evan Zuo 3 Oct 24, 2022
(WIP) Universal PWA Builder

WORK IN PROGRESS Features Framework Agnostic Build with your preferred framework or with none at all! Official presets for Preact, React, Vue, and Sve

Luke Edwards 3.1k Dec 29, 2022
Code snippets manager for developers. PWA.

Snippets Ninja About Snippets.Ninja is a progressive web application for code snippet management. Offline first. Open Source. App uses IndexedDB for l

Magalyas Dmitry 71 Dec 19, 2022
Frolics is an offline, lightweight, full-text search library for Frontend applications

Frolics What Is Frolics Installation Document Preparing Customized Fields Hand-on Example Cache Usage What Is Frolics ? Frolics is an offline, lightwe

null 13 Dec 4, 2022
:necktie: :briefcase: Build fast :rocket: and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS.

best-resume-ever ?? ?? Build fast ?? and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS. Cool Creative Green Pur

Sara Steiert 15.8k Jan 9, 2023