Firebase: Deploying a single page application in React

Firebase is a company founded by James Tamplin and Andrew Lee in 2011 and then acquired by Google in October 2014.
Firebase platform is used for creating mobile and web applications. Firebase gives developers many tools to develop quality apps. Firebase is a NOSQL database program.
Firebase supports: authentication, realtime database, hosting a Test lab and notifications.

Today I’m going to be focusing on how simple it is to deploy a website with Firebase.

First go to your terminal and create a folder

mkdir deploy-test

then check that it is there with 'ls' and then access your file and open vs code with code.

Vs code is going to open and now let’s create a React application that we will call deploy. If you press command + J, your terminal will open and there type

npx create-react-app deploy 

This is going to take a second so let's go ahead and visit firebase.

When you get to firebase, there is a button that says get started and when you press it you will have to sign in with a google account.

Now here is where you see all your projects and if you want to add a new project you press on the Add project plus sign

Now you have to enter the name you want to give your project. I’m going to call it test-deploy and press continue

Then you will be asked about Google analytics and just press continue.
Then Configure Google Analytics which I always choose the default and I press Create project

It is going to start creating your project and while we wait for that to finish let’s go to our vs code.

Our react app has been created!
Let’s get into our app with:

cd deploy

and then let’s run,

npm start

to see our application

Great! Now we have our application running. Let’s do some clean up so we can create our own application.

Let’s go to our left side and delete a couple of files.
We are going to delete
-App.test.js
-logo.svg
-setupTests.js

Your app is going to freak out because it is looking for the logo so our next step is to go to App.js and clean that file.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Here we are going to delete the import for the logo and we are going to delete in the return everything expect that first div and we are going to write and h1 that says hello world with a rocket.

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello World 🚀</h1>
    </div>
  );
}

export default App;

Now we are going to go to App.css
And delete everything. Then we are going to add

* {
  margin: 0;
}

Now let’s go back to firebase and it looks like our project is ready!

Press continue, now let’s click on web:

the next step is to give our app a nickname. I’m going to call it deploy and let’s create it

Then the next page press next and then you will see this right here!
npm install -g firebase-tools

You have to install that in your terminal.

Then the next page is going to tell you how to deploy. First you do firebase login which is your login with google in your terminal then you will do firebase init and then firebase deploy then go to continue to console and let’s go back to our react app.

Now lets open another terminal and lets go into our app with 'cd deploy' and we are going to install:

npm install -g firebase-tools

After that is installed you are going to sign in with google by putting

Firebase login

After you put your password go ahead and type the command

Firebase init 

Here there are going to be a couple of options. Go all the way to Hosting and press space and it will get selected
Now you can press enter

Now you are going to press
Use an existing project

And now you are going to pick your project and press enter

This part is very important. They are going to ask.
What do you want to use as your public directory?
You need to write 'build' and press enter

• Now they are going to ask if you want to configure as a single-page app and you put y

• then it will ask if you want to deploy with GitHub, say N

It is going to tell you that firebase initialization is complete.

Now run in your terminal

npm run build

And now let’s type

Firebase deploy

And That’s It!
There is going to be a hosting URL and it you click it you will see your application!

Conclusion:

Firebase is a powerful tool that lets you create big applications fast and easy.