Vue Firebase Deploy

VueFirebaseDeploy.md

2021 Notes:

PREAMBLE: - make sure you have firebase cli installed: npm install -g firebase-tools in order to use the command line

1. Log into firebase and create a project: firebase login
   • create a new firebase project in the firebase GUI in the console, or there will be an option to create it from CL later as an option during firebase init process.
2. Make sure npm isn’t running anything any place in any terminal
3. cd into the root directory of your project and run: firebase init
   • Which Firebase feature do you want to use? Hosting
   • Associate this project dir w/ a Firebase project. [ A list of all your projects on Firebase will be output. Arrow down to the project and hit enter. ]
   • What do you want to use as your public directory? When you build a Vue.js project, it builds it into a dist folder. That folder is what we're meant to deploy. So for this question, type dist. Then, when you use firebase deploy it will look for the dist folder.
   • Configure as a single-page app (rewrite all urls to /index.html)? y
   • Set up automatic builds and deploys with GitHub? [Not sure, so I selected N ]

There, you've initialized your firebase project. You now have a .firebaserc and a firebase.json file in your project dir.

4. We now want to build our Vue.js application so that all the files go insider the dist dir, and THEN we want to deploy it.
   • npm run build to build our Vue.js application
   • After this completes, in dist you should see a css and js dir and an index.html file

OPTIONAL: To preview what will be deploy once you actually do deploy: Run firebase serve to serve up whatever is in dist dir. (Then, go to the link for the localhost that it spits out to acuatlly see it.)

5. To deploy (terminate all running process in your terminal first--read that somewhere): firebase deploy

6. To visit your app live, the url will take the format: https://<project ID>.web.app (e.g. https://vue-users-app-b2c2e.web.app)

   • the Project ID from GUI Console: Project Overview > Project Settings
   • Project ID is also in the .firebaserc file:

        {
          "projects": {
             "default": "vue-users-app-b2c2e"
           }
         }