DEV Community

Al Muntasir Abir
Al Muntasir Abir

Posted on

2 1

React Firebase Hosting

Install 'nodejs' if you dont have it in your system .

create a folder , open terminal / shell there and create a 'react' project with the command: 'npx create-react-app'.

Customize the built in website if you want.

Go to terminal and type the command: 'npm run build' , That'll create a build folder in your project's root directory.

Download the firebase toolkits with this command: 'npm install -g firebase-tools' , this will install it globally.

Login to firebase with : 'firebase login' this will open a browser window and you will have to login using your gmail .

Initialize firebase in the command line with : 'firebase init' .
It will open the interactive command prompt .

For the first configuration we'll chose : 'Hosting' , click 'space' to select
and hit 'enter' to continue.

What do you want to use as your public directory?
-type 'build' and hit 'enter'.

Configure as a single page app?

  • 'y'

File build/index.html already exists. Overwrite?

  • 'n'

Then go to : https://firebase.google.com/

Click on the top right corner : 'Go To Console' .

Add a project and name it anything you like.

Go to the project and click on : 'setting' icon and select 'project settings' from the popup.

Copy the 'Project ID' from the page .

In the command line : 'firebase use Your_Project_ID'

Then type in : 'firebase deploy'

This will show your live react site address in the command line.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay