Now follow the steps given below to host your Static Web App on Firebase.
Install Node.js and npm
In this step, we will install node.js and npm which are required by the Firebase CLI (Command Line Interface) which we are going to install in Step 2. Follow the instructions below.
- Open the Official page for Node.js downloads, https://nodejs.org/en/download/, download Node.js for Windows by clicking the “Windows Installer” option.
- Run the downloaded Node.js Installer. Go with the flow i.e accept the license, select the destination, and authenticate for the install. Installing node.js automatically installs npm.
- Many a time, the npm installed with node.js is not up to date. Run the following command, , in cmd to update npm.
- To ensure both node.js and npm has been installed successfully, run the following commands. and . These commands should return the version of node.js and npm installed.
- Now you are ready to install the Firebase CLI.
Install the Firebase CLI
After you have installed node.js and npm, we are ready to install the Firebase CLI. Just note that the Firebase CLI requires Node.js version 5.10.0 or greater, so make sure that you have. Now follow the instructions below.
- Run the following command, , to install the Firebase CLI. You should now have a globally available firebase command available from any terminal window on your machine.
- Once you have installed the Firebase CLI, log in to your Firebase Account by running following command, , in cmd. This command will open an authentication screen in your browser to login into your firebase account.
- To test that authentication worked, you can run in cmd to see a list of all of your Firebase projects. The list should be the same as the projects listed at Firebase console.
Create Firebase Project
To host your static web app on firebase, you first need a Firebase project. If you don’t already have a firebase project then follow the instructions below to create one.
- Open Firebase Console in your browser.
- Click on Add project to create a new project.
- Your Firebase project is created now.
Initialize your project directory
Many common tasks performed by the CLI, such as deployment, require a Project Directory. A project directory is any directory that has a firebase.json configuration file. The project directory should generally be the same as your source control root, and firebase.json generally lives alongside README and other top-level files. Follow the instructions below to initialize your project directory.
Before initializing your project, make sure you have created a sub-directory/folder named public inside your project directory and move all you web app content inside this folder. And also create an index.html file inside this sub-directory(public).
Now follow the instructions below.
- Open cmd and change the current working directory to your project directory by running following command, .
- After changing the path to your project directory, run command in cmd.
- After running above command, it will ask you to choose the Firebase CLI features you want to use. It includes storage, database, hosting and some other. As right now, we are concerned with hosting you must choose hosting feature. And don’t worry you can always run init again later to add a new feature.
- Next, it will ask you to choose a default Firebase project. This associates the directory with a project so that when you run project-specific commands such as firebase deploy from within your project directory, the correct project is used. It is also possible to associate multiple projects (such as a staging and production project) with the same directory, which we will discuss later in this post.
- At last, it will ask you to choose your public directory which is public by default. And also it will ask a question in the context of single page application which you must answer as yes if you are deploying a single page application.
- Your project directory initialization is complete now.
Deploy your Static Web App content
- Now deploy your static web app content by running the command, in cmd.
- After successful deployment, it will show you the hosting URL. You can visit this URL to see your hosted content.
- In future also, if you make any changes to your static web app, you need to run above command to deploy changes to Firebase hosting.
- You can roll back Firebase Hosting deploys by visiting the Hosting panel for your project in the Firebase Console and choosing the Rollback action for the desired release.
- Hurray! You have successfully hosted your static web app on Firebase.
Before running firebase deploy command in cmd, you must change the path to your project directory.
Connect your Domain
If you have your own domain name, you can connect it to your firebase hosting. If you want to connect your domain then follow the instructions below, otherwise move to next step.
- Click on Connect Domain button.
- Then enter your domain name.
- After that add the provided A records to your domain by visiting your DNS provider or registrar. Your site will show a security certificate warning for a few hours until the certificate has been provisioned.
- Remember to remove your old A records and any AAAA records from your DNS provider. Also, some DNS providers use ‘@’ for your domain name.
- After your certificate will be provisioned, your domain will start pointing to firebase hosting.
You can associate multiple Firebase projects with the same working directory. For example, you may want to use one Firebase project for staging and another for production. Using different project environments allows you to verify changes before deploying to production. Thecommand lets you switch between aliases as well as create new ones.
Adding Project Alias
When you select a project during firebase init, an alias called default is created for you. To create a new alias, run command
This command allows you to select a Firebase project and give it a named alias. Alias definitions are written to a .firebaserc file inside your project directory.
Using project aliases
You can view a list of currently defined aliases for your project directory by running firebase use. To switch between aliases, run command
While using an alias, all project-specific commands (like firebase deploy ) will run against the currently used project. If only one alias is defined in your project directory it will be used automatically.
Now I have covered all the steps to deploy your static Web App to Firebase hosting. But if you want more information you can visit below-given links.
If you face any problem in the tutorial above, you can always leave a reply or reach me through the chat option given in bottom right corner of the window.