https://github.com/sonujose/firebase-app
Web app using firebase and angularjs, Integrated with firebase realtime database, hosted in firebase server, Used angularfire for integrating angular controller with firebase services.
https://github.com/sonujose/firebase-app
angularfire angularjs firebase firebase-database firebase-hosting webpack
Last synced: 11 months ago
JSON representation
Web app using firebase and angularjs, Integrated with firebase realtime database, hosted in firebase server, Used angularfire for integrating angular controller with firebase services.
- Host: GitHub
- URL: https://github.com/sonujose/firebase-app
- Owner: sonujose
- Created: 2017-02-07T11:24:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-14T12:57:17.000Z (almost 9 years ago)
- Last Synced: 2025-01-02T01:45:03.919Z (about 1 year ago)
- Topics: angularfire, angularjs, firebase, firebase-database, firebase-hosting, webpack
- Language: JavaScript
- Homepage:
- Size: 84 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Firebase app
[](https://github.com/sonujose/AngFire)
[](https://github.com/sonujose/AngFire)
[](https://github.com/sonujose/AngFire)
**(Firebase, Angularjs, Webpack, ES2015, Angularfire, Sass, Babel)**
It is a full stack project for AngularJS web application which objects is:
- Webpack build and bundle all the assests.
- Provide easy to use extensibility with npm managers;
- Deployed in firebase server
- Supports ES2015 using Babel
- Supports SASS for styling you application
- Firebase Realtime database
## Future Updates (Working on it)
- Firebase Authentication
- Database operations
## Installation
1) Create a new folder for your project, and clone this repo inside it
```
git clone https://github.com/sonujose/Firebase-App.git
```
2) You need to have node and npm installed on your system, `npm version should be grater than 3.x` [2.x version may create issues in loading babel loader dependencies]
To update npm version run `npm install npm@latest -g`
3) Install webpack if you don't have it already. Need webpack cli for running the application
```
npm install --global webpack
```
4) Install all npm dependencies
```
npm install
```
5) Getting ready with firebase
Install firebase on your machine.
Please follow firebase documentation for web: [https://firebase.google.com/docs/web/setup](https://firebase.google.com/docs/web/setup)
Create a project on firebase console.
Go to public\firebaseAuth.js , replace the content with your credentials
6) Run the server [point to root directory]
```
firebase serve
```
7) Run the application (Webpack --watch) [open another terminal , point to public folder] ] []
```
npm start
```
8) Wait untill webpack bundles all your files and server, Browser will open `http://localhost:5000`
9) Congratulations, you've just setup your Angular Node fullstack application!
10) Deploy your site [point to root directory]
```
firebase deploy
```
### Client folder structure
```
app/ // Angular app files
build/ // concatenated assets generated by webpack
styles/ // Your general scss files which will includes in main entry for application scss
app.js // Main entry for angular app with router config
vendor.js // Main entry for vendor js .[currently not added , can be added if you need other modules, refer that in webpack vendor entry]
```
## Usage
####1) Using webpack
Here webpack is used for bundling the js files. `webpack.config.js` file bundles the entire js files into two modules app and vendor and are minified and used as reference in `index.html`.
The output of bundled files are in the `client/build` file. if you need to test webpack bundling just run command `webpack`
####2) ES2015 is supported (can be upgraded to ECMA Script latest version)
All the js files inside app support es2015 , used babel loader as the transpiler for es2015. you can upgrade to latest ECMAScipt version in `package.json`, change the `presets` value of `babel` from`es2015` to `latest`
####3) Analyze your webpack modules
1) Run
```
webpack --profile --json >> stats.json
```
2) open
```
http://webpack.github.io/analyse/#modules
```
3) upload stats.json file from your repository
```
Now you can analyse your app modules in webpack
```