3 January 2018 / portfolio

Friendly Pix Web

Friendly Pix is a place where you can share photos, follow friends and comment on photos.

Friendly-Pix4

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 of index.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

Source

https://github.com/sethbergman/friendly-pix