Directory Structure
By default, Myfirebases structure provides a great starting point for your application. However, you are free to organize your files/directories as you like.
Root Directory¶
The root directory contains src, build, config, functions and public directories.
This directory also houses your firebase.json and database.rules.json file.
/src
¶
Your main code lives here, Where the application core is located, firebase
, routes, main.js and Vue components, 99% of the time, you'll be working in src/
.
-
/src/assets
directory, where you can write your global sass/scss preprocessor. -
/src/firebase
directory, contains firebase SDK classes and config.js file, -
/src/routes
directory, where you can define your application routes, Vuejs Routes Docs. -
main.js file where your application core is defined.
-
/src/component
directory as the name implies, contains all of your application components files, here where you can create new Vue components, according to vuejs, components took .vue as extension, see Vuejs Components.
For sure, you are free to define and organize this directory structure however you like.
/functions
¶
Firebase Cloud functions docs
New to firebase?, please see Firebase Cloud functions docs.
In the firebase cloud functions directory,you can write some back-end functions to handle cloud messaging and business logic if necessary and a lot of advanced stuff.
Google Cloud Platform
It's become easier to integrate some advanced technologies such as machine learning and image processing with Google Cloud Platform and more.
/storage
¶
The storage directory contains all of your storage files, using one of Vuejs eco-system, see Vuex.
/public
¶
The public directory contains the main index.html file, it also houses all of your applications compiled assets CSS, JS files and service-workers, these assets will be auto injected to index.html
service workers
Google developers had made some cool articles about the service-worker concept, see Service Workers: an Introduction.
-
index.html index page
-
404.html NotFound page 404
-
css css directory
-
js js directory
-
service-worker.js
-
firebase-messaging-sw.js
-
manifest.json
/build
¶
Apparently, you may not want to touch anything right here, this directory contains all the build files managed by node.js unless you want to specify some of your additional configuration such as development server port, service-workers or even changing web pack configuration, then you may proceed.
/config
¶
Where the development and the production mode configuration are located.
/static
¶
Where static files are located, images and icons are used as a static assets in your applications.
/tests
¶
Where your application tests are located, by default Myfirebase comes with eslint and karma for unit testing, you are free to integrate other libraries and plugins such as night watch e2e.