In this tutorial, we will see an easy way how to deploy our javascript framework applications using Firebase Hosting.
1. What is Application Deployment?
Application deployment is a process of installing, configuring, updating, and enabling one application available for use.
2. Firebase Hosting
Firebase is an app development platform that helps us build and grow apps. We can deploy our JavaScript framework apps quickly and for free with Firebase.
3. Creating Deployable Resources
Figure 3.1 Deployable resources
Assume that we have created a project, and we want to upload it into a static host. If we have a very simple project that contains HTML, CSS, and JavaScript files without any project setup, then we can take these files and upload them to a server. If we have a complex project (created with Vue CLI or anything like that), we have a few more steps to do. We first need to transform our code to regular JavaScript in a way that the browser will be able to understand it.
4. Steps to Deploy our App to Firebase Hosting
4.1 Building our project
In our Vue.js or React.js project, we have several files or components. These individual files need to be merged or combined. This is one of the biggest benefits of the build script. In the package.json file, we can find all the scripts that can be executable (Figure 4.1).
Figure 4.1 Scripts in a package.json file
In the terminal, we go to our project folder and run this command:
npm run build
This command converts the code such that the browser can understand and optimize it to make it as small and efficient as possible. Once this process is finished, we will find a different folder in our project folder. This folder can be automatically named ādistā, āpublicā, or ābuildā. It will contain the index.html file, the javascript folder, and the CSS folder, all minified and optimized to take up space as little as possible (Figure 4.2).
Figure 4.2 Created build folder
4.2 Creating A Firebase Hosting Account
We have to go to Firebase Hosting and create our account.
4.3 Adding our project for hosting
Once we have created an account on Firebase Hosting, we click on Get Started and then add our project with a specific name (Figure 4.3). We click on the continue button and we will see that our project is ready for the next steps (Figure 4.4).
Figure 4.3 Add your project
Figure 4.4 Create your project
4.4 Build and hosting
After our project is successfully added with a specific name, we will see the build menu on the left (Figure 4.5). Click on āHostingā under this menu and then click on āGet startedā (Figure 4.6). Afterward, we see that we need to install an extra tool. In the next step, we will learn the extra tool.
Figure 4.5 Build menu
Figure 4.6 Hosting with Get started
4.5 Set up Firebase Hosting
4.5.1 Install Firebase CLI
We will run the following command in our terminal, it will install the required extra tool on our machine provided by Firebase.
npm install -g firebase-tools
Once the installation is finished, we can do a Firebase version check to make sure that everything is working properly.
firebase --version
4.5.2 Firebase Login and Init
In the next step, we need to log in by running āfirebase loginā in the terminal. This should open up a tab in a browser and allow us to log in.
firebase login
Figure 4.7 Firebase login and init
Next, we need to run āfirebase initā, this will ask us a couple of questions.
firebase init
First, it asks us which part of firebase we want to manage with this command line interface. Since we want to host our project, we need to select āhosting ā with arrow keys and press space to mark it, and then press enter (Figure 4.8).
Figure 4.8 Firebase features
The next question is whether we want to create a new project or use an existing one. Since we already have created a project, we select āuse the existing oneā. This will list all available projects and we can scroll through with the arrows, then we select the project that we have just created and click enter (Figure 4.9).
Figure 4.9 Select an existing project
The following question asks us what our public directory should be. It is a very important step because this is the directory where the files to be uploaded are located (To remember that, we can read again 4.1 Building our project section). In my case, it is the ābuildā folder, but depending on your project, it can be ādistā, ābuild ā or āpublic ā folders, so check your folder name and type the name of your folder, and press enter (Figure 4.10).
Figure 4.10 Public directory
For the following steps, you can answer the next three questions as shown in Figure 4.11.
Figure 4.11 Set up questions
4.5.3 Firebase Deploy
Ready to deploy our web application? This is the last step, we run the following command in our terminal.
firebase deploy
Awesome! Now we can visit the generated URL and share our project seamlessly!
5. Conclusion
In this article, we have learned how to deploy an application with Firebase hosting service. It doesnāt matter with which framework we developed the project, we just need to pay attention to our public directory folder name. Thus, we can easily use Firebase hosting service for our applications. Also, it is free!
As an example, you can have a look at my last React project that I deployed with Firebase hosting service.
Happy learning ā¦
You can reach out to me through LinkedIn and Medium.
Top comments (2)
I would like to use vercel because of their simplicity
it's also a good option