14 |
15 | > Bento-starter project documentation. See [https://bento-starter.netlify.com/](https://bento-starter.netlify.com/)
16 |
17 | ## Install
18 |
19 | ```sh
20 | npm i
21 | ```
22 |
23 | ## Usage
24 |
25 | ```sh
26 | npm run start
27 | ```
28 |
29 | ## Contributing
30 |
31 | Contributions, issues and feature requests are welcome. Feel free to check [issues page](https://github.com/kefranabg/bento-starter-docs/issues) if you want to contribute.
32 |
33 | ## Show your support
34 |
35 | Please ⭐️ this repository if you like it.
36 |
37 | ---
38 |
39 | _This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
40 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroImage: /assets/img/bento-starter.svg
4 | actionText: Get Started →
5 | actionLink: /overview/
6 | features:
7 | - title: 🙌 Developer experience
8 | details: Provides a complete well configured environment so you can immediatly focus on writing your web app code.
9 | - title: 💚 Vue.js
10 | details: BentoStarter uses Vue.js because it is cool, fast, and probably the easiest javascript framework to learn today.
11 | - title: 🏠 Hosting ready
12 | details: Your app is deployed to firebase hosting as soon as you commit a new version.
13 | - title: 🚀 Progressive Web App
14 | details: Provides a strong PWA configuration so your web app can be used as a mobile (IOS / Android) or desktop application with offline support.
15 | - title: ☁️ Cloud database
16 | details: BentoStarter uses firestore that provides a cloud NoSQL Database so you can focus on writing your front-end code.
17 | - title: ✅ CI / CD
18 | details: Optional continuous integration/delivery configuration that helps you control your code quality before deployment.
19 | - title: 📁 Well structured
20 | details: BentoStarter helps you getting started by proposing a default app structure based on best practices.
21 | - title: 🛠 Flexible
22 | details: As this project is a template and not a CLI, you can modify the whole project according to your needs.
23 | - title: 🔎 Prerendering / SEO
24 | details: Prerender your different app pages and boost SEO with meta-data description per page.
25 |
26 | footer: MIT Licensed
27 | ---
28 |
--------------------------------------------------------------------------------
/docs/contributing/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 0
3 | ---
4 |
5 | # Contributing
6 |
7 | Contributions, issues and feature requests are very welcome. If you are using this app and fixed a bug or improve it, please consider submitting a PR!
8 |
9 | You can contact us on Twitter ([Franck](https://twitter.com/FranckAbgrall) or [Thomas](https://twitter.com/tbetous))
10 |
11 | If you want to contribute you must read and accept out [Code of Conduct](../code-of-conduct/)
12 |
13 | ## Guidelines
14 |
15 | ### General guidelines
16 |
17 | - The master branch is where incoming new features are merged (the next coming release).
18 | - All new features / bugs should be done in dedicated branch from the `master` branch.
19 | - It's a very nice thing to have multiple small commits as you work on the PR. It's easier to review it. Then we will squash it before merging.
20 |
21 | ### Commit messages
22 |
23 | This project uses [gitmoji](https://gitmoji.carloscuesta.me/) as commit convention, because it's fun and provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. All you just have to do is to find the emoji corresponding to the purpose of your commit in [this list](https://gitmoji.carloscuesta.me/) following by a short message explaining the update. You can also add a description if it's needed. That's all ;)
24 |
25 | https://gitmoji.carloscuesta.me/
26 |
27 | ### Adding new feature
28 |
29 | Ideally you should open a suggestion issue on [GitHub](https://github.com/kefranabg/bento-starter) or talk with the community on [Slack](https://join.slack.com/t/bento-starter/shared_invite/enQtNjE5OTI5MzQyMTE3LTQ1N2M0NzAxYWM1OTJmYTA4YTIxMmM4MDhiNTI0MGNjZGIyNDFjY2UwNjE2Nzc3NzMzMzViOTYyOGViYjkxYzY).
30 |
--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | title: 'bento-starter',
3 | description: 'Open-Source Full-Stack solution for fast PWA development',
4 | ga: 'UA-75044551-3',
5 | head: [
6 | ['link', { rel: 'shortcut icon', href: '/assets/img/icons/favicon.ico' }],
7 | [
8 | 'link',
9 | {
10 | rel: 'icon',
11 | href: '/assets/img/icons/favicon-16x16.png',
12 | size: '16x16'
13 | }
14 | ],
15 | [
16 | 'link',
17 | {
18 | rel: 'icon',
19 | href: '/assets/img/icons/favicon-32x32.png',
20 | size: '32x32'
21 | }
22 | ],
23 | [
24 | 'link',
25 | {
26 | rel: 'apple-touch-icon',
27 | href: '/assets/img/icons/apple-touch-icon.png',
28 | size: '180x180'
29 | }
30 | ],
31 | [
32 | 'link',
33 | {
34 | rel: 'mask-icon',
35 | href: '/assets/img/icons/safari-pinned-tab.svg',
36 | color: '#5bbad5'
37 | }
38 | ],
39 | ['link', { rel: 'manifest', href: '/manifest.json' }],
40 | ['meta', { name: 'msapplication-TileColor', content: '#603cba' }],
41 | ['meta', { name: 'msapplication-config', content: '/browserconfig.xml' }],
42 | ['meta', { name: 'theme-color', content: '#ffffff' }]
43 | ],
44 | themeConfig: {
45 | docsDir: 'docs',
46 | docsBranch: 'master',
47 | editLinks: true,
48 | editLinkText: 'Edit this page on Github',
49 | lastUpdated: 'Last Updated',
50 | logo: '/assets/img/bento-starter.svg',
51 | nav: [
52 | { text: 'Home', link: '/' },
53 | { text: 'Getting started', link: '/overview/' },
54 | { text: 'Demo', link: 'https://bento-starter.firebaseapp.com' },
55 | { text: 'GitHub', link: 'https://github.com/kefranabg/bento-starter' }
56 | ],
57 | sidebar: [
58 | {
59 | title: 'Guide',
60 | collapsable: false,
61 | children: [
62 | ['/overview/', 'Introduction'],
63 | ['/setup/', 'Setup'],
64 | ['/guide/', 'Guide'],
65 | ['/commands/', 'Commands'],
66 | ['/contributing/', 'Contributing'],
67 | ['/code-of-conduct/', 'Code of conduct'],
68 | ['/faq/', 'FAQ'],
69 | ['/license/', 'License']
70 | ]
71 | }
72 | ]
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/docs/code-of-conduct/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 0
3 | ---
4 |
5 | # Contributor Covenant Code of Conduct
6 |
7 | ## Our Pledge
8 |
9 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
10 |
11 | ## Our Standards
12 |
13 | Examples of behavior that contributes to creating a positive environment include:
14 |
15 | - Using welcoming and inclusive language
16 | - Being respectful of differing viewpoints and experiences
17 | - Gracefully accepting constructive criticism
18 | - Focusing on what is best for the community
19 | - Showing empathy towards other community members
20 |
21 | Examples of unacceptable behavior by participants include:
22 |
23 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
24 | - Trolling, insulting/derogatory comments, and personal or political attacks
25 | - Public or private harassment
26 | - Publishing others' private information, such as a physical or electronic address, without explicit permission
27 | - Other conduct which could reasonably be considered inappropriate in a professional setting
28 |
29 | ## Our Responsibilities
30 |
31 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
32 |
33 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
34 |
35 | ## Scope
36 |
37 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
38 |
39 | ## Enforcement
40 |
41 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at franck.abgrall@zenika.com or thomas.betous@zenika.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
42 |
43 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
44 |
45 | ## Attribution
46 |
47 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
48 |
49 | [homepage]: http://contributor-covenant.org
50 | [version]: http://contributor-covenant.org/version/1/4/
51 |
--------------------------------------------------------------------------------
/docs/overview/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 0
3 | ---
4 |
5 | # Welcome to bento-starter :wave:
6 |
7 | [](https://github.com/tbetous/bento-starter/actions?query=workflow%3A%22Deploy+on+production%22)
8 | [](https://opensource.org/licenses/MIT)
9 | [](https://GitHub.com/vuesion/vuesion/graphs/commit-activity)
10 | [](https://david-dm.org/kefranabg/bento-starter)
11 | [](https://david-dm.org/kefranabg/bento-starter?type=dev)
12 |
13 |
14 | :bento: **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.
15 |
16 | 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.
17 |
18 | ## Demo
19 |
20 | :point_right: [https://bento-starter.firebaseapp.com](https://bento-starter.firebaseapp.com)
21 |
22 | Install the PWA demo from Google Play Store :point_right: [bento-starter Google Play Store](https://play.google.com/store/apps/details?id=com.bentostarter.bentostarterdemo)
23 |
24 | 
25 |
26 | **bento-starter** comes with a small example of "products management" in the [products page](https://bento-starter.firebaseapp.com/login?redirectUrl=%2Fproducts)**(Authentication required)** to demonstrate how to manage your data with this stack.
27 |
28 | **Lighthouse score :**
29 |
30 | 
31 |
32 | **Optional preconfigured Github Actions workflow :**
33 |
34 | - :heavy_check_mark: Check tests and quality
35 | - :gear: Build the project
36 | - :rocket: Deploy to firebase hosting
37 |
38 | **The stack is made up of :**
39 |
40 | - :metal: [Vue.js](https://vuejs.org/) : front-end framework
41 | - :wrench: [Vue-cli](https://cli.vuejs.org/) : standard tooling for vue.js development
42 | - :repeat: [Vuex](https://vuex.vuejs.org/) : state management
43 | - :floppy_disk: [Firestore](https://firebase.google.com/products/firestore/) : cloud NoSQL Database
44 | - :house: [Firebase hosting](https://firebase.google.com/products/hosting/) : fast and secure web hosting
45 | - :bust_in_silhouette: [Firebase authentication](https://firebase.google.com/products/firestore/) : for easy authentication
46 | - :iphone: [PWA](https://www.npmjs.com/package/@vue/cli-plugin-pwa) : progressive web app support
47 | - :lipstick: [Prettier](https://prettier.io/) : code formatting rules
48 | - :rotating_light: [Eslint](https://eslint.org/) : control code quality
49 | - :white_check_mark: [Jest](https://jestjs.io/) : unit testing
50 | - :white_check_mark: [Cypress](https://www.cypress.io/) : e2e testing
51 | - :mag: [Vue head](https://github.com/ktquez/vue-head) : meta description per page
52 | - :page_facing_up: **[Optional]** [prerender spa plugin](https://github.com/chrisvfritz/prerender-spa-plugin) : pages prerendering
53 | - :green_heart: **[Optional]** [Github Actions](https://github.com/features/actions) : continuous integration/deployment
54 | - :package: **[Optional]** [bundlesize](https://github.com/siddharthkp/bundlesize) : control your javascript bundles sizes
55 |
56 | **App embedded features :**
57 |
58 | - 👤 Google authentication
59 | - 📴 Offline support (dynamic & static caching)
60 | - 🆕 New version available prompt on new app deployments
61 | - ➕ Add to home screen prompt for ios & android
62 | - ↩️ Smart redirection for auth protected routes
63 | - ✨ Products page example to demonstrate app data management with firestore and vuex
64 | - 💪 Better PWA support for all browsers with [PWACompat](https://github.com/GoogleChromeLabs/pwacompat)
65 |
66 |
67 |
--------------------------------------------------------------------------------
/docs/setup/README.md:
--------------------------------------------------------------------------------
1 | # Setup
2 |
3 | ::: warning Pre-requisites
4 |
5 | - node >=9.3.0 & <= 13.0.0
6 | - npm@5.5.0+
7 |
8 | We recommand to use the node LTS version
9 |
10 | :::
11 |
12 | ::: tip
13 | We highly recommend to use [VSCode](https://code.visualstudio.com/) with the following plugins to get a better development experience :
14 |
15 | - Prettier
16 | - Eslint
17 | - Vetur
18 |
19 | **bento-starter** comes with a default code editor config that will automatically be used by vscode. This config is available in `.vscode/settings.json`.
20 | :::
21 |
22 | ## Step 1 - Installation
23 |
24 | 🕙Estimated time → **20 seconds**
25 |
26 |
27 | ```
28 | git clone https://github.com/kefranabg/bento-starter.git my-bento-project
29 | cd my-bento-project
30 |
31 | # Install dependencies and clean git repository
32 | npm run setup
33 | ```
34 |
35 | ## Step 2 - Firebase configuration
36 |
37 | 🕙Estimated time → **3 minutes**
38 |
39 |
40 | - Create a new firebase project with the [firebase console](https://console.firebase.google.com)
41 | - Once your firebase project is created, add an application by clicking the web 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.
42 | - Go to `Side menu → Database → Create database` and select `Start in test mode`. Now your firestore database is up.
43 | - Go to `Side menu → Authentication` click `Set up sign-in method`.
44 | - 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.**
45 | - Back to your bento-starter project, open a console and run :
46 |
47 | ```
48 | npm i -g npx
49 |
50 | # Login with the account you used to create the firebase project
51 | npx firebase login
52 |
53 | # Select the project you've just created and use "default" as alias
54 | npx firebase use --add
55 |
56 | # Commit your changes
57 | git add .firebaserc src/firebase/init.js
58 | git commit -m ':wrench: Add firebase config'
59 |
60 | # Build the app and deploy
61 | npm run build
62 | npx firebase deploy
63 | ```
64 |
65 | **You're done ! :tada:**
66 | **Your project is now available on firebase hosting**.
67 | **You can also run `npm run serve` and start your app development !**
68 |
69 | However we recommend you to go through optional steps to get a better developer experience :sunglasses:
70 |
71 | If you want to disable the CI, go to `Your project page → Settings → Actions` and select ̀Disable Actions for this repository`.
72 |
73 | ## Step 3 (optional) - Continuous integration/deployment
74 |
75 | 🕙Estimated time → **3 minutes**
76 |
77 |
78 | We've built a Github Actions configuration that will trigger the following actions when you're pushing on master or make a pull-request.
79 |
80 | The process is the following :
81 |
82 | - Check that all project files matches the prettier format : `npm run prettier:check`
83 | - Run the linter : `npm run lint`
84 | - Run unit tests : `npm run test:unit`
85 | - Run e2e tests : `npm run test:e2e:headless`
86 | - Build the project : `npm run build`
87 | - Check your js bundles sizes : `npm run bundlesize`
88 | - **Eventually** deploy the built project to firebase hosting only when you push commits to **master** : `npm run firebase:deploy:ci`
89 |
90 | You should also know that each time a commit is pushed on a pull-request branch, it will trigger the CI workflow.
91 |
92 | ⚠️ **For this step, we assume that you already have created a github repository that will host your bento-starter project** ⚠️
93 |
94 | You need to configure Github Actions with your firebase credentials in order it can deploy your project. First of all you need to get a firebase token from your credentials :
95 |
96 | ```
97 | npx firebase login:ci
98 | ```
99 |
100 | - Login with you google account and authorize firebase-cli. The command will print out a token that looks like this :
101 |
102 | ```
103 | 1/PXcLCJ5BXAZ7ciFwkrrpikUbnMAMX8xRFmt16pLYudg9
104 | ```
105 |
106 | Once you did that, you need to add this token in your Github project.
107 |
108 | - Go to `Your project page → Settings → Secrets`
109 | - Click on `Add a new secret`
110 | - Fill `Name` input with `FIREBASE_TOKEN`
111 | - Copy the printed firebase token and paste into `Value` input
112 | - Click on `Add secret button`
113 |
114 | 
115 |
116 | All you need to do is to push your project code into `master` with git.
117 |
118 | Back to a terminal, run the following command :
119 |
120 | ```
121 | git push -u origin master
122 | ```
123 |
124 | This will trigger Github actions workflow, check your code and deploy your project into Firebase. Go to `Your project page → Actions` to follow the Github actions workflow execution.
125 |
126 | - Wait again for all the jobs to finish.
127 | - Now the deploy step has completed with success and your project has automatically been deployed to firebase hosting :tada:
128 |
129 | 
130 |
--------------------------------------------------------------------------------
/docs/guide/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 1
3 | ---
4 |
5 | # Guide
6 |
7 | ## Tooling
8 |
9 |
10 |
11 | **Bento-starter** uses [Vue CLI](https://cli.vuejs.org/) which is the default standard tooling for Vue.js development.
12 |
13 |
14 |
15 | ::: tip
16 | 📘 Refer to [the official documentation](https://cli.vuejs.org/) for more details.
17 | :::
18 |
19 | ## Environments
20 |
21 |
22 |
23 | ### Configurations files
24 |
25 | **Vue-cli** configuration may be different depending on the mode you are running the app. You can find all config files per mode on the `/vue-config` folder. `/vue-config/config.default.js` will be merged with either `/vue-config/config.development.js` or `/vue-config/config.production.js` depending on the mode you are using.
26 |
27 |
28 |
29 | ::: tip
30 | 📘 Refer to [the official documentation](https://cli.vuejs.org/guide/mode-and-env.html#modes) for more details.
31 | :::
32 |
33 | ### Environments variables & Modes
34 |
35 |
36 |
37 | ::: tip
38 | 📘 Refer to [the official documentation](https://cli.vuejs.org/guide/mode-and-env.html#modes) for more details.
39 | :::
40 |
41 | ## PWA
42 |
43 |
44 |
45 | ### Service worker
46 |
47 | **Bento-starter** uses [vue-cli-plugin-pwa](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa) to configure **service worker** and PWA stuff.
48 |
49 | The **service worker** configuration is available in `public/service-worker.js`.
50 |
51 | **Service worker registration** is done from this file `src/misc/register-service-worker.js`. **By default, service workers are on registered on `production` environment**.
52 |
53 |
54 |
55 | ::: tip
56 | 📘 Refer to [the official documentation](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa) for more details.
57 | :::
58 |
59 | ### App new version available
60 |
61 | When you release a version of your app, your user will be informed with a toastr that a new version of you app is available so he can refresh :
62 |
63 | 
64 |
65 | This logic is located in `src/misc/register-service-worker.js` in the `updated` hook function.
66 |
67 | ### Manifest
68 |
69 | The **web app manifest** is available here `public/manifest.json`.
70 |
71 |
72 |
73 | ::: tip
74 | 📘 Refer to [the google documentation](https://developers.google.com/web/fundamentals/web-app-manifest/) for more details.
75 | :::
76 |
77 | ### Offline
78 |
79 | With **bento-starter** your app is fully available online.
80 | The project comes with a cache for static files (handle by the service worker) and a dynamic cache for firestore database requests (firestore offline mode is enabled in `/src/firebase/async-firestore.js`).
81 |
82 | Offline status event listener is located in `src/misc/handle-network-status.js`.
83 |
84 | ### Add to home screen
85 |
86 | If you are using chrome on an android device, the browser will automatically prompt the user to install your PWA.
87 |
88 |
89 | **On safari IOS, this process is not automatic yet**. The user has to manually add the PWA to home screen.
90 | For a better experience on IOS, **bento-starter** display a modal explaining the process to add the app to home screen.
91 | This modal is shown only the first time the user visit your app. The app will show this modal again after 1 month (if the PWA is still not installed).
92 |
93 | 
94 |
95 | This logic is located in `src/misc/handle-apple-install-prompt.js`
96 |
97 | ### PWACompat
98 |
99 | [PWACompat](https://github.com/GoogleChromeLabs/pwacompat) brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps.
100 |
101 | ## Publish my PWA to Play Store
102 |
103 | You can publish your PWA in Google Play Store by turning it into a Trusted Web Activity.
104 | In a nutshell, a TWA is a way to run a web app within an android package. Don't worry, it's really easy to setup :wink:
105 |
106 | Some good links explaining in details how to do it :
107 |
108 | - [https://www.youtube.com/watch?v=7JDFjeMvxos](https://www.youtube.com/watch?v=7JDFjeMvxos)
109 | - [https://medium.com/@svenbudak/this-twa-stuff-rocks-finally-i-got-my-pwa-on-google-play-store-b92fe8dae31f](https://medium.com/@svenbudak/this-twa-stuff-rocks-finally-i-got-my-pwa-on-google-play-store-b92fe8dae31f)
110 |
111 | If you want a concrete example, here is the repository of bento-starter demo as a Trusted Web Activity 👉 [https://github.com/kefranabg/bento-starter-twa](https://github.com/kefranabg/bento-starter-twa)
112 |
113 | ## Push notifications
114 |
115 | You can easily add push notifications to your bento project with [firebase cloud messaging](https://firebase.google.com/docs/cloud-messaging/)
116 |
117 | ## Prerendering
118 |
119 |
120 |
121 | **Bento-starter** uses [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) for prerendering.
122 | If you don't know what prerendering is, you should read [this](https://github.com/chrisvfritz/prerender-spa-plugin#what-is-prerendering).
123 |
124 | The prerendering configuration is available in `vue-config/config.production.js` :
125 |
126 | ```js
127 | new PrerenderSPAPlugin({
128 | // Required - The path to the webpack-outputted app to prerender.
129 | staticDir: path.join(__rootDirname),
130 | // Required - Routes to prerender.
131 | routes: prerenderedRoutesList // => prerenderedRoutesList is the array of routes to prerender
132 | })
133 | ```
134 |
135 | If you want to configure the list of routes to prerender, you need to update the `prerenderedRoutesList` variable in `vue-config/config.default.js` :
136 |
137 | ```js
138 | const prerenderedRoutesList = ['/login', '/home', '/']
139 | ```
140 |
141 |
142 |
143 | ::: tip
144 | 📘 Refer to [the official documentation](https://github.com/chrisvfritz/prerender-spa-plugin) for more details.
145 | :::
146 |
147 | ## Authentication
148 |
149 |
150 |
151 | **Bento-starter** uses [firebase auth](https://firebase.google.com/docs/auth/) to handle user authentication. By default, Google Authentication is the only provider enabled in the **bento-starter** stack. You can easily add other providers like **Twitter** or **Facebook** by going to the [firebase console](https://console.firebase.google.com), on the `Authentication` page.
152 |
153 | - Login component is located in `src/views/Login.vue`.
154 | - Authentication management code is located in `src/misc/handle-authentication.js` and in `src/store/authentication` folder.
155 |
156 |
157 |
158 | ::: tip
159 | 📘 Refer to [the official documentation](https://firebase.google.com/docs/auth/) for more details.
160 | :::
161 |
162 | ## Cloud database
163 |
164 |
165 |
166 | **Bento-starter** uses [firestore](https://firebase.google.com/docs/firestore/) to store and sync data.
167 | You can find firestore related code in `src/firebase` folder.
168 |
169 | **Bento-starter** provides a "CRUD" feature that might help you to manage firestore entities in `src/firebase/generic-db.js`.
170 | You can extend this behavior for your different firestore entities as it is done in `src/firebase/users-db.js` and `src/firebase/user-products-db.js`.
171 |
172 | With firestore, you need to secure your data with [security rules](https://firebase.google.com/docs/firestore/security/overview).
173 | You can find find these rules in `src/firebase/firestore.rules`.
174 |
175 | To manually deploy firestore rules, run :
176 |
177 | ```
178 | npx firebase deploy --only rules
179 | ```
180 |
181 |
182 |
183 | ::: tip
184 | 📘 Refer to [the official documentation](https://firebase.google.com/docs/firestore/) for more details.
185 | :::
186 |
187 | ### How to add a new firestore collection with bento-starter ?
188 |
189 | It's really easy.
190 | All you have to know is in the [the official documentation](https://firebase.google.com/docs/firestore/).
191 |
192 | However here is a small example of adding a `news` collection using `GenericDB` in bento-starter :
193 |
194 | - First we have to add security rules to allow `news` collection data manipulation. Go to `src/firebase/firestore.rules` and add security rules according to your needs :
195 |
196 | ```
197 | // Now connected users will be able to read and create news.
198 | match /news/{newsId} {
199 | allow list: if authenticated();
200 | allow create: if authenticated();
201 | }
202 | ```
203 |
204 | - Upload firestore security rules with the following command :
205 |
206 | ```
207 | npx firebase deploy --only firestore:rules
208 | ```
209 |
210 | - Create a `news-db.js` in `src/firebase` folder and past following :
211 |
212 | ```js
213 | import GenericDB from './generic-db'
214 |
215 | // [Optional] Extend GenericDB if you want CRUD operations
216 | export default class NewsDB extends GenericDB {
217 | constructor() {
218 | super('news')
219 | }
220 |
221 | // Here you can extend NewsDB with custom methods
222 | }
223 | ```
224 |
225 | - Now you can use `NewsDb` generic methods from everywhere to manipulate the `news` collection :
226 |
227 | ```js
228 | import NewsDB from '@/firebase/news-db'
229 |
230 | const newsDB = new NewsDB()
231 |
232 | await newsDB.create({
233 | title: 'My first news',
234 | content: 'I like sushi',
235 | tag: 'cooking'
236 | })
237 | await newsDB.create({
238 | title: 'My second news',
239 | content: 'I dont like sushi',
240 | tag: 'cooking'
241 | })
242 | await newsDB.create({
243 | title: 'My third news',
244 | content: 'I like sushi',
245 | tag: 'bento'
246 | })
247 |
248 | // Read news with some constraints
249 | const news = await newsDB.readAll([
250 | ['content', '==', 'I like sushi'],
251 | ['tag', '==', 'cooking']
252 | ])
253 |
254 | // news will be :
255 | // [
256 | // { title: 'My first news', content: 'I like sushi', tag: 'cooking' },
257 | // ]
258 | ```
259 |
260 | If you want an example of subcollection creation, take a look at `src/firebase/user-products-db.js` .
261 |
262 | ## Data management
263 |
264 |
265 |
266 | Front-end data management is done with [vuex](https://vuex.vuejs.org/).
267 |
268 | **Vuex** code is located in the `src/store` folder.
269 |
270 |
271 |
272 | ::: tip
273 | 📘 Refer to [the official documentation](https://vuex.vuejs.org/) for more details.
274 | :::
275 |
276 | ## Hosting
277 |
278 |
279 |
280 | **Bento-starter** uses [firebase-hosting](https://firebase.google.com/docs/hosting/) for app deployment.
281 |
282 | To manually deploy your app, run :
283 |
284 | ```
285 | npx firebase deploy --only hosting
286 | ```
287 |
288 | :warning: To deploy, you must have build your app before :
289 |
290 | ```
291 | npm run build
292 | ```
293 |
294 | Deployment configuration can be found in `/firebase.json`.
295 |
296 |
297 |
298 | ::: tip
299 | 📘 Refer to [the official documentation](https://firebase.google.com/docs/hosting/) for more details.
300 | :::
301 |
302 | ## Continuous integration/deployment
303 |
304 |
305 |
306 | Continuous integration/deployment is handled by [Github Actions](https://github.com/features/actions) (**[If you've enabled it](/setup/#step-3-optional-continuous-integration-deployment)**)
307 |
308 | Github Actons will process the following :
309 |
310 | - Check that all project files matches the prettier format : `npm run prettier:check`
311 | - Run the linter : `npm run lint`
312 | - Run unit tests : `npm run test:unit`
313 | - Run e2e tests : `npm run test:e2e:headless`
314 | - Build the project : `npm run build`
315 | - Check your js bundles sizes : `npm run bundlesize`
316 | - **Eventually** deploy the built project to firebase hosting only when you push commits to **master** : `npm run firebase:deploy:ci`
317 |
318 | You should also know that each time a commit is pushed on a pull-request branch, it will trigger the CI workflow.
319 |
320 | **Github Actons** configurations are available in `.github/workflows`.
321 |
322 |
323 |
324 | ::: tip
325 | 📘 Refer to [the Github Actions documentation](https://help.github.com/en/actions/automating-your-workflow-with-github-actions) for more details.
326 | :::
327 |
328 | ## Tests
329 |
330 |
331 |
332 | All tests and related configuration can be found in `tests` folder.
333 | [Cypress](https://www.cypress.io/) is use for E2E tests and [Jest](https://jestjs.io/) for unit tests.
334 |
335 | **Run E2E tests :**
336 |
337 | ```
338 | npm run test:e2e
339 | ```
340 |
341 | **Run unit tests :**
342 |
343 | ```
344 | npm run test:unit
345 | ```
346 |
347 | You can easily change these testing frameworks with [vue-cli](https://cli.vuejs.org/) if you want.
348 |
349 |
350 |
351 | ::: tip
352 | 📘 Refer to the [Jest documentation](https://jestjs.io/) or [Cypress documentation](https://www.cypress.io/) for more details.
353 | :::
354 |
355 | ## BundleSize
356 |
357 |
358 |
359 | BundleSize helps you control your javascript bundle sizes for better performances.
360 | BundleSize rules are located in the `package.json`, in the `bundlesize` property. You can add as many rules as you want. It is recommended to add as many rules as javascript bundles you have.
361 |
362 | **Run BundleSize check command :**
363 |
364 | ```
365 | npm run bundlesize
366 | ```
367 |
368 | If you did [**step 3** in the setup](/setup/#step-3-optional-continuous-integration-deployment) section, `bundlesize` command will be executed during the CI process.
369 |
370 |
371 |
372 | ::: tip
373 | 📘 Refer to [the official documentation](https://github.com/siddharthkp/bundlesize) for more details.
374 | :::
375 |
376 | ## Code format
377 |
378 |
379 |
380 | **Bento-starter** uses [prettier](https://prettier.io/) to keep you code formatted.
381 |
382 | **Check all files code format command :**
383 |
384 | ```
385 | npm run prettier:check
386 | ```
387 |
388 | **Fix all files code format command :**
389 |
390 | ```
391 | npm run prettier:format-all
392 | ```
393 |
394 |
395 |
396 | ::: tip
397 | 📘 Refer to [the official documentation](https://prettier.io/) for more details.
398 | :::
399 |
400 | ## Code quality
401 |
402 |
403 |
404 | **Bento-starter** uses [eslint](https://eslint.org/) to control the quality of your code.
405 |
406 | **Run linter command :**
407 |
408 | ```
409 | npm run lint
410 | ```
411 |
412 |
413 |
414 | ::: tip
415 | 📘 Refer to [the official documentation](https://eslint.org/) for more details.
416 | :::
417 |
418 | ## Pages meta infos
419 |
420 |
421 |
422 | Manipulating the meta information of the head tag is done with [vue-head](https://github.com/ktquez/vue-head).
423 |
424 |
425 |
426 | ::: tip
427 | 📘 Refer to [the official documentation](https://github.com/ktquez/vue-head) for more details.
428 | :::
429 |
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/img/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
381 |
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/img/bento-starter.svg:
--------------------------------------------------------------------------------
1 |
2 |
206 |
--------------------------------------------------------------------------------
4 |
5 | 
6 |
7 |
8 | 
9 |
10 |
11 |