Search code examples
firebasevue.jsdirectorydirectory-structure

How to use vue.js and firebase (directory-structure)

When you install firebase, the 'public' folder and 'index.html' are created automatically. I'm not sure where to put the 'public' folder in the current vue project file structure. The 'localhost: 8080' screen is displaying correctly, but the screen using firebase hosting is not showing.

This path is a Vue project. C:\Users\username\public\vue-project

And this path is a Firebase's 'public' folder. C:\Users\username\public

Then I ran 'firebase deploy' in cmd.

  1. cd C:\Users\username>firebase deploy enter image description here
  2. cd C:\Users\username\public>firebase deploy enter image description here
Solution

  • If, as you mention in your comments above, you still see the default Firebase "Welcome" page it means that probably you didn't overwrite it correctly.

    You should put the entire content of your vue.js dist folder (generated through npm run build) into the public folder of Firebase hosting (and overwrite the default index.html file initially generated by the Firebase project setup script).

    Then in you firebase.json file you have the following rewrite in order to handle the Single Page Application behavior of you vue.js application.

    {
  "hosting": {
    "public": "public",
    ...
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}