Vue.js not building correctly in 'dist' folder 'npm run build'

 'npm run build' 'dist' folder not working.

I'd been hitting a bit of a brick wall with this task, so thought it'd be a good idea to commit it to the blog. Incase someone else finds it an can save themselves a heap of time. The task I was trying to achieve was

'How to host a Vue.js project on Firebase'  .  

And I was following this blog and youtube video for guidance. 

How to deploy vue.js applications with firebase hosting

And Net Ninja's 

Firebase Hosting Tutorial #4 - Deploying a Vue Site

But on a site ( that was already built and working locally ) I could only see the Firebase hosting holding message . 

'Firebase Hosting Setup Complete' 

I could however could create a new Vue.js website ( boiler plate ) and work from that, but building up from scratch again would be excruciating. 

Let's take a look at process I was following and where it was getting stuck. 

$. firebase init

Scroll down to the first 'Hosting config' choice and click on 'spacebar' and then 'return'. 


There is already a public folder in use, so we'll want to set the public directory as 'dist' 

As we're using Vue.js which is a javascript app that rewrites all the pages through the index page, then we need to select 'y' in response to , rewrite all urls to /index.html . This creates a dummy index page.

We don’t want to deploy this , we now want to build our vue application so that all the files go inside this ‘dist’ folder and then we want to deploy it.


1 npm run build

And we should now be able to view our site with.

1firebase serve

 

And this gives us the same ‘Firebase Hosting’ message we’re seeing before

On my basic vue.js install though, I could see that it was working fine. One thing that caught my eye was that the 'dist' folder was still empty. Hold on ! No, the issue was another 'dist' folder had been created and I had one in the 'root' of the project and one in the 'app' folder.

1. I removed both the ‘dist’ folders and started again.

2. Ran ‘fiebase init’ and chose the hosting as before.

3. The ‘dist’ folder was created in Root . But I manually moved it to the ‘app’ folder

4. I then ran ‘npm run build’ . this created the new files.

5. In ‘firebase.json’ I had to add the following code
   
   

   1 "hosting": { 2 "public": "app/dist",

    

6. Ran ‘firebase serve’.

   
   So I have the site showing using ‘firebase serve’ .

1. 
firebase deploy --only hosting

And I can now see it on the app online :) I hope this saves someone a heap of time, as it took me a while to work this one out :/