DEV Community

Cover image for šŸš€Firebase to Deploy ReactJS & VueJS Apps for Free
Gulcan COSKUN
Gulcan COSKUN

Posted on • Updated on

šŸš€Firebase to Deploy ReactJS & VueJS Apps for Free

Image description

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_ 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 descriptionFigure 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 descriptionFigure 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 descriptionFigure 4.3 Add your project

Image descriptionFigure 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 descriptionFigure 4.5 Build menu

Image descriptionFigure 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 descriptionFigure 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 descriptionFigure 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 descriptionFigure 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 descriptionFigure 4.10 Public directory

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

Image descriptionFigure 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.

6. References

  1. Udemy VueJS Course
  2. Firebase Tutorials
  3. https://blog.logrocket.com/everything-you-need-know-about-react-scripts/

Top comments (2)

Collapse
 
aungmyatmoe profile image
Aung Myat Moe

I would like to use vercel because of their simplicity

Collapse
 
gulcanc profile image
Gulcan COSKUN

it's also a good option