2018/05/18

Getting start with Firebase - Part 1 - Preparing the environment.

This is the first part of how to get start with Firebase.

OS: MS-Windows 8.1
Editor: Visual Studio Code.

Install Vsiual Studio Code

Go to https://code.visualstudio.com/ to download and install the software.




Install Node.js

Download and install the latest LTS version from https://nodejs.org/en/.



 Installing the Firebase Command Line Tool

Launch the Command Prompt Window. Then type in "npm install -g firebase-tools" to start the download and installation process.

Microsoft Windows [版本 6.3.9600]
(c) 2013 Microsoft Corporation. 著作權所有，並保留一切權利。

C:\Users\WeiHsiungHuang>npm install -g firebase-tools
npm WARN notice [SECURITY] lodash has 1 low vulnerability. Go here for more deta
ils: https://nodesecurity.io/advisories?search=lodash&version=3.10.1 - Run `npm
i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more i
nfo.
npm WARN notice [SECURITY] superstatic has 1 high vulnerability. Go here for mor
e details: https://nodesecurity.io/advisories?search=superstatic&version=5.0.1 -
 Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to
get more info.
npm WARN notice [SECURITY] open has 1 critical vulnerability. Go here for more d
etails: https://nodesecurity.io/advisories?search=open&version=0.0.5 - Run `npm
i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more i
nfo.
npm WARN notice [SECURITY] lodash has 1 low vulnerability. Go here for more deta
ils: https://nodesecurity.io/advisories?search=lodash&version=2.4.2 - Run `npm i
 npm@latest -g` to upgrade your npm version, and then `npm audit` to get more in
fo.
npm WARN notice [SECURITY] hoek has 1 moderate vulnerability. Go here for more d
etails: https://nodesecurity.io/advisories?search=hoek&version=2.16.3 - Run `npm
 i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more
info.
C:\Users\WeiHsiungHuang\AppData\Roaming\npm\firebase -> C:\Users\WeiHsiungHuang\
AppData\Roaming\npm\node_modules\firebase-tools\bin\firebase

> @google-cloud/functions-emulator@1.0.0-beta.4 postinstall C:\Users\WeiHsiungHu
ang\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\@google-cloud\f
unctions-emulator
> node scripts/upgrade-warning


If you're using the Emulator via the Firebase CLI, you can
disregard this message.

If you're upgrading @google-cloud/functions-emulator, these
are the recommended upgrade steps:

1.  Stop the currently running emulator, if any:

        functions stop

2.  Uninstall the current emulator, if any:

        npm uninstall -g @google-cloud/functions-emulator

3.  Install the new version of the emulator:

        npm install -g @google-cloud/functions-emulator

If you have trouble after upgrading, try deleting the config
directory found in:

    ~/.config/configstore/@google-cloud/functions-emulator

Then restart the emulator. You can also check for any renegade
Node.js emulator processes that may need to be killed:

    ps aux | grep node

+ firebase-tools@3.18.4
added 533 packages in 1208.603s

C:\Users\WeiHsiungHuang>

Type in "npm i npm@latest -g" to upgrade the npm version.

C:\Users\WeiHsiungHuang>npm i npm@latest -g
C:\Users\WeiHsiungHuang\AppData\Roaming\npm\npx -> C:\Users\WeiHsiungHuang\AppDa
ta\Roaming\npm\node_modules\npm\bin\npx-cli.js
C:\Users\WeiHsiungHuang\AppData\Roaming\npm\npm -> C:\Users\WeiHsiungHuang\AppDa
ta\Roaming\npm\node_modules\npm\bin\npm-cli.js
+ npm@6.0.1
added 682 packages in 158.487s

C:\Users\WeiHsiungHuang>

Login to Firebase in Visual Studio Code

1. Launch Visual Studio Code.

2. Select "View" -> "Integrated Terminal'.

3. Enter "firebase login" in the terminal window.


4. Click on the URL.


5. Allow Node.js to pass the firewall.


