# Lesson 24 Firebase Deploy

# Firebase

Firebase is a set of tools from Google for developing applications. It abstracts away most of the complex server-side features like user authentication, data persistence, file storage, and services, so you can focus on building your application.

# Hosting a Vue.js Project in Firebase

Video Link Hosting Vue Project in Firebase
- Length: 11:31 minutes
- Size: 35.8 MB

# Free Firebase project (Spark Plan)

Using a google account you can create projects in Google Firebase. The free level plan is more than enough for testing and light usage. Each project will include a custom domain (eg. https://active-awards.firebaseapp.com/) and https. If you own a domain, you can change to your own domain.

Use a google login to sign in to the firebase site https://firebase.google.com/
Click on the GO TO CONSOLE menu.
Click on the large blue Add project button.
Enter a project name active-awards (You can choose any name you want, I will use active-awards for my example), select the I accept the controller-controller terms..., and I agree that I am using Firebase services in my app and I agree to the applicable terms. checkbox, then click the Create project button.
Choose the menu on the left named Develop
1. When the sub-menu drops down select Hosting
2. Click on the button Get started
Lets follow the instructions and Install Firebase tools
1. Create a Vue.js project using the Cli.
2. For my example I am going to name mine active-awards
$ vue create active-awards
$ Manually select features
$ (*) Babel
$ (*) Router
$ Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
$ In dedicated config files
$ Save this as a preset for future projects (y/N) N
$ cd active-awards
In your project command line (terminal), use the command listed to install firebase-tools globally for all future projects. (On future projects you can skip this step)

$ npm install -g firebase-tools
click the Continue button
- Next we are going to sign into our Google firebase account
$ firebase login
- Use the same login as you used in step 1.
Initiate this project, to start with we are going to only use the Hosting feature, so only choose hosting.

$ firebase init ? Are you ready to proceed? (Y/n) Y ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
( ) Database: Deploy Firebase Realtime Database Rules
( ) Firestore: Deploy rules and create indexes for Firestore
( ) Functions: Configure and deploy Cloud Functions
> (*) Hosting: Configure and deploy Firebase Hosting sites ( ) Storage: Deploy Cloud Storage security rules
Next you will get the chance to choose the project you created in step 4.

? Select a default Firebase project for this directory:
[don't setup a default project]
> active-awards (active-awards)
[create a new project]
The default directory is (public) but we need to use dist for Vue.js because that is what the Cli sets up. The Vue build will replace the index.html created by the firebase init.

? What do you want to use as your public directory? (public) dist
Next it will ask you if you want to use history mode with the routing, we will choose Y

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) Y

you should see something like this.

=== 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 builds output directory.

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

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

+  Firebase initialization complete!

If you look at the project folder in VS Code, you will see a few new files created by firebase.

    > .firebase     (Directory)
    .firebaserc     (File)
    .firebase.json  (File)

Next we will use the Vue Cli to build our project for distribution.

$ npm run build

DONE  Compiled successfully in 4814ms

File                                 Size               Gzipped

dist\js\chunk-vendors.90482902.js    107.03 KiB         37.93 KiB
dist\js\app.baf707c4.js              5.74 KiB           2.19 KiB
dist\js\about.ad763791.js            0.44 KiB           0.31 KiB
dist\css\app.20847301.css            0.42 KiB           0.26 KiB

Images and other types of assets omitted.

DONE  Build complete. The dist directory is ready to be deployed.
INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Then use the Firebase Cli to push your newly built project to the Firebase servers.

$ firebase deploy

+ Deploy complete!

Project Console: https://console.firebase.google.com/project/active-awards.firebaseapp.com/overview
Hosting URL: https://active-awards.firebaseapp.com/

Go to the website listed under Hosting URL to see your website.
Next Visit the console to see your projects details.
- Now start editing your Vue.js project. When you are ready to push changes to the Firebase servers, follow these steps.
$ npm run build
$ firebase deploy

# Firebase Cli

There is an entire Cli commandline tool installed as part of the firebase-tools we installed. So far we have only seen the command for init a new project and deploy.
You can see help for all the commands by typing firebase in the commandline, you will see results like this:

$ firebase

Usage: firebase [options] [command]

Options:
  -V, --version                                   output the version number
  -P, --project <alias_or_project_id>             the Firebase project to use for this command
  -j, --json                                      output JSON instead of text, also triggers non-interactive mode
  --token <token>                                 supply an auth token for this command
  --non-interactive                               error out of the command instead of waiting for prompts
  --interactive                                   force interactive shell treatment even when not detected
  --debug                                         print verbose debug output and keep a debug log file
  -h, --help                                      output usage information

Commands:
  auth:import [options] [dataFile]                import users into your Firebase project from a data file(.csv or .json)
  auth:export [options] [dataFile]                Export accounts from your Firebase project into a data file
  database:get [options] <path>                   fetch and print JSON data at the specified path
  database:push [options] <path> [infile]         add a new JSON object to a list of data in your Firebase
  database:set [options] <path> [infile]          store JSON data at the specified path via STDIN, arg, or file
  database:remove [options] <path>                remove data from your Firebase at the specified path
  database:update [options] <path> [infile]       update some of the keys for the defined path in your Firebase
  database:profile [options]                      profile the Realtime Database and generate a usage report
  database:settings:get [options] <path>          read the realtime database setting at path
  database:settings:set [options] <path> <value>  set the realtime database setting at path.
  firestore:delete [options] [path]               Delete data from Cloud Firestore.
  firestore:indexes [options]                     List indexes in your projects Cloud Firestore database.
  deploy [options]                                deploy code and assets to your Firebase project
  hosting:disable [options]                       stop serving web traffic to your Firebase Hosting site
  functions:log [options]                         read logs from deployed functions
  functions:shell [options]                       launch full Node shell with emulated functions
  functions:config:clone [options]                clone environment config from another project
  functions:config:get [path]                     fetch environment config stored at the given path
  functions:config:set [values...]                set environment config with key=value syntax
  functions:config:unset [keys...]                unset environment config at the specified path(s)
  functions:delete [options] [filters...]         delete one or more Cloud Functions by name or group name.
  experimental:functions:shell [options]          launch full Node shell with emulated functions. (Alias for firebase functions:shell.)
  help [command]                                  display help information
  init [feature]                                  setup a Firebase project in the current directory
  list                                            list the Firebase projects you have access to
  login [options]                                 log the CLI into Firebase
  login:ci [options]                              generate an access token for use in non-interactive environments
  logout                                          log the CLI out of Firebase
  open [link]                                     quickly open a browser to relevant project resources
  serve [options]                                 start a local server for your static assets
  setup:web                                       display this projects setup information for the Firebase JS SDK
  setup:emulators:database                        downloads the database emulator
  setup:emulators:firestore                       downloads the firestore emulator
  target [type]                                   display configured deploy targets for the current project
  target:apply <type> <name> <resources...>       apply a deploy target to a resource
  target:clear <type> <target>                    clear all resources from a named resource target
  target:remove <type> <resource>                 remove a resource target
  tools:migrate [options]                         ensure your firebase.json format is up to date
  use [options] [alias_or_project_id]             set an active Firebase project for your working directory

You can see what options are available for firbase deploy with this command

$ firebase help deploy

Usage: deploy [options]

deploy code and assets to your Firebase project

Options:
  -p, --public <path>      override the Hosting public directory specified in firebase.json
  -m, --message <message>  an optional message describing this deploy
  -f, --force              delete Cloud Functions missing from the current working directory without confirmation
  --only <targets>         only deploy to specified, comma-separated targets (e.g. "hosting,storage"). For functions, can specify filters with colons to scope function deploys to only those functions (e.g. "--only functions:func1,functions:func2"). When filtering based on export groups (the exported module object keys), use dots to specify group names (e.g. "--only functions:group1.subgroup1,functions:group2)"
  --except <targets>       deploy to all targets except specified (e.g. "database")
  -h, --help               output usage information

# Assignment due for discussion next class and checked into GitHub by the Monday after that

Start building your project, and deploy what you have to a project on Firebase hosting.
Make sure to name your project in Vue.js and Firebase the same if possible.
Send the link to your projects webpage in Slack.

# Recommended links to look at

# Next Lesson

Lesson 25 Firebase User Login