Mini GitHub Pages Blog Using React & Firebase

Code WolfCode Wolf

React is a very powerful tool for front end web development by facebook to solve its internal problems, but it somehow found its way into the open source community. React has grown noticeably in the past 3 years and has been helpful along the way.

It being the “V” in MVC and it’s DOM diffing advantages (will be introduced in coming posts), it makes way for a whole new world to be explored. Today, we are going to build a simple blog app using React and Firebase that will be hosted on github. Without much ado, let us get started.

Getting Started With Firebase

Head over to firebase and sign in with your google account (seriously, who doesn’t have a google account?) Next step:


create your project.

Go to settings > Database to get your API key. It should look something like: SMt2FIMkaJjRVxxj67UdhnWjgOZUxoaNnddhaEz0z


Putting together your firebase configuration, you should have an API key, a domain (the link shown on top of your firebase database), a db (same as your domain link prefixed by a ‘https://’) and a storage link. Keep these credentials together, because we are going to use them in our application.

Next, we need to setup authorization to our firebase database. Go to the rules tab in the database section of your app:

firebase rules

and add below code:

All this does it tell it to allow read access for our application only and also add “id” and “slug” fields as index for our posts route in the database.

For us to be able to retrieve data from firebase, we need data. So, you can import the following mock data into your firebase database:

For now, that is all we need from firebase. Let us get started with setting up our development environment.

Setting Up React

Late last month, facebook introduced a react cli known as create-react-app that helps you get started quickly with react without having to worry about setting up the tools necessary like webpack, loaders and/or babel. If you don’t want to use this tool and/or interested in setting up your own development environment, you should take a look at this, a short intro to webpack and also keep an eye out for the upcoming react series.

So, to get started, we install create-react-app via npm globally:

Now, we can initiate our project by using create-react-app. Our project will be named ghostBlog, so we can run below command to get started:

This might take a couple of minutes to finish because it also installs all the required node modules. Once the installation is done, we can check if the default react project that was created works, by “cd” into the project directory on terminal and running:

This should launch the development server and you can view the default app on http://localhost:3000

App Logic

Our blog app will have 3 components with two of those being a main component for different routes. We will have have the App component which is the parent component of the Posts component. What it does it get the list of posts from firebase and create multiple instances of the Posts component. The App component will also be our index route.

The third component is the Post component which takes one route parameter (the slug) and pulls the particular post that has the slug from firebase to create the complete blog post.

Do not confuse this component with the Posts component. The Post component shows selected post and is a parent component for the post route while the posts component just creates a list of all the posts pulled from the database and is a child component of the App component. That was a mouthful but you will get a hang of it when we start coding.

Our Design

All we have to do here is change the content of our index.html and index.css documents:

For our index.html document:

And for our css file should include:

This way, we import google fonts and bootstrap and don’t have to deal with messy css in our html.

Adding Configurations

Now we have react working, what we have to do is start creating necessary components and also add required dependencies. Let’s set up our config file that should hold the configurations for our firebase connection and also for our application, we can add one to the src directory and include our configurations from firebase into it, mine looks like so:

You can go ahead and delete a couple of files we won’t use in this project like logo.svg and App.css files from the src directory. Don’t forget to remove the line of code that imports the App.css and the logo.svg files from your App.js file.

Next up is to We are good to go.

App Component

Install firebase via npm:

And then import the necessary firebase modules and our config file module into our App.js file right below the react import line:

For our app to be able to use firebase, we need to configure firebase with our credentials and initialize it using:

Remove the existing class and it’s default exports and create a new react class called App:

The above is a fairly simple react component that just have a div element to render to the DOM. We want the content of our firebase database to be rendered to our DOM once the component has been mounted, so we need to add a constructor that sets the state of our component before the data from our database arrives to the component. Setting our constructor:

We set a set called Posts that is an empty array. So to actually get values from our firebase database and load it once the component has mounted, we need to add our firebase connection in the ComponentDidMount() method and then update our state:

So, we connect to firebase and get the data by id, then set our state in its callback function. We access the data from firebase using data.val() and since firebase returns the data as an array, the .reverse() array method is to display the last post first.

Posts Component

Our App component won’t be able to function without our Posts component, so we can go ahead and add a Components directory in our src directory. Then, create a Posts.js file for our Posts component.

Our Posts component will recieve the values in the state of our App component and create a post from that, which becomes its props.

So, our render method for the Posts component should be:

It just takes our component props and structures it into valid html so we can present it to the browser.

Connecting Posts Component To App Component

To pass the values of our App component to the Posts component, we need to first import our Posts component:

Next is to add a method to our class that loops through the state of the App component and creates a Post component from that, pushes it into an array and returns the array:

Then, to implement the method above, we can change the render method of our App component to:

Start the app using npm start and see the blog in action. It has not been completed yet because we haven’t implemented the routes.

Adding Post Component

The Post component will show a selected post. So, we can go ahead and create the Post.js file in our Components folder, Import react, Component and firebase like so:

Next, we need to create our react component and add the constructor that sets the state of the require values for our render method:

All we have to do next is to fetch data from our firebase database using the slug that will be passed to this component when the route (we will talk about routes next) is called. We will add this to the ComponentDidMount() method:

We get the slug fromt the routeParams, fetch the complete post from firebase, destructure the result, set the state and add the html content of the webpage to the post ref.

Adding Routes For App Component And Post Component

For us to have a working route, we need to install react-routes via npm:

It’s time to edit our index.js file. We need to import the Post component and also import Router, Route and hashHistory from react-router using:

change the render method of ReactDOM to include the routes, their paths and components that should handle them in the index.js file:

And we are done, okay, maybe we need just a little tweaking but our blog is good to go this way.

Link Tweak

Instead of using regular html a tags in our links, we can import Link from react-router for our Posts component using:

Next up, we can change our a tags from:


So, our return from the render method for our Posts component becomes:

Share it if you loved it and don’t forget to let me know if you want me to create a complete react tutorial series. I will love to see what you do with this tutorial, maybe add a comment system to the blog. Post a link below, I want to know.


EDIT: TO build your script for production, run:

This will create a build directory in your projects directory. You can edit the html page generated if you are not going to use absolute paths. Here is a link to my demo page, you can find my build on github.

Hipster Developer. Full stack Javascript Developer. LAMP stack Beast. Mentor with Thinkful and Codementor. Always seeking for ways to improve the web and make life better. Serious music lover.