Scribd
Upload
4 views

3-firebase-hosting

The document outlines the steps to set up Firebase Hosting for a project, starting with logging into the Firebase console and installing Firebase CLI. It details the initialization of the project, selecting the appropriate features, and configuring the public directory to 'dist' for deployment. Finally, it instructs on building the application and deploying it using Firebase commands, with a note on accessing the hosting information afterward.

Uploaded by

someonehaha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

3-firebase-hosting

The document outlines the steps to set up Firebase Hosting for a project, starting with logging into the Firebase console and installing Firebase CLI. It details the initialization of the project, selecting the appropriate features, and configuring the public directory to 'dist' for deployment. Finally, it instructs on building the application and deploying it using Firebase commands, with a note on accessing the hosting information afterward.

Uploaded by

someonehaha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Firebase Hosting

Complément cours

Hosting feature
Go to your console https://console.firebase.google.com/
Selection Hosting feature

Click on Get started which will provide you with all the steps we will need to take.
First we need to install Firebase CLI : npm install -g firebase-tools
Firebase tools needs to be install globaly (-g). After you install it on your terminal, click next.

The next step is to init the project

For this purpose we need to login to firebase and init the project by running the two shown in step 2.

UM6P-CC | SPD-1
The firebase login command will log you to your google account associated with your console in order to
enable you deploying your applications and google can authenticate the user making the deployment.
The firebase init command will initialize your project

It will ask for firebase feature that we want to use, we are not going to select. DO NOT SELECT
FIRESTORE. The feature is already configured through our JS SDK in folder firebase/config.js and
was already set up and configured in the backend (console). Look for hosting and select it (by clicking on
space bar) then enter

Select Use an existing project, then it will list all your created project in your console

Select the corresponding project to use.

UM6P-CC | SPD-1
The next step is to configure the public directory for your project. The default one is called public but we
will need to change it to dist. Because when vue build application, it builds it into a DIST folder and
that's the folder we want to deploy.

Then it will ask if you want to configure as a Single-page app. In this case we need to say yes for this
because we're creating a single page application and no matter what route or URL the user goes to we
always send back the same index or HTML file and then it's vue that takes over this and injects the
contents (component) relevant for that route.

If you get File dist/index.html already exists. Overwrite it, respond yes.
So firebase init is now complete, congrat ^^.

UM6P-CC | SPD-1
Go back to your console, and click next, to go to the next step.

Before to deploy our application, we need to build it. Click Continue to the console without executing the
command firebase deploy.

Build the application


To build your application run : npm run build.

Once done, you will notice some files were added to dist folder in your project
Now run firebase deploy.

UM6P-CC | SPD-1
Go back to your console, in hosting feature menu, you will have some related information about who
deployed and the link to see your app

UM6P-CC | SPD-1

You might also like