Cloud Fundamentals: the course

Intro

Who is this course designed for?

Different Cloud models

React and Firebase

Google Cloud Function

GCF locally with env variables

AI and Cloud Functions

Food detection with Gemini

Cloud storage services

Delivering Content Faster

Conclusion and Quiz

React and Firebase

Understanding how to deploy a React application with Firebase Hosting

7 snippets

17 mins

React

Firebase

Giorgio Boa

FullStack Developer @ Qarik
Microsoft MVP

# Create the React application

Once upon a time you had to struggle with a thousand configurations and setups to create a React application, but now you can do everything with a few simple commands. One of the easiest ways to create a React project is by using Vite .

Vite is a modern build tool created by Evan You, the same developer behind Vue.js. It is designed to provide a faster and leaner development experience for modern web projects. You can use Vite to create front-end projects in seconds: React , Svelte , Lit , Qwik and many others modern frameworks are supported.

You need to install NodeJS to use Vite.

terminal

Assign a project name, i.e. my-app
Select React -> TypeScript
Go to the my-app folder and run npm install (alias: npm i)
Build your application with npm run build to verify it

The video below shows the whole process:

no audio

# What is Google Firebase hosting?

Firebase hosting is a fully managed hosting service from Google. It offers the ability to publish your web applications quickly and securely. An aspect not to be overlooked is the fact that it is free for the basic plan and offers secure deployment with HTTPS by default.

Requirements: You need to have a Google account to use the service.

# Firebase CLI

You can use the following command to install the Firebase CLI, it's called firebase-tools

terminal

Once the installation is finished you must execute this command to authenticate.

terminal

once logged in you can create your project within the Firebase console

and then, once the project is successfully created, you can run this command in your terminal

terminal

You will have to answer a series of questions as you can see in the snippet below.

terminal

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

React and Firebase

Understanding how to deploy a React application with Firebase Hosting

7 snippets

17 mins

React

Firebase

Giorgio Boa

FullStack Developer @ Qarik
Microsoft MVP

# Create the React application

You need to install NodeJS to use Vite.

terminal

Assign a project name, i.e. my-app
Select React -> TypeScript
Go to the my-app folder and run npm install (alias: npm i)
Build your application with npm run build to verify it

The video below shows the whole process:

no audio

# What is Google Firebase hosting?

Requirements: You need to have a Google account to use the service.

# Firebase CLI

You can use the following command to install the Firebase CLI, it's called firebase-tools

terminal

Once the installation is finished you must execute this command to authenticate.

terminal

once logged in you can create your project within the Firebase console

and then, once the project is successfully created, you can run this command in your terminal

terminal

You will have to answer a series of questions as you can see in the snippet below.

terminal

# Conclusion

Unblock the content

It's completely free!

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

# Deploy your application 🚀

Once the firebase init hosting process is finished you can create the following script in your package.json:

terminal

Now, by executing the deploy command, you can deploy your application. You will be shown the public address where your application is present as you can see in the snippet below.