How to deploy a Flutter Web App in a Second Firebase Hosting?

Issue

Inside a Firebase project called originalawesome I set up a second site on Firebase Hosting, then I have:

originalawesome.web.app
secondawesome.web.app

The first one (originalawesome) has a JS application in production.

In the second (secondawesome) I want to install a Flutter Web App and for this I am following the following steps:

firebase init
(I select Hosting)
(I select to use an existing project)
(I select the project - originalawesome) //secondawesome is not an option

There it asks me to select the directory to publish, so I suppose the Flutter Web application will publish on my site in production, which is wrong.

Reading the documentation in Share project resources across multiple sites , when deployments are to be made in different sites, the Deploy Targets are requested to be differential with the following command:

firebase target: apply hosting secondawesome secondawesome

However, when I run it I get an error because I don’t have a firebase json file yet.

Error: Not in a Firebase app directory (could not locate
firebase.json)

The question is, How can I deploy a Flutter Web App on a second Firebase Hosting without deleting the previous one?

Solution

After a fair amount of trial and error the solution is as follows:

In the App Root Directory (it’s very important):

    flutter build web --web-renderer html //In my case, I will 
//generate html web rendered. It will create a firebase.json 
//file and others

    firebase target:apply hosting originalawesome originalawesome
    firebase target: apply hosting secondawesome secondawesome
    //It will create records in .firebaserc file

In firebase.json file, you need to include:

{
  "hosting": {

    "target": "secondawesome", //deploy target 
//(previously created on Firebase Hosting Console)

    "public": "build/web", //build/web is the directory of the Flutter Web App build
///rest of file

Now yes, run…

firebase init

? What do you want to use as your public directory? build/web

? Configure as a single-page app (rewrite all urls to /index.html)?
Yes

? Set up automatic builds and deploys with GitHub? No

? File build/web/index.html already exists. Overwrite? No

To finish and upload the files to the Firebase Hosting …

firebase deploy --only hosting:secondawesome

I hope it serves someone else!!

Answered By – David L

Answer Checked By – Willingham (FlutterFixes Volunteer)