host react website in firebase fast cdn hosting




Firebase is a full packages for web/apps development, its by Google And the basic plan is totally free*. that plan is enough to run starting phrase of web or mobile application. hosting a static web page is very easy and simple. they have all good documentation for web hosting. but i also share how i did host my react app on Firebase.  With its ease of use and robust ecosystem, it's no wonder that developers are choosing ReactJS to build their web applications. One of the go-to platforms for hosting these applications is Google's Firebase. Firebase provides a plethora of features such as real-time databases, authentication, cloud storage, and hosting.

In this blog post, I will guide you through the process of hosting your ReactJS app on Firebase, with detailed steps and console commands to ensure a seamless deployment experience.

Prerequisites:


1. A ReactJS app that you want to host.
2. Node.js and npm installed on your computer.
3. A Firebase account.
first test and confirm your web site is working locally,
if its working first make backup for your public/index.html page(if firebase replace it we can recover)

 Install Firebase CLI
The first step is to install the Firebase command-line interface (CLI) on your computer. The CLI allows you to interact with Firebase services directly from your terminal. To install the Firebase CLI, run the following command in your terminal

install firebase cli
npm install -g firebase-tools

 Log in to Firebase
After installing the Firebase CLI, you will need to log in to your Firebase account. Run the following command:


firebase login


then go to your react project root and perform npm run build. it will create build folder inside of your project root, now open cmd/console in your project root and perform

firebase init



use arrow keys and select "hosting:configure and deploy firebase hosting sites"
press space bar to select
sign in will ask if you not signed with firebase cli
you can create new project or select exsisting project,
Now it will ask "What do you want to use as your public directory?" it have default "public". clear it and type "build"(because we gonna host build verison of react project).
now it will ask:

"Configure as a single-page app (rewrite all urls to /index.html)? Select Yes (else sub folder paths like example.com/route_path will not work correctly)

example output:

i Writing configuration info to firebase.json.
i Writing project information to .firebaserc..
i Writing gitignore file to .gitignore...


now run: npm run build

after finish build process , open your firebase.json(located in project folder) and review it

here is example :
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],

   
     "rewrites": [
      {
        "source": "**/!(robots.txt|sitemap.xml)",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
  } }

if you want stop rewriting url like robots.txt and sitemap.xml you can use this:
"source": "**/!(robots.txt|sitemap.xml)",
        "destination": "/index.html"

if its done we can go for next step..

type and run

 firebase deploy

now it should upload your data to firebase hosting, check it by visiting your firebase console. or typing frebase hosting url
is there any mistakes please comments ,  thank you ❤️️😄

Comments

Post a Comment

Popular posts from this blog

Handling undefined variables in laravel

Handling undefined variables in your laravel code is critically important because it can help prevent errors and improve the stability of your program. Undefined or null variables occur when you try to access a variable that has not been declared or assigned a value. If you try to use an undefined variable in your code, it can cause errors that can break your program or produce incorrect results. By handling undefined variables correctly in your laravel project, you can ensure that your program runs smoothly and produces the desired results in production. There are several ways to handle undefined variables, such as checking for their existence before using them, setting default values,  using type coercion, or using try-catch blocks to handle errors.   the try catch is a great way to achieve error handling. its better to wrap  your controller route connected methods with try-catch block. but when a handling small variable the try catch block not always great. here some examples that
Read more

How to use Spatie packages to enhance your Laravel development experience

Image
Spatie is a company(https://spatie.be)  that creates open source packages for Laravel, PHP and JavaScript. Spatie packages are useful for Laravel development because they provide solutions for common problems and tasks, such as managing user permissions and roles, backing up your app, transforming data for APIs, manipulating images and more. Spatie packages are easy to use, well documented and tested. You can find a list of Spatie packages on their website or on their GitHub page also . as a laravel developer i have using their packages for various tasks and fetures, they are really useful and life saving of the developer. Some of their most popular packages are laravel-permission,activity lo, laravel-backup, laravel-medialibrary.     < 1.      Laravel-Permission   One of the essential aspects of web application development is managing user permissions and roles. Laravel-Permission is a Spatie package that simplifies this process by providing an elegant and straightforward wa
Read more

Some Briefs of Data Mining

Image
I am currently learning data mining and I thought of sharing some interesting facts I have learned from my notes. I hope these facts will be useful for those who are interested in data mining :)                 Why data mining is required?    Data mining is required because it helps us to extract useful information and insights from large amounts of data. With the growth of technology, we are generating more data than ever before, and this data can be used to make better decisions, improve business operations, and gain a competitive advantage. Data mining techniques can help us to identify patterns, relationships, and trends in the data that may not be immediately apparent. By analyzing this data, we can gain insights into customer behavior, market trends, and other important factors that can help us to make better decisions. Data mining is used in many different fields, including finance, healthcare, marketing, and more. Overall, data mining is required because it helps us to turn dat
Read more