0

I was building a small web app using Vue cli and webpack/babel. I've been working for a month using "npm run build" and placing the files created in th "dist" folder on my server. Now I would like to add Firebase to the project but "Firebase deploy" command doesn't build the same files. It actually creates a new placeholder index.html file and even if I replace that file file for my previous html I'll get loads of errors because all the other components are not there (no JS no CSS)...

This is my firebase setup. This is my Firabase setup:

These are the files I used to create using "Npm run build" in the "dist" folder These are the files I used to create using "Npm run build" in the "dist" folder

The new "Firebase deploy" files – now in the public folder – no JS no CSS! "Firebase deploy" files in the public folder

The errors I get now... The errors I get now...

It seems like now all the dependencies that were build nicely put together by the Vue Cli webpack/babel workflow are all gone. Any suggestions on how to fix this without having to start from scratch?

Now even if I type NPM run build i get errors:

enter image description here

Joao Alves Marrucho
  • 819
  • 9
  • 30

1 Answers1

0
  • With npm run build you build your Vue.js application, independently of Firebase.
  • It is not clear to me if you still build your app to the dist directory or to the public one. But, based on your Firebase setup ("What do you want to use as you public directory"), at the end you need to have ALL the files (incl. css and js) produced by npm run build in the public directory.

One simple solution is to change the public directory of Firebase to dist: you can do that in the firebase.json file and change "hosting": {"public": "public",... to "hosting": {"public": "dist", ....

A last point: you have answered No to the question "Configure as a single-page app". Normally, with a Vue.js app you should answer Yes.

Renaud Tarnec
  • 79,263
  • 10
  • 95
  • 121
  • It's irrelevant from where I want to build – the problem is that Vue CLI builds into "dist" by default and firebase grabs from "public". If I try to change the output directory of Vue CLI i open a can of worms and module export configuration since I am using Vue CLI/webpack and babel :( – Joao Alves Marrucho Feb 16 '21 at 19:35
  • I was actually not mentioning **from** where you build but **to** where :-) I've adapted the answer in order to be more clear. One simple solution is to change the public directory of Firebase to `dist`: you can do that in the `firebase.json` file and change `"hosting": {"public": "public",...` to `"hosting": {"public": "dist", ...`. – Renaud Tarnec Feb 16 '21 at 19:39
  • Thank you Renaud. I've tried that. Didn't work... Also as soon as initiated Firebase Tools it broke the way I used to build so now I get some errors even by type "npm run build" or serve... – Joao Alves Marrucho Feb 16 '21 at 19:39
  • I personally keep the two projects (Vue.js and Firebase) in totally different directories and do as explained in this answer: https://stackoverflow.com/questions/48851677/how-to-direct-vue-cli-to-put-built-project-files-in-different-directories – Renaud Tarnec Feb 16 '21 at 19:44
  • Now I just need to go back to back to where I was before i had installed firebase tools on this project which is revealing extremely difficult in itself. I think I'll just forget about Firebase once and for all... :( – Joao Alves Marrucho Feb 16 '21 at 19:48
  • "I'll just forget about Firebase once and for all" You shouldn't! :-) It's actually not caused by Firebase nor by Vue but by mixing the two project structures... Just start with a brand new project in another folder and it should be ok. – Renaud Tarnec Feb 16 '21 at 19:58