Hey everyone, I’m new to Vue and Firebase and I’m a bit confused about my project structure. I started by creating a Vue project with the CLI. Then I used firebase init in the same folder and picked the functions option. Now I’ve got a functions folder inside my Vue project with its own node_modules and package.json.
My folder structure looks like this:
project-root/
node_modules/
build/
functions/
node_modules/
package.json
main.js
public/
src/
package.json
app.js
Is this normal? Should I have two separate package setups? What’s the right way to handle this? I haven’t written any actual code yet, so I’m wondering if I should just start over. Any advice would be super helpful. Thanks!
yo john, that setup looks legit! i’ve done vue+firebase projects before and thats exactly how it should look. the separate package stuff is normal cuz your vue app and firebase functions are like different beasts, ya know? one’s for the browser, the other’s for firebase servers. don’t sweat it, you’re on the right track. no need to start over, just keep rollin with what you got!
The structure you’ve got is actually quite normal when integrating Firebase Functions with a Vue project. It’s not a mistake, but a deliberate separation of concerns. Your Vue app and Firebase Functions are essentially two different environments - one runs in the browser, the other on Firebase’s servers.
Having separate package.json files and node_modules folders allows you to manage dependencies for each environment independently. This is crucial because your Vue app might need vue-router, while your Functions might require express.
You don’t need to start over. This setup gives you flexibility to develop and deploy your Vue app and Firebase Functions separately. Just remember to cd into the functions directory when you’re working on your cloud functions, and stay in the root when working on your Vue app.
If you’re concerned about duplication, you could look into monorepo setups, but for most projects, your current structure works perfectly fine.
Hey John_Fast, your project structure is actually spot-on for a Vue + Firebase setup. I’ve been down this road before, and it’s totally normal to have separate package.json files and node_modules folders for your Vue app and Firebase functions.
Here’s why it’s set up this way: Your Vue app runs in the browser, while Firebase functions run on Firebase’s servers. They’re like two different worlds, each needing its own set of tools. Keeping them separate makes sure they don’t step on each other’s toes.
From my experience, this setup works great for most projects. You can develop and deploy your Vue app and Firebase functions independently, which is super handy. Just remember to switch to the functions directory when working on cloud functions.
If you’re worried about duplicating stuff, you could look into monorepos, but honestly, for most projects, your current structure is just fine. No need to start over – you’re on the right track!