How to Create Multiple Vue Apps Under One Project - firebase

Question

I'm new to Vue js and I'm developing an e-commerce project with firebase. I saw in firebase there are multiple hosting features which will help me to host client and admin side in two different domains. I don't know how to create two apps in one project folder like this example in angular. If any knows please share your thoughts

Answer 1

Follow this
Step 0 - Firebase setup
In this tutorial my-app is my Firebase project id
my-app-public Web App is associate to my-app Hosting site (default hosting site takes the project id as name)
my-app-admin Web App is associate to my-app-admin Hosting site
Step 1
Move your public and admin apps in a new directory
my-app/
├── public-site/
└── admin-site/
Step 2
Init from my-app/ with firebase and of course select Hosting feature to set up
firebase init
Do not pay attention to firebase asking for the public name folder
Step 3
Set the build path of your apps to the targets public and admin.
Edit the firebase.json file and add your apps.
{
"hosting": [
{
"target": "public",
"public": "public-site/dist",
"ignore": [
"**/.*",
"**/node_modules/**"
]
},
{
"target": "admin",
"public": "admin-site/dist",
"ignore": [
"**/.*",
"**/node_modules/**"
]
}
],
}
Step 4
Link the targets to yours Firebase Hosting Sites. (Hosting Site != Web App)
Edit the .firebaserc, if it doesn't exist create it at the root of my-app/
{
"projects": {
"default": "my-app", # firebase project id
},
"targets": {
"my-app": { # firebase project id
"hosting": {
"public": [
"my-app" # public hosting site id
],
"admin": [
"my-app-admin" # admin hosting site id
]
}
},
}
}
Now if you type
firebase target
You should get
[ hosting ]
public (my-app)
admin (my-app-admin)
Step 5
Build your both apps
cd public-site/
npm run build
Make sure your apps are build in the dist/ folder
Step 6
Deploy both apps
firebase deploy --only hosting
Or deploy only the public app
firebase deploy --only hosting:public
Your apps should be deployed to
https://my-app.firebaseapp.com/
https://my-app-admin.firebaseapp.com/
BONUS - Build and deploy your apps on merge on master (Github)
First use
firebase init hosting:github
and follow the CLI instructions, it should ask your repo
One it's done check if your repo has the firebase service account key
Go on your github repo > settings > security
And you should see a secret env variable named FIREBASE_SERVICE_ACCOUNT_MY_APP
Let's setup your github workflow in your project, remove the .yml files in .github/workflows generated by the previous command and create your own workflow (file name doesn't matter):
name: Deploy on PROD to Firebase Hosting
'on':
push:
branches:
- master # branch to target
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Install dependencies & build public-site
run: npm ci && npm run build
working-directory: public-site
- name: Install dependencies & build admin-site
run: npm ci && npm run build
working-directory: admin-site
- name: Deploy websites
uses: FirebaseExtended/action-hosting-deploy#v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_APP }}' # edit here
projectId: my-app # edit here
channelId: live
So every push/merge on master will be build each apps and deploy them on Firebase Hosting