DEV Community

Cover image for Firebase: Deploying a single page application in React
josesrodriguez610
josesrodriguez610

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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 
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

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

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

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
Enter fullscreen mode Exit fullscreen mode

and then let’s run,

npm start
Enter fullscreen mode Exit fullscreen mode

to see our application

Alt Text

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

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

* {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Press continue, now let’s click on web:

Alt Text

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

Alt Text

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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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

Firebase login
Enter fullscreen mode Exit fullscreen mode

After you put your password go ahead and type the command

Firebase init 
Enter fullscreen mode Exit fullscreen mode

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

Now you are going to press
Use an existing project

Alt Text

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

Alt Text

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

  • 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
Enter fullscreen mode Exit fullscreen mode

And now let’s type

Firebase deploy
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Conclusion:

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

Top comments (0)