Create A Live Comment Feed with Pusher and Gatsby (React + GraphQL + Node.js)

Realtime comments made easy with Pusher and Gatsby

Brandon Morelli
codeburst
Published in
5 min readJun 20, 2018

This tutorial was written by Chris Nwamba and originally appeared on the Pusher Blog.

According to Wikipedia, a static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application

Gatsby is a modern static site generator that allows you to build static web pages using React and GraphQl. Getting started with Gatsby is pretty easy and its installation is an npm install or yarn install away.

Today we’ll be adding a realtime comment section to the sports blog we’ll be building. We’ll call our blog the “Football transfer buzz with Gordon Mc-gossip”. Our application will contain a post and allow users to leave comments and everyone gets to see it in realtime.

PREREQUISITES

  1. Kindly ensure you have Node, Npm or Yarn installed on your machine before moving past this section. This will be needed for running and managing the dependencies needed by our application.
  2. Also, no knowledge of React is required, but a basic understanding of JavaScript may be helpful.
  3. Pusher: this is a framework that allows you to build realtime applications with its easy to use pub/sub messaging API.
  4. Gatsby: this is a static site generator. ( minimum version "gatsby": "^1.9.247")

INSTALL GATSBY

Installing Gatsby is pretty easy once you have Node installed on your machine. Simply run:

# for npm users
npm i -g gatsby-cli
# for yarn users
yarn global add gatsby-cli

This Gatsby CLI comes with a few helpful commands that can help you build and test your apps locally.

CREATE YOUR APP

To create our project, simply run:

# new gatsby project
gatsby new gatsby-site-pusher

This will create our new project Transfer-Buzz and install its dependencies. If you cd into your new project directory, it will look like this.

Most of the work we’ll be doing would be in the src/ directory. The components we’ll create would go into the src/components directory and pages would go into the src/pages directory.

Install dependency:

# for npm users
npm i --save pusher-js
# for yarn users
yarn add pusher-js

GET OUR PUSHER CREDENTIALS

If you don’t have a Pusher account already, kindly create a free one here. Once you have an account, simply head down to your dashboard and create an app. Once that is done, click on App Keys and note your credentials. We’ll be needing them in a bit.

CREATING OUR APP COMPONENTS

The first component we’ll create is our CommentList component. This will be responsible for listing the comments left by users.

This simply takes an array of comments with attributes {author, message} and returns a CommentListcomponent.

Next, is the Comment component, which will have a form for accepting new comments and list comments below.

Here, when the component gets mounted, we try to load previous comments from the server and pass that data as props to the CommentList component.

Note: please remember to updated placeholders with your pusher credentials.

PUTTING CONTENT ON OUR PAGE

Open your src/pages/index.js file which should already exist. You should replace its content with this:

This contains a post we made and the Comment component we imported above.

GETTING DATA IN GATSBY

Gatsby uses GraphQL for getting data. It could be from any source. There are a few files where changes need to be made to get data. We have gatsby-node.js, gatsby-browser.js, gatsby-config.js among others.

What we’re concerned about right now is gatsby-config.js. It is responsible for passing data down to our src/components/header.js component. This gets data locally from the file and it’s an easy way to initialize your application with data.

Open up your src/components/header.js file and you should see this:

It takes a prop called siteTitle which was exported from the file gatsby-config.js.

Feel free to go ahead and change the value for title in gatsby.js to Football transfer buzz with Gordon Mc-Gossip'.

SETTING UP THE SERVER

Comments sent by users need to go somewhere, that’s what the server is for. It will save the comment, and publish it to Pusher who will trigger an update to all clients subscribed to that channel and listening for that event.

First, we’ll need to add the dependencies needed by our server.

# for yarn users
yarn add express body-parser cors pusher
# for npm users
npm i express body-parser cors pusher

Create the file server.js and add the following:

Here, we initialize Pusher with our credentials gotten from our dashboard. When we get a request on localhost:8080/comments we return all comments gotten so far and receive comments sent to POST localhost:8080/comment.

RUNNING THE APP

We’ll use one of Gatsby’s helpful CLI commands to start our application. Simply run:

# gatsby cli command
gatsby develop

This will start our application on port 8000 and can be accessed here http://localhost:8000/.

You’ll also need to start the server by running:

# start node server
node server.js

Our server application will run on http://localhost:8080/ and all API calls would go here.

MORE

Gatsby allows you to export as a static content when going to production. It could prefetch your data from any data source and bundle it into the generated static file.

To do that, simply run:

# make production build
gatsby build

Gatsby will perform an optimized production build for your site generating static HTML and per-route JavaScript code bundles.

CONCLUSION

We’ve been able to build a simple blog application with a live comment section. This was done using Pusher and Gatsby. The repo for this tutorial lives here. Feel free to contribute.

We make communication and collaboration APIs that power apps all over the world, supported by easy to integrate SDKs for web, mobile, as well as most popular backend stacks.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Brandon Morelli

Creator of @codeburstio — Frequently posting web development tutorials & articles. Follow me on Twitter too: @BrandonMorelli

Responses (1)

What are your thoughts?