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 CONSOLEmenu.
- Click on the large blue
- 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
- Choose the menu on the left named
- When the sub-menu drops down select
- Click on the button
- When the sub-menu drops down select
- Lets follow the instructions and
Install Firebase tools
- Create a Vue.js project using the Cli.
- For my example I am going to name mine
$ 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
- 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
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
distfor 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
? 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 build's 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
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
You can see help for all the commands by typing
firebase in the commandline, you will see results like this:
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 project's 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 project's 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.