Firebase: Deploying a single page application in React
Published: 2020-11-07 04:38:52

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 

````javascript
mkdir deploy-test
``` 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kzvfmrvispjkglcako78.png)

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

````javascript
npx create-react-app deploy 
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gbxz2vgugz7wejo2fre3.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vihz5vxqpwxu1k6f5cia.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yan92og15rb167coy255.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/12ncock0a9sdos359dpa.png)

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: 

````javascript
cd deploy
``` 
and then let’s run, 

````javascript
npm start
```

to see our application

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nvl5beohinqu0cbnlske.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g69wz08jgwd8g8w9nf6a.png)

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.

````javascript 
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.

````javascript 
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

````javascript
* {
  margin: 0;
}
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1bfveug35zlcaqz5w5dg.png)

Press continue, now let’s click on web: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0kzghaivw09xfgb4aov5.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/38v6sy8du57khl86uoj3.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9vpyrnho2n2vvae0upni.png)

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:

````javascript 
npm install -g firebase-tools
```

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

````javascript
Firebase login
```

After you put your password go ahead and type the command 

````javascript
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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c5hlk43zvgvndah3fuqf.png)

Now you are going to press 
Use an existing project 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwyvptnnwnn9uridmmu2.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/de16m0c86j9f404omrik.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s1efo8c80vwhqnm6bsl5.png)

- 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

````javascript 
npm run build
```

And now let’s type 

````javascript
Firebase deploy
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/th4d9c3prxpdrevz4q4m.png)

**Conclusion:**

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