Friendly Pix Web
Friendly Pix is a place where you can share photos, follow friends and comment on photos.
Getting Started
- Create your project on the Firebase Console.
- From your Firebase project console, click on red circle button with the caption "Add Firebase to your web app".
- Copy the initialization snippet into the index.html file by clicking the red HTML.
- The snippet should be placed in the
<head>
section ofindex.html
. - Enable Google auth in the Auth > SIGN IN METHOD tab.
- Run
firebase serve
using the Firebase CLI tool to launch a local server.
Create Firebase Project
- Create a Firebase project using the Firebase Console.
- Enable Google as a Sign in provider in Firebase Console > Authentication > Sign in Method tab.
- Enable Facebook as a Sign in provider in Firebase Console > Authentication > Sign in Method tab. You'll need to provide your Facebook app's credentials. If you haven't yet you'll need to have created a Facebook app on Facebook for Developers
- Now navigate to the Overview on the top left and click Add Firebase to your web app to get the initialization snippet to copy. The snippet will look like this:
<script src="https://www.gstatic.com/firebasejs/<VERSION>/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<YOUR_API_KEY>",
authDomain: "<YOUR_PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<YOUR_PROJECT_ID>.firebaseapp.com",
storageBucket: "<YOUR_PROJECT_ID>.appspot.com",
messagingSenderId: "<YOUR_MESSAGING_SENDER_ID>"
};
firebase.initializeApp(config);
</script>
Update the app with your firebase project
- In root of the site, locate the index.html file and replace the text below with the snippet you copied above:
<!-- TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Add Firebase to your web app. -->
Start a local development server
You need to have installed the Firebase CLI by running npm install
.
You can start a local development server by running:
npm run serve
This will start firebase serve
and make sure your Javascript files are transpiled automatically to ES5.
Then open http://localhost:5000
Deploy the app
Deploy to Firebase using the following command:
npm run build
firebase deploy --project <PROJECT_ID>
This will install all runtime dependencies and transpile the Javascript code to ES5.
Then this deploys a new version of your code that will be served from https://<PROJECT_ID>.firebaseapp.com
Demo
https://friendly-pix.npmstack.com