Serve Up a Full Stack App with Bento Starter

Serve Up a Full Stack App with Bento Starter

A quick way to get started with NoSQL and Vue.

Welcome to Bento

Bento logo

Introduction

🍱 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 powerfull and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly.

Tech Stack

  • 🀘 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
  • πŸ“„ prerender spa plugin : pages prerendering
  • πŸ’š circleci : continuous integration/deployment
  • πŸ“¦ bundlesize : control your javascript bundles sizes

App 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

Setup

Pre-requisites

  • node9.3.0+
  • npm@5.5.0+

Step 1 - Installation

πŸ•™Estimated time β†’ 20 seconds

git clone https://github.com/kefranabg/bento-starter.git my-bento-project
cd my-bento-project

# Install dependencies and clean git repository
npm run setup
}

Step 2 - Firebase configuration

πŸ•™Estimated time β†’ 3 minutes

  • Create a new firebase project with the firebase console

Bento logo

  • Once your firebase project is created, add an application by clicking the Firebase web app button. Enter an app nickname but do not check "Also set up Firebase Hosting" and click next. Copy the firebaseConfig object and replace the config variable in '/src/firebase/init.js' in bento-starter project.

  • Go to Side menu β†’ Database β†’ Create database and select Start in test mode. Now your firestore database is up.

  • Go to Side menu β†’ Authentication click Set up sign-in method.

  • Click on Google provider, enable it by clicking the switch button, select a project support email and click save button. You will be able to change or add new auth providers later if you need to.

  • Back to your bento-starter project, open a console and run :

npm i -g npx

# Login with the account you used to create the firebase project
npx firebase login

# Select the project you've just created and use "default" as alias
npx firebase use --add

# Build the app and deploy
npm run build
npx firebase deploy
}

You're done ! πŸŽ‰ Your project is now available on firebase hosting.

Did you like it? Why don't you try also...

Turn a Failing Website into an A+ Progressive Web Application

Turn a Failing Website into an A+ Progressive Web Application

How to achieve a perfect Lighthouse score.

Build a Mobile Game Using TypeScript, Webpack and Phaser 3.

Build a Mobile Game Using TypeScript, Webpack and Phaser 3.

Getting started with Phaser 3 and TypeScript.

Build a Blazing Fast Website Using Gatsby, React and GraphQL

Build a Blazing Fast Website Using Gatsby, React and GraphQL

Get an A+ on Google Lighthouse Audits.