🚀Firebase to Deploy ReactJS & VueJS Apps for Free
Tags: react, deployment, hosting, firebase
Published: 2022-12-25 21:43:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8qjj20dzvid3urnep19.png)

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_](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ble5qxxoz8ptdzdl6xu.png) _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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkejo6ts66hqciij3und.png)_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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rao5vljrw7mbt4jcuveu.png)_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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e11qzk9082u3ibhi10wk.png)_Figure 4.3 Add your project_



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76mzfp3hp36wkx3nhm2f.png)_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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2daspy8batfcgvj4sh3.png)_Figure 4.5 Build menu_


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pseq8x45gm8ura23xbfd.png)_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`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zei33gdsw7hzmxandx9.png)_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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exqg3rm12q350gkwl7dy.png)_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).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot8tznnsp99qkwkw2ubi.png)_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).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n31xofp8qpqetx5uiyq.png)_Figure 4.10 Public directory_

For the following steps, you can answer the next three questions as shown in Figure 4.11.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xftb6636d74yc4qetncj.png)_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](https://gcoskun-react-app.web.app/) that I deployed with Firebase hosting service.

Happy learning …

You can reach out to me through [LinkedIn](https://www.linkedin.com/in/gulcan-coskun) and [Medium](https://medium.com/@gulcancoskun.a).

## 6. References

1. [Udemy VueJS Course](https://www.udemy.com/course/vuejs-2-the-complete-guide/)
2. [Firebase Tutorials](https://firebase.google.com/docs/web/setup)
3. https://blog.logrocket.com/everything-you-need-know-about-react-scripts/