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 full-stack dApp starter built on Ethereum (Solidity) with Next.js (React).

A full stack dApp starter built on Ethereum (Solidity) with Next.js (React) This repo contains boilerplate code for interacting with a simple smart co

Tom Hirst 272 Dec 30, 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 26, 2022
⚑️ Set up Next.js Progressive Web App with `npx create-next-pwa`

⚑️ create-next-pwa A cross-platform Node.js based CLI tool that creates Progressive Web App (PWA) with Next.js. You can also integrate tailwind with t

Saad Irfan ⚑️ 66 Nov 20, 2022
This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

VersΓ£o em portuguΓͺs MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Douglas Samuel Gonçalves 2 Jan 22, 2022
An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation

Full Page Intro & Navigation An intro page, focused around a full width background image and a bold animated menu. And, for browsers that support it,

CodyHouse 45 Sep 24, 2022
Starter Project for Nuxt3 project with full tailwind3 implementation and also docker & docker-compose supprt

Nuxt 3 & Tailwind 3 Starter Including tailwindConfig and Tailwind Config Viewer! Be patient, this is just a Beta version of Nuxt3. For Nuxt3 Installat

Michel WΓ€chter 42 Nov 10, 2022
IDE and toolkit for building scalable web applications with React, Redux and React-router

An all-in-one solution for creating modern React apps Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It

Rekit 4.5k Jan 2, 2023
A Netflix clone created with the MERN Stack

X-Netflix X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend. Built with FrontEnd: React.JS,

Mehdi BHA 52 Aug 19, 2022
Web applications with node.js and React

Electrode Web Applications with node.js and React The Electrode project was developed to make node.js and React the primary tech choices for developin

Electrode 2.1k Dec 10, 2022
A boilerplate for Node.js web applications

Hackathon Starter Live Demo: https://hackathon-starter.walcony.com Jump to What's new? A boilerplate for Node.js web applications. If you have attende

Sahat Yalkabov 34k Dec 28, 2022
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

Jared Palmer 11k Jan 8, 2023
Opinionated SvelteKit Template for building web applications.

Opinionated SvelteKit Template for building web applications.

Manassarn 7 Jan 1, 2023
Starting a new JS app? Build, test and run advanced apps with kyt πŸ”₯

kyt Every sizable JavaScript web app needs a common foundation: a setup to build, run, test and lint your code. kyt is a toolkit that encapsulates and

The New York Times 1.9k Dec 26, 2022
DEPRECATED - A front-end template that helps you build fast, modern mobile web apps.

Deprecation Note Mobile Boilerplate is no longer maintained. Please use HTML5 Boilerplate as a decent starting point for your project. Mobile Boilerpl

H5BP 3.9k Dec 14, 2022
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

mcrn-event-booking-app-starter Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You

Roy Chen 43 Dec 19, 2022
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

Cerberus Responsive Email Patterns Coding regular emails is hard enough by itself. Making them responsive shouldn’t add to the headache. A few simple,

Ted Goas 4.6k Dec 28, 2022
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Start your next react project in seconds A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices Cr

react-boilerplate 28.9k Jan 7, 2023
πŸš€ A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript

?? A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript ⚑️ Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup

null 4 Nov 28, 2022
A default Next.js project with boilerplate packages and configurations. Includes Tailwind, TypeScript (strict), ESLint, Prettier, and Husky.

Yet another Next.js project template This template includes a set of our favorite dev tools scaffolded into a Next.js project. Tools include: TypeScri

Joey McKenzie 16 Dec 27, 2022