6. Select the Google account to be used for authentication.


7. Allow Firebase CLI to access the selected Google Account.


8. Successful login.


9. The message will appear in the terminal window of Visual Studio Code as well.


Create a new Firebase project

Type in "firebase init hosting" in the terminal window.




D:\Firebase Projects>firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  D:\Firebase Projects

? Are you ready to proceed? Yes

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: [create a new project]

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

D:\Firebase Projects>

The following folder and files are created.


The newly created folder are files are shown in the Explorer window as well.


Serving the Firebase App locally

Error: No project active. Run with --project <projectId> or define an alias by
running firebase use --add


Type in "firebase use --add".


Use arrow key to select "fir-project-01-20dc9" (it's the only project that has been created for testing).


Enter the alias to be used. In my case, I gave it "testing".


Enter "firebase serve" again.

Move mouse to "http://localhost:5000/" then click on the link while holding the "Ctrl" key to open the link in a browser.


Below are the messages shown in the terminal window following the Ctrl + click of the link.

127.0.0.1 - - [17/May/2018:23:27:42 +0000] "GET / HTTP/1.1" 200 3505 "-" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:43 +0000] "GET /__/firebase/5.0.2/firebase-app.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:43 +0000] "GET /robots.txt HTTP/1.1" 200 3505 "-" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:43 +0000] "GET /__/firebase/init.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:44 +0000] "GET /__/firebase/5.0.2/firebase-messaging.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:44 +0000] "GET /__/firebase/5.0.2/firebase-auth.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:44 +0000] "GET /__/firebase/5.0.2/firebase-database.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:44 +0000] "GET /__/firebase/5.0.2/firebase-storage.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"
127.0.0.1 - - [17/May/2018:23:27:45 +0000] "GET /favicon.ico HTTP/1.1" 200 3505 "http://localhost:5000/" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36"

Note, to exit, press ctrl + c at the same time.

Below is the info. display in the browser which is the index.html created by the "firebase init hosting" command.




Serving the Firebase App on the internet

1. Enter "firebase deploy" in terminal.

A URL (https://fir-project-01-20dc9.firebaseapp.com) is given in the bottom of the terminal window.


2. Move mouse to the URL and click on it while pressing the ctrl key to launch a browser and display the content.


Prepare the boilerplate code

Remove the code highlighted in gray.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/5.0.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/5.0.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-database.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>

    <style media="screen">
      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
      @media (max-width: 600px) {
        body, #message { margin-top: 0; background: white; box-shadow: none; }
        body { border-top: 16px solid #ffa100; }
      }
    </style>
  </head>
  <body>
    <div id="message">
      <h2>Welcome</h2>
      <h1>Firebase Hosting Setup Complete</h1>
      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
    </div>
    <p id="load">Firebase SDK Loading&hellip;</p>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        //
        // firebase.auth().onAuthStateChanged(user => { });
        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
        // firebase.messaging().requestPermission().then(() => { });
        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
        //
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

        try {
          let app = firebase.app();
          let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
          document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
        } catch (e) {
          console.error(e);
          document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
        }
      });
    </script>
  </body>
</html>

After removing the code, point the script tag to a new file "app.js" where the actual code will be kept.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/5.0.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/5.0.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-database.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>

  </head>
  <body>

    <script src="app.js">

    </script>
  </body>
</html>

In the terminal window of Visual Studio Code, enter "type nul >> public/app.js" to create "app.js" (note, this command is the MS-Windows equivalent of "touch public/app.js". The content of the file will be preserved if it already exists).

"app.js" is created and placed together with index.html under the "public" folder.


Enter "firebase serve" in terminal window. Press down the control key and click on "http://localhost:5000/" to launch the firebase app locally.

Put the browser and Visual Studio Code side-by-side. This will make it easy to check out the changes made.


References:

Firebase - Ultimate Beginner's Guide
https://www.youtube.com/watch?v=9kRgVxULbag
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)